/* ?? TEMA ACERTOFISCAL - AMARELO E AZUL */
/* Tema global para todas as páginas do sistema */

/* ============================================
   CORES PRINCIPAIS
   ============================================ */
:root {
    --acerto-azul-escuro: #2C3E50;
    --acerto-azul-medio: #34495E;
    --acerto-amarelo-claro: #FFF9E6;
    --acerto-amarelo: #FDCB6E;
    --acerto-amarelo-forte: #F39C12;
    --acerto-amarelo-escuro: #D68910;
}

/* ============================================
   BACKGROUNDS E CONTAINERS
   ============================================ */
.acerto-page-background {
    min-height: 100vh;
    background: linear-gradient(135deg, #FFF9E6 0%, #FFEAA7 25%, #FDCB6E 50%, #F9B62A 75%, #F39C12 100%);
    position: relative;
    padding: 1rem;
    box-sizing: border-box;
}

.acerto-page-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 20% 30%, rgba(243, 156, 18, 0.1) 0%, transparent 40%),
                      radial-gradient(circle at 80% 70%, rgba(243, 156, 18, 0.08) 0%, transparent 40%);
    background-size: 600px 600px, 400px 400px;
    animation: acerto-float 15s ease-in-out infinite;
    pointer-events: none;
}

@keyframes acerto-float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(-10px, -10px) rotate(1deg);
    }
    66% {
        transform: translate(10px, -5px) rotate(-1deg);
    }
}

.acerto-container {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(243, 156, 18, 0.1);
    border: 1px solid rgba(243, 156, 18, 0.1);
}

/* ============================================
   CARDS E PAPERS
   ============================================ */
.acerto-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(243, 156, 18, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.acerto-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(243, 156, 18, 0.2) !important;
    border-color: rgba(243, 156, 18, 0.3) !important;
}

.acerto-card-header {
    background: linear-gradient(90deg, #F39C12, #FDCB6E) !important;
    color: white !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    padding: 1rem 1.5rem !important;
}

/* ============================================
   BOTÕES
   ============================================ */
.acerto-btn-primary {
    background: linear-gradient(135deg, #2C3E50, #34495E) !important;
    color: white !important;
    border-radius: 12px !important;
    border: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3) !important;
}

.acerto-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(44, 62, 80, 0.4) !important;
    background: linear-gradient(135deg, #34495E, #2C3E50) !important;
    color: white !important;
}

.acerto-btn-primary .mud-icon-root,
.acerto-btn-primary .mud-button-label,
.acerto-btn-primary * {
    color: white !important;
}

.acerto-btn-secondary {
    background: transparent !important;
    color: #2C3E50 !important;
    border: 2px solid #2C3E50 !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease;
}

.acerto-btn-secondary:hover {
    background: rgba(44, 62, 80, 0.08) !important;
    transform: translateY(-1px) !important;
    border-color: #34495E !important;
}

.acerto-btn-accent {
    background: linear-gradient(135deg, #F39C12, #FDCB6E) !important;
    color: white !important;
    border-radius: 12px !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3) !important;
}

.acerto-btn-accent:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4) !important;
    color: white !important;
}

.acerto-btn-accent .mud-icon-root,
.acerto-btn-accent .mud-button-label,
.acerto-btn-accent * {
    color: white !important;
}

/* Botões MudBlazor com background customizado - forçar texto branco */
.mud-button[style*="background: linear-gradient(135deg, #2C3E50"] {
    color: white !important;
}

.mud-button[style*="background: linear-gradient(135deg, #2C3E50"] .mud-icon-root,
.mud-button[style*="background: linear-gradient(135deg, #2C3E50"] .mud-button-label,
.mud-button[style*="background: linear-gradient(135deg, #2C3E50"] * {
    color: white !important;
}

/* Botões com classe acertofiscal específica */
.acertofiscal-button-group .mud-button[style*="background: linear-gradient"] {
    color: white !important;
}

.acertofiscal-button-group .mud-button[style*="background: linear-gradient"] .mud-icon-root,
.acertofiscal-button-group .mud-button[style*="background: linear-gradient"] .mud-button-label,
.acertofiscal-button-group .mud-button[style*="background: linear-gradient"] * {
    color: white !important;
}

/* ============================================
   TABELAS
   ============================================ */
.acerto-table {
    background: white !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.acerto-table .mud-table-head {
    background: linear-gradient(90deg, #F39C12, #FDCB6E) !important;
}

.acerto-table .mud-table-head .mud-th {
    color: white !important;
    font-weight: 600 !important;
}

.acerto-table .mud-table-row:hover {
    background: rgba(243, 156, 18, 0.05) !important;
}

/* ============================================
   ALERTAS E NOTIFICAÇÕES
   ============================================ */
.acerto-alert-info {
    background: rgba(243, 156, 18, 0.1) !important;
    border: 1px solid rgba(243, 156, 18, 0.3) !important;
    border-radius: 12px !important;
    color: #2C3E50 !important;
}

.acerto-alert-success {
    background: rgba(46, 125, 50, 0.1) !important;
    border: 1px solid rgba(46, 125, 50, 0.3) !important;
    border-radius: 12px !important;
}

/* ============================================
   TEXTOS
   ============================================ */
.acerto-text-primary {
    color: #2C3E50 !important;
}

.acerto-text-secondary {
    color: #F39C12 !important;
}

.acerto-text-gradient {
    background: linear-gradient(135deg, #D68910, #F39C12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   BADGES E CHIPS
   ============================================ */
.acerto-chip-primary {
    background: linear-gradient(135deg, #2C3E50, #34495E) !important;
    color: white !important;
}

.acerto-chip-accent {
    background: linear-gradient(135deg, #F39C12, #FDCB6E) !important;
    color: white !important;
}

/* ============================================
   ÍCONES
   ============================================ */
.acerto-icon-primary {
    color: #2C3E50 !important;
}

.acerto-icon-accent {
    color: #F39C12 !important;
}

/* ============================================
   FORMULÁRIOS
   ============================================ */
.acerto-form-field .mud-input-root {
    border-radius: 8px !important;
}

.acerto-form-field .mud-input-root-adorned-start .mud-input-adornment-start {
    color: #F39C12 !important;
}

.acerto-form-field .mud-input-root-outlined .mud-input-slot:focus-within {
    border-color: #F39C12 !important;
}

/* ============================================
   ANIMAÇÕES
   ============================================ */
.acerto-fade-in {
    animation: acerto-fadeIn 0.8s ease-out;
}

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

.acerto-slide-up {
    animation: acerto-slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes acerto-slideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */
@media (max-width: 768px) {
    .acerto-container {
        padding: 1.5rem;
        border-radius: 16px;
    }
    
    .acerto-card {
        border-radius: 12px !important;
    }
}

@media (max-width: 480px) {
    .acerto-page-background {
        padding: 0.5rem;
    }
    
    .acerto-container {
        padding: 1rem;
        border-radius: 12px;
    }
}