/* ARQUIVO: assets/css/tema.css */
/* Sistema de temas claro/escuro */

:root {
    /* Cores base do tema claro */
    --cor-primaria: #ff7b00; /* Laranja */
    --cor-secundaria: #1e88e5; /* Azul */
    --cor-fundo: #ffffff; /* Branco */
    --cor-fundo-secundaria: #f5f5f5;
    --cor-texto: #333333;
    --cor-texto-secundaria: #666666;
    --cor-borda: #dddddd;
    --cor-sucesso: #28a745;
    --cor-erro: #dc3545;
    --cor-aviso: #ffc107;
    --cor-info: #17a2b8;
    
    /* Efeitos */
    --sombra-pequena: 0 2px 4px rgba(0, 0, 0, 0.1);
    --sombra-media: 0 4px 8px rgba(0, 0, 0, 0.15);
    --sombra-grande: 0 8px 16px rgba(0, 0, 0, 0.2);
    
    /* Transições */
    --transicao-padrao: all 0.3s ease;
}

/* Tema escuro */
html[data-tema="escuro"] {
    --cor-primaria: #ff9a44; /* Laranja mais claro */
    --cor-secundaria: #64b5f6; /* Azul mais claro */
    --cor-fundo: #121212;
    --cor-fundo-secundaria: #1e1e1e;
    --cor-texto: #f5f5f5;
    --cor-texto-secundaria: #bbbbbb;
    --cor-borda: #444444;
    --cor-sucesso: #48c774;
    --cor-erro: #f14668;
    --cor-aviso: #ffdd57;
    --cor-info: #3e8ed0;
    
    /* Efeitos no tema escuro */
    --sombra-pequena: 0 2px 4px rgba(0, 0, 0, 0.3);
    --sombra-media: 0 4px 8px rgba(0, 0, 0, 0.4);
    --sombra-grande: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* CORREÇÃO: Body só aplica tema se não for página do carrinho */
body:not(.carrinho-page):not(.force-light) {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    transition: var(--transicao-padrao);
}

/* Forçar fundo branco para páginas específicas */
body.carrinho-page,
body.force-light,
body[data-theme="light"] {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Tema escuro só para elementos que não são do carrinho */
html[data-tema="escuro"] body:not(.carrinho-page):not(.force-light) {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
}

/* Alertas */
.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    border-left: 4px solid;
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.1);
    border-color: var(--cor-sucesso);
    color: var(--cor-sucesso);
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: var(--cor-erro);
    color: var(--cor-erro);
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: var(--cor-aviso);
    color: var(--cor-aviso);
}

.alert-info {
    background-color: rgba(23, 162, 184, 0.1);
    border-color: var(--cor-info);
    color: var(--cor-info);
}

/* Botões */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: var(--transicao-padrao);
    border: none;
}

.btn-primario {
    background-color: var(--cor-primaria);
    color: white;
}

.btn-primario:hover {
    background-color: color-mix(in srgb, var(--cor-primaria) 80%, black);
}

.btn-secundario {
    background-color: var(--cor-secundaria);
    color: white;
}

.btn-secundario:hover {
    background-color: color-mix(in srgb, var(--cor-secundaria) 80%, black);
}

.btn-sucesso {
    background-color: var(--cor-sucesso);
    color: white;
}

.btn-sucesso:hover {
    background-color: color-mix(in srgb, var(--cor-sucesso) 80%, black);
}

.btn-perigo {
    background-color: var(--cor-erro);
    color: white;
}

.btn-perigo:hover {
    background-color: color-mix(in srgb, var(--cor-erro) 80%, black);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto);
}

.btn-outline:hover {
    background-color: var(--cor-fundo-secundaria);
}

/* Formulários */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    transition: var(--transicao-padrao);
}

.form-control:focus {
    outline: none;
    border-color: var(--cor-secundaria);
    box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.25);
}

/* Cards */
.card {
    background-color: var(--cor-fundo);
    border-radius: 8px;
    box-shadow: var(--sombra-pequena);
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--cor-borda);
    transition: var(--transicao-padrao);
}

.card:hover {
    box-shadow: var(--sombra-media);
}

.card-header {
    padding: 1rem;
    background-color: var(--cor-fundo-secundaria);
    border-bottom: 1px solid var(--cor-borda);
    font-weight: 600;
}

.card-body {
    padding: 1rem;
}

.card-footer {
    padding: 1rem;
    background-color: var(--cor-fundo-secundaria);
    border-top: 1px solid var(--cor-borda);
}

/* Tabelas */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.table th,
.table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--cor-borda);
    text-align: left;
}

.table th {
    font-weight: 600;
    background-color: var(--cor-fundo-secundaria);
}

.table tbody tr:hover {
    background-color: var(--cor-fundo-secundaria);
}

.table-striped tbody tr:nth-child(odd) {
    background-color: color-mix(in srgb, var(--cor-fundo-secundaria) 50%, transparent);
}