/* log-version: css/global.css v20251111-003 */
/**
 * Global CSS - Sistema de Gestão Monetária
 * Estilos base aplicáveis a todo o projeto
 * @version v20251111-003
 */

/* ========================================
   VARIÁVEIS CSS - TEMA DO SISTEMA
   ======================================== */
:root {
    /* ===== PALETA DE CORES PRINCIPAL ===== */
    /* Pretos */
    --preto-puro: #000000;
    --preto-principal: #1a1a1a;
    --preto-fosco: #2d2d2d;
    --preto-claro: #3a3a3a;
    --cinza-escuro: #4a4a4a;
    --cinza-medio: #6c6c6c;
    --cinza-claro: #9e9e9e;
    
    /* Dourado Metalizado */
    --dourado-escuro: #6B5416;
    --dourado-medio: #997404;
    --dourado-principal: #D4A827;
    --dourado-claro: #F4D03F;
    --dourado-brilhante: #FFE55C;
    --dourado-muito-claro: #FFF8DC;
    
    /* Prata */
    --prata-escuro: #71706E;
    --prata-principal: #C0C0C0;
    --prata-claro: #D3D3D3;
    --prata-brilhante: #E8E8E8;
    
    /* Azul (Botão principal) */
    --azul-escuro: #1e5a8e;
    --azul-principal: #2e86de;
    --azul-claro: #3498db;
    --azul-hover: #2574c7;
    
    /* Cores de Status (mantém padrão web) */
    --cor-sucesso: #28a745;
    --cor-erro: #dc3545;
    --cor-aviso: #ffc107;
    --cor-info: #17a2b8;
    
    /* ===== MAPEAMENTO SEMÂNTICO ===== */
    /* Cores principais do tema */
    --cor-principal: var(--preto-principal);
    --cor-destaque: var(--dourado-principal);
    --cor-secundaria: var(--prata-principal);
    
    /* Backgrounds */
    --bg-principal: var(--preto-puro);
    --bg-secundario: var(--preto-fosco);
    --bg-terciario: var(--preto-claro);
    --bg-destaque: var(--dourado-principal);
    --bg-destaque-hover: var(--dourado-escuro);
    --bg-card: var(--preto-fosco);
    --bg-input: var(--preto-claro);
    
    /* Texto */
    --texto-principal: var(--prata-brilhante);
    --texto-secundario: var(--prata-claro);
    --texto-terciario: var(--cinza-claro);
    --texto-destaque: var(--dourado-principal);
    --texto-escuro: var(--preto-principal);
    --texto-claro: #ffffff;
    
    /* Bordas */
    --borda-principal: var(--cinza-escuro);
    --borda-destaque: var(--dourado-principal);
    --borda-secundaria: var(--prata-escuro);
    
    /* ===== TIPOGRAFIA ===== */
    --fonte-principal: 'Segoe UI', Arial, Helvetica, sans-serif;
    --fonte-titulo: 'Segoe UI', Arial, Helvetica, sans-serif;
    --fonte-tamanho-base: 16px;
    --fonte-tamanho-sm: 0.875rem;
    --fonte-tamanho-lg: 1.125rem;
    --fonte-tamanho-xl: 1.5rem;
    
    /* ===== ESPAÇAMENTOS ===== */
    --espacamento-xs: 0.25rem;
    --espacamento-sm: 0.5rem;
    --espacamento-md: 1rem;
    --espacamento-lg: 1.5rem;
    --espacamento-xl: 2rem;
    --espacamento-xxl: 3rem;
    
    /* ===== BORDAS ===== */
    --borda-radius: 0.375rem;
    --borda-radius-sm: 0.25rem;
    --borda-radius-lg: 0.5rem;
    --borda-radius-xl: 1rem;
    --borda-espessura: 1px;
    --borda-espessura-grossa: 2px;
    
    /* ===== SOMBRAS ===== */
    --sombra-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --sombra-md: 0 4px 8px rgba(0, 0, 0, 0.5);
    --sombra-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
    --sombra-xl: 0 12px 24px rgba(0, 0, 0, 0.7);
    --sombra-dourada: 0 4px 12px rgba(212, 175, 55, 0.3);
    --sombra-dourada-forte: 0 6px 16px rgba(212, 175, 55, 0.5);
    
    /* ===== TRANSIÇÕES ===== */
    --transicao-rapida: 0.15s ease;
    --transicao-normal: 0.3s ease;
    --transicao-lenta: 0.5s ease;
    
    /* ===== GRADIENTES ===== */
    --gradiente-dourado: linear-gradient(135deg, 
        var(--dourado-escuro) 0%, 
        var(--dourado-medio) 20%,
        var(--dourado-principal) 40%, 
        var(--dourado-brilhante) 60%,
        var(--dourado-claro) 80%,
        var(--dourado-brilhante) 100%);
    --gradiente-dourado-metalico: linear-gradient(135deg, 
        #6B5416 0%, 
        #997404 15%,
        #D4A827 30%, 
        #F4D03F 45%,
        #FFE55C 55%,
        #D4A827 70%,
        #997404 85%,
        #6B5416 100%);
    --gradiente-prata: linear-gradient(135deg, var(--prata-escuro) 0%, var(--prata-principal) 50%, var(--prata-claro) 100%);
    --gradiente-preto: linear-gradient(135deg, var(--preto-puro) 0%, var(--preto-fosco) 100%);
}

/* ========================================
   RESET E NORMALIZE
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--fonte-tamanho-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--fonte-principal);
    color: var(--texto-principal);
    background: var(--gradiente-preto);
    background-attachment: fixed;
    line-height: 1.6;
    min-height: 100vh;
}

/* ========================================
   TIPOGRAFIA
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--espacamento-md);
    font-weight: 600;
    line-height: 1.2;
}

p {
    margin-bottom: var(--espacamento-md);
}

a {
    color: var(--cor-destaque);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--cor-principal);
    text-decoration: underline;
}

/* ========================================
   CLASSES UTILITÁRIAS
   ======================================== */

/* Cores de fundo */
.bg-corprincipal { background-color: var(--bg-principal); }
.bg-cordestaque { background: var(--gradiente-dourado); }
.bg-secundario { background-color: var(--bg-secundario); }
.bg-card { background-color: var(--bg-card); }
.bg-warning { background-color: var(--cor-aviso); }
.bg-danger { background-color: var(--cor-erro); }
.bg-success { background-color: var(--cor-sucesso); }

/* Cores de texto */
.text-white { color: var(--texto-claro); }
.text-dourado { color: var(--dourado-principal); }
.text-prata { color: var(--prata-principal); }
.text-danger { color: var(--cor-erro); }
.text-warning { color: var(--cor-aviso); }
.text-success { color: var(--cor-sucesso); }
.text-dark { color: var(--texto-escuro); }

/* Fonte */
.fonte_arial { font-family: Arial, Helvetica, sans-serif; }

/* Texto */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Margens */
.mt-1 { margin-top: var(--espacamento-xs); }
.mt-2 { margin-top: var(--espacamento-sm); }
.mt-3 { margin-top: var(--espacamento-md); }
.mt-4 { margin-top: var(--espacamento-lg); }
.mb-1 { margin-bottom: var(--espacamento-xs); }
.mb-2 { margin-bottom: var(--espacamento-sm); }
.mb-3 { margin-bottom: var(--espacamento-md); }
.mb-4 { margin-bottom: var(--espacamento-lg); }
.my-2 { margin-top: var(--espacamento-sm); margin-bottom: var(--espacamento-sm); }
.my-4 { margin-top: var(--espacamento-lg); margin-bottom: var(--espacamento-lg); }

/* Padding */
.pt-1 { padding-top: var(--espacamento-xs); }
.pt-2 { padding-top: var(--espacamento-sm); }
.pb-1 { padding-bottom: var(--espacamento-xs); }
.pb-2 { padding-bottom: var(--espacamento-sm); }

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* Flex */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }

