/* =========================================================================
   ESTILOS GERAIS E PALETA DE CORES (NEWS T-SHIRTS OFFICIAL)
   ========================================================================= */

body {
    font-family: Arial, sans-serif;
    background-color: #FFF4EE; 
    color: #333333; 
    margin: 0;
    padding: 0 0 75px 0;
}

.splash-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #FFF4EE; display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 9999;
    transition: opacity 0.5s ease;
}

.splash-logo { max-width: 80%; max-height: 200px; animation: pulse 2s infinite; }
.loader { margin-top: 20px; border: 4px solid #F3F3F3; border-top: 4px solid #FF3366; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

header { background-color: #FFFFFF; padding: 15px; text-align: center; box-shadow: 0px 2px 5px rgba(0,0,0,0.05); }
.logo-container { display: flex; justify-content: center; align-items: center; }
.logo { max-height: 190px; max-width: 95%; object-fit: contain; }

main { padding: 15px; }
.aba { display: none; }
.aba.ativa { display: block; animation: fadeIn 0.25s ease-out; }
h2 { font-size: 20px; margin-top: 5px; color: #1A1A1A; }

.menu-inferior {
    position: fixed; bottom: 0; left: 0; width: 100%; background-color: #FFFFFF;
    display: flex; justify-content: space-around; padding: 10px 0;
    box-shadow: 0px -2px 10px rgba(0,0,0,0.08); z-index: 1000;
}

.menu-inferior button {
    background: none; border: none; color: #777777; display: flex; flex-direction: column;
    align-items: center; gap: 3px; cursor: pointer; width: 20%; transition: color 0.2s ease;
}

.menu-inferior button:active, .menu-inferior button:hover { color: #FF3366; }
.menu-inferior .icone { font-size: 20px; }
.menu-inferior .texto { font-size: 11px; font-weight: bold; }

.grupo-form { margin-bottom: 15px; display: flex; flex-direction: column; }
.grupo-form label { font-weight: bold; margin-bottom: 6px; font-size: 13px; color: #555555; }
.asterisco { color: #FF3366; margin-left: 3px; }
.legenda { font-size: 12px; color: #888888; }
.texto-dica { margin: 4px 0 0 0; font-size: 11px; color: #888; }

.grupo-form input, .grupo-form select {
    padding: 12px; border: 1px solid #DDDDDD; border-radius: 8px;
    font-size: 15px; background-color: #FFFFFF; color: #333333; outline: none; width: 100%; box-sizing: border-box;
}

.botao-primario {
    width: 100%; background-color: #FF3366; color: white; border: none;
    padding: 14px; font-size: 15px; font-weight: bold; border-radius: 8px;
    margin-top: 5px; cursor: pointer; box-shadow: 0px 4px 10px rgba(255, 51, 102, 0.2);
}

.botao-promocao {
    background-color: #FFF4EE; color: #FF3366; border: 2px solid #FF3366;
    padding: 6px 12px; border-radius: 6px; font-weight: bold; font-size: 12px; cursor: pointer;
}

/* CAIXA DE RESUMO AO VIVO */
.caixa-resumo {
    background: #fdfdfd; padding: 15px; border-radius: 8px; border: 1px dashed #CCC; margin-bottom: 15px; font-size: 13px;
}
.linha-resumo { display: flex; justify-content: space-between; margin-bottom: 5px; }
.texto-vermelho { color: #e74c3c; font-weight: bold; }
.total-destaque { font-weight: bold; font-size: 16px; margin-top: 5px; }

.preview-estoque {
    margin-top: 10px; border: 2px dashed #CCCCCC; border-radius: 8px;
    min-height: 100px; display: flex; justify-content: center; align-items: center; background-color: #FFFFFF;
}
.preview-estoque img { max-height: 130px; border-radius: 5px; }

.pos-venda-card {
    background: #FFFFFF; padding: 25px 20px; border-radius: 8px; margin-top: 25px;
    border: 2px solid #2ecc71; box-shadow: 0 6px 15px rgba(46, 204, 113, 0.15); text-align: center;
}

.botao-whatsapp { flex: 1; background-color: #25D366; color: white; border: none; padding: 12px; font-size: 14px; font-weight: bold; border-radius: 6px; cursor: pointer; }
.botao-pdf { flex: 1; background-color: #333333; color: white; border: none; padding: 12px; font-size: 14px; font-weight: bold; border-radius: 6px; cursor: pointer; }

/* MODAIS */
.modal-sobreposicao {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.85); z-index: 2000; display: flex; flex-direction: column;
    justify-content: flex-start; align-items: center; padding: 20px; box-sizing: border-box; overflow-y: auto;
}

.modal-janela { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.modal-cabecalho { display: flex; justify-content: space-between; width: 100%; gap: 10px; }
.btn-fechar { background-color: #555555; color: white; border: none; padding: 12px; border-radius: 6px; font-weight: bold; cursor: pointer; flex: 1; }
.btn-baixar { background-color: #FF3366; color: white; border: none; padding: 12px; border-radius: 6px; font-weight: bold; cursor: pointer; flex: 2; }
.recibo-layout { background-color: #FFFFFF; color: #333333; padding: 30px; border-radius: 4px; width: 100%; box-sizing: border-box; box-shadow: 0px 5px 15px rgba(0,0,0,0.3); }

/* BI PANEL */
.bi-header { margin-bottom: 15px; }
.bi-sub { font-size: 13px; color: #666666; margin: -3px 0 15px 0; }
.botao-pdf-bi { position: absolute; top: 5px; right: 0; background-color: #333333; color: white; border: none; padding: 6px 12px; font-size: 11px; font-weight: bold; border-radius: 4px; cursor: pointer; }

.bi-filtros { display: flex; gap: 8px; background: #FFFFFF; padding: 12px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.03); margin-bottom: 10px; }
.filtro-item { flex: 1; display: flex; flex-direction: column; }
.filtro-item label { font-size: 10px; font-weight: bold; color: #777777; margin-bottom: 4px; text-transform: uppercase; }
.filtro-item select, .filtro-item input[type="date"] { padding: 6px; font-size: 12px; border: 1px solid #E3E3E3; border-radius: 6px; background-color: #FFF4EE; color: #333333; width: 100%; box-sizing: border-box; }

.bi-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
.kpi-card { background: #FFFFFF; padding: 15px 12px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.03); border-left: 4px solid #FF3366; display: flex; flex-direction: column; }
.kpi-titulo { font-size: 11px; color: #888888; font-weight: bold; margin-bottom: 5px; }
.kpi-valor { font-size: 16px; font-weight: bold; color: #222222; }

.bi-grid-graficos { display: flex; flex-direction: column; gap: 20px; }
.grafico-card { background: #FFFFFF; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.grafico-card h3 { font-size: 14px; color: #444444; margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid #F5F5F5; padding-bottom: 8px; }
.canvas-container { position: relative; width: 100%; height: 260px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }