* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --cor-primaria: #1E3A5F;
    --cor-primaria-escura: #0F1F3D;
    --cor-primaria-clara: #2B5797;
    --cor-secundaria: #3B7DDD;
    --cor-secundaria-clara: #6BA3ED;
    --cor-accent: #00D4AA;
    --cor-botao: #3B7DDD;
    --cor-botao-hover: #2B6BC5;
    --cor-botao-escuro: #1D5AB5;
    --cor-fundo: #F0F4F8;
    --cor-fundo-card: #FFFFFF;
    --cor-texto: #1A2332;
    --cor-texto-claro: #8896A6;
    --cor-borda: #D2DAE6;
    --cor-borda-foco: #3B7DDD;
    --cor-sucesso: #10B981;
    --cor-sucesso-fundo: #ECFDF5;
    --cor-erro: #EF4444;
    --cor-erro-fundo: #FEF2F2;
    --cor-alerta: #F59E0B;
    --cor-alerta-fundo: #FFFBEB;
    --sombra-card: 0 4px 24px rgba(30, 58, 95, 0.08);
    --sombra-botao: 0 4px 14px rgba(59, 125, 221, 0.35);
    --raio-borda: 12px;
    --raio-borda-input: 8px;
    --transicao: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    min-height: 100vh;
    line-height: 1.6;
}

.tela { display: none; min-height: 100vh; }
.tela.ativa { display: block; }

/* ===== LOGIN ===== */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(135deg, #1A2E4A 0%, #0F1F3D 40%, #162D50 70%, #1A2E4A 100%);
    background-size: 40px 40px, 40px 40px, 100% 100%;
    position: relative;
    overflow: hidden;
}

.login-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 20% 50%, rgba(59, 125, 221, 0.10) 0%, transparent 50%);
    animation: rotateGradient 40s linear infinite;
}

@keyframes rotateGradient { to { transform: rotate(360deg); } }

.login-card {
    background: var(--cor-fundo-card);
    border-radius: 20px;
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    position: relative;
    z-index: 1;
}

.login-logo { text-align: center; margin-bottom: 8px; }
.logo-img { max-width: 200px; max-height: 90px; object-fit: contain; }
.logo-fallback { display: flex; align-items: center; justify-content: center; }
.logo-text { font-size: 2.5rem; font-weight: 800; color: var(--cor-primaria); letter-spacing: 4px; }
.login-titulo { text-align: center; font-size: 1rem; color: var(--cor-texto-claro); margin-bottom: 32px; }

/* ===== CAMPOS ===== */
.campo-grupo { margin-bottom: 20px; }
.campo-grupo label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; }
.campo-grupo label i { margin-right: 6px; color: var(--cor-secundaria); width: 16px; text-align: center; }

.campo-grupo input[type="text"],
.campo-grupo input[type="password"] {
    width: 100%;
    padding: 13px 16px;
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio-borda-input);
    font-size: 1rem;
    background: #F8FAFC;
    outline: none;
    transition: var(--transicao);
}

.campo-grupo input:focus { border-color: var(--cor-borda-foco); background: #FFF; }
.senha-wrapper { position: relative; display: flex; align-items: center; }
.senha-wrapper input { padding-right: 48px !important; }

.btn-ver-senha {
    position: absolute;
    right: 4px;
    background: none;
    border: none;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--cor-accent);
    font-size: 1.1rem;
}

