body{

    background:#f4f6f9;

    font-family:Segoe UI,Arial,sans-serif;

}

/* ==========================================================
   PALETA OFICIAL EMP SISTEMAS
   ========================================================== */

:root {
    /* Verdes principais */
    --emp-verde-900: #0A4C3D;
    --emp-verde-800: #155C3E;
    --emp-verde-700: #0A613D;
    --emp-verde-500: #27A872;
    --emp-verde-400: #32DB95;
    --emp-verde-200: #92E1C0;

    /* Azuis */
    --emp-azul-900: #002E4C;
    --emp-azul-800: #004D5C;
    --emp-azul-700: #004E62;
    --emp-azul-500: #008FAB;
    --emp-azul-400: #00BADD;
    --emp-azul-300: #6DD2E2;

    /* Roxos */
    --emp-roxo-900: #3F034C;
    --emp-roxo-800: #3F0D5D;
    --emp-roxo-700: #3E0363;
    --emp-roxo-500: #7922AD;
    --emp-roxo-400: #9F2EE0;
    --emp-roxo-300: #C993E4;

    /* Laranjas */
    --emp-laranja-900: #4B190B;
    --emp-laranja-800: #632312;
    --emp-laranja-700: #5D2010;
    --emp-laranja-500: #B74729;
    --emp-laranja-400: #E46340;
    --emp-laranja-300: #F3A794;

    /* Neutros */
    --emp-cinza-900: #263238;
    --emp-cinza-700: #495057;
    --emp-cinza-300: #DEE2E6;
    --emp-cinza-100: #F4F6F8;
    --emp-branco: #FFFFFF;

    /* Papéis visuais do sistema */
    --emp-principal: var(--emp-verde-700);
    --emp-principal-hover: var(--emp-verde-900);

    --emp-confirmar: var(--emp-verde-500);
    --emp-confirmar-hover: var(--emp-verde-800);

    --emp-info: var(--emp-azul-500);
    --emp-info-hover: var(--emp-azul-700);

    --emp-especial: var(--emp-roxo-500);
    --emp-alerta: var(--emp-laranja-400);
    --emp-perigo: #B3261E;

    --emp-fundo: var(--emp-cinza-100);
    --emp-texto: var(--emp-cinza-900);
}


/* Cabeçalho principal */
.bg-emp-principal {
    color: var(--emp-branco);
    background-color: var(--emp-principal);
}

/* Cabeçalho de confirmação */
.bg-emp-confirmar {
    color: var(--emp-branco);
    background-color: var(--emp-confirmar);
}

/* Botão principal */
.btn-emp-principal {
    color: var(--emp-branco);
    background-color: var(--emp-principal);
    border-color: var(--emp-principal);
}

.btn-emp-principal:hover,
.btn-emp-principal:focus {
    color: var(--emp-branco);
    background-color: var(--emp-principal-hover);
    border-color: var(--emp-principal-hover);
}

/* Botão de confirmação */
.btn-emp-confirmar {
    color: var(--emp-branco);
    background-color: var(--emp-confirmar);
    border-color: var(--emp-confirmar);
}

.btn-emp-confirmar:hover,
.btn-emp-confirmar:focus {
    color: var(--emp-branco);
    background-color: var(--emp-confirmar-hover);
    border-color: var(--emp-confirmar-hover);
}

/* Botão informativo */
.btn-emp-info {
    color: var(--emp-branco);
    background-color: var(--emp-info);
    border-color: var(--emp-info);
}

.btn-emp-info:hover,
.btn-emp-info:focus {
    color: var(--emp-branco);
    background-color: var(--emp-info-hover);
    border-color: var(--emp-info-hover);
}

/* Botão especial, para uso raro */
.btn-emp-especial {
    color: var(--emp-branco);
    background-color: var(--emp-especial);
    border-color: var(--emp-especial);
}

/* Aviso */
.alert-emp {
    color: var(--emp-laranja-900);
    background-color: var(--emp-laranja-300);
    border-color: var(--emp-laranja-400);
}

.emp-card{

    border:none;

    border-radius:18px;

    box-shadow:0 8px 30px rgba(0,0,0,.08);

}


.emp-logo{

    width:90px;

}


.emp-btn{

    border-radius:12px;

    font-size:20px;

    font-weight:bold;

    padding:14px;

}


.emp-title{

    font-size:34px;

    font-weight:700;

}


.emp-subtitle{

    color:#6c757d;

}


.emp-logo-checkout {
    height: 48px;
    max-width: 110px;
    object-fit: contain;
}

/* ==========================================================
   LOGIN DO EMPCheckout
   ========================================================== */

.login-pagina {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;

    background:
        linear-gradient(
            135deg,
            var(--emp-verde-900) 0%,
            var(--emp-verde-700) 45%,
            var(--emp-verde-500) 100%
        );
}


/* Card principal do login. */

.login-card {
    width: 100%;
    max-width: 420px;

    overflow: hidden;

    border: 0;
    border-radius: 20px;
}


/* Logo da EMP. */

.login-logo {
    display: block;

    width: auto;
    max-width: 230px;
    max-height: 105px;

    margin-left: auto;
    margin-right: auto;

    object-fit: contain;
}


/* Título principal. */

.login-titulo {
    color: var(--emp-verde-900);
}


/* Realce dos campos ao receber foco. */

.login-card .form-control:focus {
    border-color: var(--emp-verde-500);

    box-shadow:
        0 0 0 0.25rem
        rgba(39, 168, 114, 0.22);
}


/* Rodapé inferior do card. */

