@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --bg-body: #f2f4f8;       /* Cinza bem claro de fundo */
    --bg-card: #ffffff;       /* Branco puro */
    --safra-blue: #0e1621;    /* Azul Marinho Profundo */
    --safra-gold: #cfa76e;    /* Dourado Elegante */
    --text-primary: #333333;  /* Texto principal escuro */
    --text-secondary: #666666;
    --border-light: #e0e0e0;
    --shadow-card: 0 4px 12px rgba(0,0,0,0.05); /* Sombra suave moderna */
}

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.container {
    padding: 20px;
    max-width: 480px;
    margin: 0 auto;
}

/* --- ESTILOS DE LOGIN (Baseado na imagem login.png) --- */
.login-header-bg {
    background-color: var(--safra-blue);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px);
    height: 220px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.login-card {
    background: var(--bg-card);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    margin-top: -40px; /* Efeito de sobreposição */
    position: relative;
    z-index: 10;
}

/* --- INPUTS MODERNOS --- */
.form-group { margin-bottom: 20px; }

.custom-input {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--text-primary);
    background: #fff;
    box-sizing: border-box; /* Garante que padding não estoure */
    outline: none;
    transition: 0.3s;
}
.custom-input:focus { border-color: var(--safra-blue); }

/* --- BOTÕES --- */
.btn-primary {
    background-color: var(--safra-gold); /* Dourado nos botões de ação */
    background: linear-gradient(to right, #d4af37, #cfa76e); /* Gradiente sutil */
    color: #fff;
    border: none;
    width: 100%;
    padding: 16px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px;
}
.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
    display: block; width: 100%; text-align: center;
    background-color: transparent; border: 1px solid var(--safra-blue);
    color: var(--safra-blue);
    padding: 15px 0; border-radius: 8px;
    font-weight: 600; text-decoration: none; margin-top: 15px;
}

/* --- HOME & DASHBOARD (Baseado na imagem image_411906.png) --- */
.home-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 25px; padding-top: 10px;
}
.user-avatar {
    width: 45px; height: 45px;
    background-color: #e0e0e0;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-weight: bold; color: var(--safra-blue);
    font-size: 1.2rem;
}

/* Card de Saldo */
.card-saldo {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--shadow-card);
    margin-bottom: 25px;
    border-top: 4px solid var(--safra-gold); /* Detalhe dourado no topo */
}

/* Grid de Ícones (Acesso Rápido) */
.quick-access-grid {
    display: flex;
    gap: 15px;
    overflow-x: auto; /* Scroll horizontal se tiver muitos */
    padding-bottom: 10px; /* Espaço pro scroll */
    scrollbar-width: none; /* Esconde scrollbar Firefox */
}
.quick-access-grid::-webkit-scrollbar { display: none; } /* Esconde scrollbar Chrome */

.icon-card {
    min-width: 85px;
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none;
}