/* ===== BOTÕES ===== */
.btn-principal {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--cor-botao), var(--cor-secundaria-clara));
    color: white;
    border: none;
    border-radius: var(--raio-borda-input);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--sombra-botao);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.btn-secundario {
    padding: 12px 24px;
    background: #EBF2FC;
    color: var(--cor-secundaria);
    border: 2px solid #D2DAE6;
    border-radius: var(--raio-borda-input);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-icon {
    background: rgba(255,255,255,0.12);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== NAVBAR ===== */
.navbar {
    background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 20px rgba(15,31,61,0.25);
}

.navbar-esquerda { display: flex; align-items: center; }
.navbar-logo { height: 38px; object-fit: contain; filter: brightness(0) invert(1); }
.navbar-logo-text { font-size: 1.5rem; font-weight: 800; color: white; letter-spacing: 3px; }
.navbar-centro { flex: 1; text-align: center; }
.navbar-titulo { color: white; font-size: 1.15rem; font-weight: 600; }
.navbar-direita { display: flex; align-items: center; gap: 8px; }
.navbar-usuario { color: white; font-size: 0.875rem; margin-right: 8px; display: flex; align-items: center; gap: 6px; }

/* ===== CONTEÚDO ===== */
.conteudo-principal { max-width: 600px; margin: 0 auto; padding: 32px 20px 48px; }

.producao-card {
    background: var(--cor-fundo-card);
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-card);
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid rgba(210,218,230,0.5);
}

.card-header {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-clara));
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h2 { color: white; font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.btn-atualizar { background: rgba(255,255,255,0.15); border: none; color: white; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.producao-card form { padding: 28px; }

/* ===== CAMPOS INFO E PRODUÇÃO ===== */
.campos-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.info-item label { font-size: 0.75rem; font-weight: 700; color: var(--cor-texto-claro); text-transform: uppercase; }
.info-valor { background: #EBF2FC; padding: 12px 16px; border-radius: var(--raio-borda-input); font-weight: 600; color: var(--cor-primaria); border: 2px solid var(--cor-borda); }
.divisor { text-align: center; margin: 24px 0 20px; position: relative; }
.divisor::before { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--cor-borda), transparent); }
.divisor span { background: var(--cor-fundo-card); padding: 0 20px; font-weight: 700; color: var(--cor-primaria); position: relative; }

.campos-producao { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.input-moeda { position: relative; display: flex; align-items: center; }
.prefixo-moeda { position: absolute; left: 14px; font-weight: 700; color: var(--cor-secundaria); z-index: 1; }
.input-valor { width: 100%; padding: 12px 16px 12px 42px !important; border: 2px solid var(--cor-borda) !important; border-radius: var(--raio-borda-input) !important; text-align: right; font-weight: 500; }
.btn-salvar { font-size: 1.1rem; padding: 16px 24px; margin-top: 16px; }

/* ===== LISTA DE VENDEDORES (COM AÇÕES LADO A LADO) ===== */
.campos-cadastro { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 8px; }
.lista-vendedores { padding: 0; }
.sem-dados { text-align: center; color: var(--cor-texto-claro); padding: 32px 20px; font-style: italic; }

.vendedor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    border-bottom: 1px solid var(--cor-borda);
}

.vendedor-item:last-child { border-bottom: none; }
.vendedor-info { flex: 1; }
.vendedor-nome { font-weight: 600; color: var(--cor-texto); }
.vendedor-login { font-size: 0.8rem; color: var(--cor-texto-claro); }

.vendedor-status {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
}

.vendedor-status.ativo { background: var(--cor-sucesso-fundo); color: #065F46; }
.vendedor-status.inativo { background: var(--cor-erro-fundo); color: var(--cor-erro); }

/* SISTEMA DE AÇÕES LADO A LADO */
.vendedor-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-acao-vendedor {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.btn-acao-vendedor.desativar { background: var(--cor-alerta-fundo); color: #92400E; }
.btn-acao-vendedor.ativar { background: var(--cor-sucesso-fundo); color: #065F46; }
.btn-acao-vendedor.excluir { background: var(--cor-erro-fundo); color: var(--cor-erro); }

/* ===== MODAIS E TOASTS ===== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15,31,61,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-card { background: var(--cor-fundo-card); border-radius: var(--raio-borda); width: 100%; max-width: 440px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.modal-header { background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-clara)); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; border-radius: var(--raio-borda) var(--raio-borda) 0 0; }
.modal-header h3 { color: white; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.btn-fechar-modal { background: rgba(255,255,255,0.15); border: none; color: white; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.modal-card form { padding: 24px; }
.modal-botoes { display: flex; gap: 12px; margin-top: 8px; }
.modal-botoes .btn-principal { flex: 1; }
.modal-botoes .btn-secundario { flex: 0 0 auto; }

.mensagem { padding: 12px 16px; border-radius: var(--raio-borda-input); font-size: 0.875rem; margin-bottom: 16px; border-left: 4px solid; }
.mensagem.sucesso { background: var(--cor-sucesso-fundo); color: #065F46; border-left-color: var(--cor-sucesso); }
.mensagem.erro { background: var(--cor-erro-fundo); color: var(--cor-erro); border-left-color: var(--cor-erro); }

#toast-container { position: fixed; top: 80px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.toast { padding: 14px 20px; border-radius: 10px; color: white; font-size: 0.9rem; box-shadow: 0 8px 24px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 10px; }
.toast.sucesso { background: #10B981; }
.toast.erro { background: #EF4444; }
.toast.alerta { background: #F59E0B; }

.spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: white; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .vendedor-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .vendedor-acoes { width: 100%; justify-content: flex-end; }
    .campos-info, .campos-producao { grid-template-columns: 1fr; }
}