.login-rodape {
    padding: 10px 16px;

    color: var(--emp-verde-900);
    background-color: var(--emp-verde-200);
}


/* Pequeno ajuste em celulares. */



    .login-pagina {
        min-height: 100vh;
    }

@media (max-width: 575.98px) {

    .login-card .card-body {
        padding: 28px 22px !important;
    }

}

/* ==========================================================
   Cabeçalho do EMPCheckout
   ========================================================== */

.emp-logo{
    height:52px;
    width:auto;
}

.checkout-header h4{
    margin:0;
    line-height:1.1;
    font-size:1.35rem;
}

.checkout-header small{
    display:block;
    margin-top:2px;
    font-size:.85rem;
}

.checkout-user{
    line-height:1.2;
}

/* Mantem todo o cabecalho acima do conteudo da pagina. */
.cabecalho-navegacao {
    position: relative;
    z-index: 1000;
    isolation: isolate;
}

.acoes-navegacao {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.acoes-navegacao .btn {
    position: relative;
    pointer-events: auto;
}

.acoes-navegacao .btn:hover,
.acoes-navegacao .btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.45rem rgba(0, 0, 0, 0.18);
}

/* ==========================================================
   CARRINHO MOBILE
   ========================================================== */

.carrinho-mobile-card {
    border: 1px solid #dee2e6;
    border-radius: 12px;
    background: #ffffff;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.carrinho-mobile-descricao {
    font-size: 1.1rem;
    line-height: 1.35;
    word-break: break-word;
}

@media (max-width: 768px) {

    .table thead {
        display: none;
    }

    .table > :not(caption) > * > * {
        border-bottom-width: 0;
    }

}

/* ==========================================================
   CABEÇALHO DO CARRINHO EM TELAS PEQUENAS
   ========================================================== */

.carrinho-mobile-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;

    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
}


/* Mantém os cartões separados visualmente. */

@media (max-width: 991.98px) {

    #itensVenda {
        background: #f1f3f5;
    }

    #itensVenda tr {
        background: transparent;
    }

    .carrinho-mobile-card {
        margin-bottom: 4px;
    }

    /* Esconde completamente o cabeçalho tradicional. */
    #itensVenda,
    #itensVenda tr,
    #itensVenda td {
        width: 100%;
    }
}

/* ==========================================================
   ESTRUTURA DA PÁGINA DO CHECKOUT
   Evita que o conteúdo cubra o rodapé técnico.
   ========================================================== */

.checkout-pagina {
    min-height: calc(100vh - 55px);
}


/* O rodapé permanece no fluxo normal da página. */

.checkout-footer {
    position: relative;
    z-index: 10;
    width: 100%;
}


/* Em celulares, deixa uma folga maior entre os botões
   de finalização e o rodapé. */

@media (max-width: 991.98px) {

    .checkout-pagina {
        min-height: auto;
    }

    .checkout-footer {
        margin-top: 16px;
    }
}

/* =========================================================
   SELOS DE SITUAÇÃO DA NOTA FISCAL

   Seguem a convenção semântica da marca, não as cores padrão
   do Bootstrap:

     verde   -> deu certo (autorizada)
     azul    -> estado normal, em andamento (pendente)
     cinza   -> nada aconteceu ainda / encerrado (sem nota, inutilizada)
     laranja -> problema que exige ação (rejeitada — dá para reemitir)
     roxo    -> caso grave e definitivo (denegada — número queimado,
                não adianta reemitir)
   ========================================================= */

.selo-nf {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.selo-nf-autorizada {
    background-color: var(--emp-verde-500);
    color: #fff;
}

.selo-nf-pendente {
    background-color: var(--emp-azul-500);
    color: #fff;
}

.selo-nf-sem {
    background-color: var(--emp-cinza-300);
    color: var(--emp-cinza-900);
}

.selo-nf-rejeitada {
    background-color: var(--emp-laranja-500);
    color: #fff;
}

.selo-nf-denegada {
    background-color: var(--emp-roxo-500);
    color: #fff;
}

.selo-nf-inutilizada {
    background-color: var(--emp-cinza-700);
    color: #fff;
}

/* Aviso de homologação: sério, mas sem o vermelho berrante do
   Bootstrap. Laranja da marca, que é a cor de "atenção" aqui. */
.aviso-homologacao {
    border: 1px solid var(--emp-laranja-500);
    border-left: 5px solid var(--emp-laranja-500);
    background-color: #FDF1ED;
    color: var(--emp-laranja-900);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.875rem;
}

/* ------------------------------------------------------------------
   Caixas de aviso do acompanhamento da NFC-e.

   Seguem a mesma convenção dos selos acima, para que a cor signifique
   a mesma coisa na tela de venda e no painel: verde = deu certo,
   azul = em andamento, laranja = exige ação, roxo = grave/definitivo.
   Existem porque as alert-* do Bootstrap trazem outra paleta.
   ------------------------------------------------------------------ */
.aviso-emp {
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 0.9rem;
    border: 1px solid;
    border-left-width: 5px;
}

.aviso-emp-andamento {
    border-color: var(--emp-azul-500);
    background-color: #EAF7FA;
    color: var(--emp-azul-900);
}

.aviso-emp-sucesso {
    border-color: var(--emp-verde-500);
    background-color: #EAF7F1;
    color: var(--emp-verde-900);
}

.aviso-emp-acao {
    border-color: var(--emp-laranja-500);
    background-color: #FDF1ED;
    color: var(--emp-laranja-900);
}

.aviso-emp-grave {
    border-color: var(--emp-roxo-500);
    background-color: #F4EBF8;
    color: var(--emp-roxo-900);
}