.icon-box {
    width: 60px; height: 60px;
    background-color: var(--safra-blue); /* Fundo Azul Escuro */
    border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 8px;
    box-shadow: 0 4px 8px rgba(14, 22, 33, 0.2);
}
.icon-box i { color: #fff; font-size: 1.5rem; }
.icon-label { font-size: 0.75rem; color: var(--text-primary); font-weight: 600; text-align: center; }

/* --- LISTAS E OUTROS --- */
.simple-header {
    display: flex; align-items: center; margin-bottom: 20px;
}
.simple-header a { color: var(--safra-blue); font-size: 1.2rem; margin-right: 15px; }
.simple-header h2 { margin: 0; color: var(--safra-blue); font-size: 1.2rem; font-weight: 700; }

/* Ajuste nos Receipts/Comprovantes para fundo branco */
.receipt-detailed {
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
}
.receipt-header-value {
    background-color: #f8f9fa; /* Cinza bem leve */
    border-bottom: 1px dashed #ccc;
}
.receipt-header-value h1 { color: var(--safra-blue); }
.data-label { color: var(--text-secondary); }
.data-value { color: var(--text-primary); }

/* Grid do PIX (Mantendo estrutura, mudando cores) */
.pix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.pix-card {
    background: var(--bg-card);
    border-radius: 8px; padding: 20px 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: var(--shadow-card); text-decoration: none;
    aspect-ratio: 1/1;
}
.pix-card i { color: var(--safra-blue); font-size: 1.8rem; margin-bottom: 10px; }
.pix-card span { color: var(--text-primary); font-size: 0.8rem; font-weight: 500; }
.badge-novo { background-color: var(--safra-blue); color: #fff; }

/* --- Header de Páginas Internas (Pix, Transferir, etc) --- */
.internal-header {
    background-color: var(--bg-card); /* Fundo Branco */
    padding: 15px 20px;
    display: flex;
    align-items: center;
    position: fixed; /* Fixo no topo */
    top: 0; left: 0; width: 100%;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Sombra suave */
    box-sizing: border-box;
}

.internal-header a {
    color: var(--safra-blue);
    font-size: 1.3rem;
    padding: 5px;
    display: flex; align-items: center;
}

.internal-header h2 {
    margin: 0;
    color: var(--safra-blue);
    font-size: 1.1rem;
    font-weight: 600;
    flex-grow: 1; /* Ocupa o espaço central */
    text-align: center;
    margin-right: 25px; /* Compensa o espaço do ícone para centralizar */
}

/* Ajuste do corpo para não ficar embaixo do header fixo */
body.header-fixed-padding {
    padding-top: 70px;
}

/* --- Títulos de Seção Modernos --- */
.section-title-modern {
    color: var(--safra-blue);
    font-size: 1rem;
    font-weight: 700;
    margin: 25px 0 15px 0;
    letter-spacing: 0.5px;
}

/* --- Grid e Cards Pix Modernizados --- */
.pix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.pix-card {
    background: var(--bg-card);
    border-radius: 16px; /* Cantos mais arredondados */
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    aspect-ratio: 1 / 1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra mais difusa e moderna */
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid transparent;
}

.pix-card:hover {
    transform: translateY(-3px); /* Leve elevação no hover */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: rgba(14, 22, 33, 0.1); /* Borda sutil azul ao passar o mouse */
}

/* Círculo de fundo para o ícone */
.pix-icon-circle {
    width: 50px; height: 50px;
    background-color: #f0f4f8; /* Azul/Cinza muito claro */
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 12px;
}

.pix-icon-circle i {
    font-size: 1.5rem;
    color: var(--safra-blue);
}

.pix-card span {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

/* Badge "NOVO" modernizado */
.badge-novo {
    position: absolute;
    top: 10px; right: 10px;
    background: linear-gradient(to right, var(--safra-blue), #1a2b42);
    color: #fff;
    font-size: 0.6rem; font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(14, 22, 33, 0.2);
}

/* --- Estilos da Tela de Envio (Baseado em realizar.png) --- */

/* Labels (Perguntas: Para quem? Qual valor?) */
.label-modern {
    display: block;
    color: var(--text-secondary); /* Cinza escuro */
    font-size: 1rem;
    margin-bottom: 10px;
    margin-top: 25px;
    font-weight: 500;
}
.label-modern:first-of-type { margin-top: 10px; }

/* Box Preto com dados da conta (igual a foto) */
.favorecido-info-box {
    background-color: #1a1a1a; /* Fundo Preto/Cinza bem escuro */
    color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 5px; /* Colado no select */
    display: none; /* Oculto até selecionar */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.favorecido-info-box strong {
    color: #fff;
    font-weight: 600;
}

.favorecido-info-box span {
    color: #ccc; /* Texto secundário mais claro */
}

/* --- Estilos para Tela de Senha --- */
.password-container {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

.password-input {
    width: 100%;
    max-width: 200px;
    border: none;
    border-bottom: 2px solid var(--border-light);
    font-size: 2rem;
    text-align: center;
    letter-spacing: 8px; /* Espaço entre as bolinhas */
    padding: 10px;
    outline: none;
    color: var(--safra-blue);
    transition: 0.3s;
    background: transparent;
    font-family: monospace; /* Para as bolinhas ficarem iguais */
}

.password-input:focus {
    border-color: var(--safra-blue);
}

.password-input.input-error {
    border-color: #b91c1c;
    color: #b91c1c;
}

.password-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* --- Melhorias de UX na Confirmação --- */

/* Card de Dados de Pessoa (Pagador/Favorecido) */
.person-card {
    background-color: #f8f9fa;
    /* Cinza bem suave */
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #eee;
    position: relative;
}

.person-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.person-header i {
    color: var(--safra-blue);
    font-size: 1.1rem;
    background: #e0e7ff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.person-header span {
    color: var(--safra-blue);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Linha de conexão visual (Seta para baixo) */
.transaction-arrow {
    text-align: center;
    color: var(--safra-gold);
    margin: -10px 0 5px 0;
    position: relative;
    z-index: 10;
}

.transaction-arrow i {
    background: #fff;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Dados Internos mais organizados */
.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.info-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

/* Correção da Mensagem de Erro */
.error-message {
    color: #b91c1c;
    font-size: 0.85rem;
    margin-top: 10px;
    display: none;
    /* <--- OBRIGATÓRIO PARA INICIAR OCULTO */
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 500;
    width: 100%;
}

/* --- Correção dos Botões de Ação Final --- */

.btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço igual entre os botões */
    margin-top: 25px;
    width: 100%;
}

/* Padronização geométrica dos botões */
.btn-primary, .btn-secondary, .btn-gold-filled {
    width: 100%;
    height: 55px; /* Altura fixa para ficarem iguais */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-sizing: border-box; /* O SEGREDO: Impede que o botão estoure a tela */
    transition: all 0.2s ease;
}

/* Estilo do Botão "Compartilhar" (Secundário) */
.btn-secondary-outline {
    background-color: transparent;
    border: 1px solid var(--safra-gold);
    color: var(--safra-gold);
}
.btn-secondary-outline:hover {
    background-color: rgba(207, 167, 110, 0.05);
}

/* Estilo do Botão "Realizar Outro Pix" (Primário) */
.btn-gold-filled {
    background: linear-gradient(90deg, #cfa76e 0%, #d4af37 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3); /* Sombra dourada suave */
}
.btn-gold-filled:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

/* Link simples de voltar */
.link-back-simple {
    display: block;
    text-align: center;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 20px;
    padding: 10px;
}
.link-back-simple:hover { color: var(--safra-blue); }

/* --- LISTA DE TRANSFERÊNCIAS (TEMA LIGHT) --- */

.trans-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden; /* Garante que os cantos arredondados funcionem */
}

.trans-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
    background-color: #fff;
    text-decoration: none;
    transition: background 0.2s;
}

.trans-item:last-child {
    border-bottom: none;
}

.trans-item:active {
    background-color: #f8f9fa; /* Efeito de clique sutil */
}

/* Box da Data (Quadrado) */
.trans-date-box {
    background-color: #f0f4f8; /* Cinza azulado bem claro */
    width: 48px; height: 48px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0; /* Não deixa amassar */
}

.trans-day {
    color: var(--safra-blue);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
}

.trans-month {
    color: var(--text-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 2px;
}

/* Informações Centrais */
.trans-info {
    flex-grow: 1;
    overflow: hidden; /* Evita que texto longo quebre o layout */
}

.trans-title {
    color: var(--safra-blue);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 600;
}

.trans-sub {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 4px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Três pontinhos se o nome for longo */
}

/* Valor */
.trans-value {
    font-weight: 700;
    font-size: 0.95rem;
    text-align: right;
    white-space: nowrap;
    margin-left: 10px;
}

.text-danger { color: #b91c1c !important; } /* Vermelho Safra para saídas */

/* --- Estilos da Tela de Análise (Light Theme) --- */

.analyze-icon-box {
    text-align: center;
    padding: 20px 0;
}

.analyze-icon-large {
    font-size: 4rem;
    color: #f59e0b; /* Amarelo/Ouro Alerta */
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 6px rgba(245, 158, 11, 0.3));
    animation: pulse-shield 2s infinite;
}

@keyframes pulse-shield {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.analyze-title {
    color: var(--safra-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.analyze-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 auto 25px auto;
    max-width: 90%;
}

/* Caixa de Aviso Vermelha */
.warning-alert {
    background-color: #fef2f2; /* Vermelho muito claro */
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 25px;
}

.warning-alert i {
    color: #ef4444; /* Vermelho vibrante */
    font-size: 1.2rem;
    margin-top: 2px;
}

.warning-content strong {
    display: block;
    color: #991b1b; /* Vermelho escuro */
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.warning-content p {
    margin: 0;
    color: #b91c1c;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* --- Estilos para Lista de Favorecidos --- */

.fav-avatar {
    width: 48px;
    height: 48px;
    background-color: #f0f4f8;
    /* Azul bem claro */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--safra-blue);
    font-size: 1.2rem;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Ajuste para o botão de excluir ficar alinhado e discreto */
.btn-trash {
    background: none;
    border: none;
    color: #e5e7eb;
    /* Cinza claro inicialmente */
    font-size: 1.1rem;
    cursor: pointer;
    padding: 10px;
    transition: 0.2s;
}

.btn-trash:hover {
    color: #b91c1c;
    /* Vermelho ao passar o mouse */
    background-color: #fef2f2;
    border-radius: 50%;
}

/* --- ESTILOS DA LISTA NA HOME (Últimas Transações) --- */

.trans-home-list {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra suave igual aos outros cards */
    padding: 0 20px;
    margin-top: 15px;
    margin-bottom: 30px;
}

.trans-home-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #e0e0e0;
    text-decoration: none;
    transition: background 0.2s;
}

.trans-home-item:last-child {
    border-bottom: none; /* Remove linha do último item */
}

/* Ícone quadrado à esquerda */
.th-icon {
    width: 45px; height: 45px;
    background-color: #f0f4f8; /* Cinza/Azul bem claro */
    border-radius: 10px;
    display: flex; justify-content: center; align-items: center;
    color: var(--safra-blue);
    font-size: 1.1rem;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Ícone específico para Em Análise (Amarelo) */
.th-icon.icon-analysis {
    background-color: #fffbeb; /* Fundo amarelo claro */
    color: #f59e0b; /* Ícone amarelo ouro */
}

/* Textos da lista */
.trans-home-item span {
    line-height: 1.4;
}

.trans-home-item div:nth-child(2) {
    flex-grow: 1; /* Ocupa o espaço do meio */
}

/* Valor na direita */
.trans-home-amount {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
    white-space: nowrap;
}