/* ========================================
   FORMULÁRIOS
   ======================================== */
.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--texto-principal);
    background-color: var(--bg-input);
    border: var(--borda-espessura) solid var(--borda-principal);
    border-radius: var(--borda-radius);
    transition: var(--transicao-normal);
}

.form-control:focus {
    color: var(--texto-claro);
    background-color: var(--bg-terciario);
    border-color: var(--borda-destaque);
    outline: 0;
    box-shadow: var(--sombra-dourada);
}

.form-control::placeholder {
    color: var(--texto-secundario);
    opacity: 1;
}

.form-label {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* ========================================
   BOTÕES
   ======================================== */
.btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: var(--borda-espessura) solid transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--borda-radius);
    transition: var(--transicao-normal);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-lg);
}

.btn:focus {
    outline: 0;
    box-shadow: var(--sombra-dourada-forte);
}

.btn-warning {
    color: var(--texto-escuro);
    background: var(--gradiente-dourado);
    border-color: var(--dourado-principal);
    box-shadow: var(--sombra-dourada);
}

.btn-warning:hover {
    background: var(--dourado-escuro);
    border-color: var(--dourado-escuro);
    box-shadow: var(--sombra-dourada-forte);
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
}

.btn-link {
    color: var(--cor-destaque);
    background-color: transparent;
    border: none;
    text-decoration: none;
}

.btn-link:hover {
    color: var(--cor-principal);
    text-decoration: underline;
}

/* ========================================
   CONTAINERS E GRID
   ======================================== */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}

@media (min-width: 768px) {
    .container { max-width: 720px; }
}

@media (min-width: 992px) {
    .container { max-width: 960px; }
}

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col, .col-12, .col-10, .col-2 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }

/* ========================================
   UTILITÁRIOS RESPONSIVOS
   ======================================== */
@media (max-width: 576px) {
    .col-12 { flex: 0 0 100%; max-width: 100%; }
    .col-10, .col-2 { flex: 0 0 100%; max-width: 100%; }
}

/* ========================================
   ANIMAÇÕES E TRANSIÇÕES
   ======================================== */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-up {
    animation: slideUp 0.3s ease-out;
}

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

/* ========================================
   LOADING / SPINNER
   ======================================== */
.spinner {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--cor-destaque);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

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

/* ========================================
   MENSAGENS E ALERTAS
   ======================================== */
.alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--borda-radius);
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

/* ========================================
   ACESSIBILIDADE
   ======================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   IMPRESSÃO
   ======================================== */
@media print {
    .no-print {
        display: none !important;
    }
}