/* Redireciona tudo para o novo estilo */
@import url('style-v2.css');


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

:root {
    --primary: #aac7ff;
    --primary-dark: #7fa3ff;
    --secondary: #1E3A8A;
    --success: #10B981;
    --warning: #aac7ff;
    --danger: #EF4444;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1resultado-header h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.resultado-conteudo {
    font-size: 15px;
    line-height: 1.8;
    color: var(--gray-800);
}

.versiculo-texto {
    margin-bottom: 12px;
    text-align: justify;
}

.loading {
    color: var(--gray-500);
    font-style: italic;
}

/* Sidebar - item ativo com azul suave #E0EAFF */
.sidebar .nav-item.active {
    background-color: #E0EAFF !important;
    color: #374151 !important; /* grafite neutro */
}

/* Ícones dentro do item ativo também ficam grafite */
.sidebar .nav-item.active svg {
    stroke: #374151 !important;
}


.livros-biblia {
    background: white;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.livros-biblia h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 24px;
}

.categoria-livros {
    margin-bottom: 24px;
}

.categoria-titulo {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.livros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.livro-btn {
    padding: 10px 14px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: block;
    text-align: center;
}

.livro-btn:hover {
    background: #E0EAFF;
    border-color: var(--primary);
    color: #2563EB;
}

.dicas-biblia {
    background: #DBEAFE;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #3B82F6;
}

.dicas-biblia h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1E40AF;
    margin-bottom: 12px;
}

.dicas-biblia ul {
    list-style: none;
    padding: 0;
}

.dicas-biblia li {
    padding: 8px 0;
    color: #1E40AF;
    line-height: 1.6;
}

.dicas-biblia li strong {
    color: #1E3A8A;
}

.sugestoes-versiculos {
    background: white;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.sugestoes-versiculos h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 20px;
}

.versiculos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.versiculo-card {
    padding: 16px;
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: block;
}

.versiculo-card:hover {
    background: #E0EAFF;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.versiculo-card strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #2563EB;
    margin-bottom: 4px;
}

.versiculo-card p {
    font-size: 12px;
    color: var(--gray-600);
    margin: 0;
}

/* =========================================
   FOOTER
   ========================================= */
.app-footer {
    margin-left: 260px;
    padding: 24px 40px;
    background: white;
    border-top: 1px solid var(--gray-200);
    text-align: center;
}

.footer-content p {
    margin: 0;
    color: var(--gray-600);
    font-size: 13px;
}

.footer-tagline {
    margin-top: 4px;
    font-style: italic;
    font-size: 12px;
    color: var(--gray-500);
}

/* =========================================
   RESPONSIVIDADE
   ========================================= */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .main-content {
        margin-left: 0;
        padding: 20px;
    }
    
    .app-footer {
        margin-left: 0;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .progress-bar {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .step-label {
        font-size: 10px;
    }
    
    .filtros-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filtros-tabs {
        flex-wrap: wrap;
    }
    
    .busca-form {
        width: 100%;
    }
    
    .busca-input {
        width: 100%;
        min-width: auto;
    }
    
    .table-responsive {
        overflow-x: auto;
    }
    
    .livros-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    .versiculos-grid {
        grid-template-columns: 1fr;
    }
}6;
    color: var(--gray-900);
    background: var(--gray-50);
}

/* =========================================
   PÁGINA DE LOGIN
   ========================================= */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
}

.login-container {
    width: 100%;
    max-width: 450px;
    padding: 20px;
}

.login-box {
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.logo-grande svg {
    margin-bottom: 15px;
}

.login-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.tagline {
    font-size: 13px;
    color: var(--gray-500);
    font-style: italic;
}

.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--gray-200);
}

.tab-btn {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}

.tab-btn.active {
    color: #aac7ff;
    border-bottom-color: #aac7ff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* =========================================
   SIDEBAR
   ========================================= */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
    height: 100vh;
    background: white;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.sidebar-header {
    padding: 24px 20px;
    border-bottom: 1px solid var(--gray-200);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.logo h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
}

.user-name {
    font-size: 13px;
    color: var(--gray-600);
}

.sidebar-nav {
    flex: 1;
    padding: 20px 12px;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 4px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--gray-700);
    font-weight: 500;
    transition: all 0.2s;
}

.nav-item:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}

.nav-item.active {
    background: #E0EAFF;
    color: #7fa3ff;
}

.nav-item svg {
    flex-shrink: 0;
}

.nav-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 12px 0;
}

.nav-logout {
    color: var(--danger);
}

.nav-logout:hover {
    background: #FEE2E2;
}

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--gray-200);
}

.sidebar-footer .tagline {
    font-size: 11px;
    line-height: 1.4;
}

/* =========================================
   CONTEÚDO PRINCIPAL
   ========================================= */
.main-content {
    margin-left: 260px;
    min-height: 100vh;
    padding: 40px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.page-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
}

.subtitle {
    font-size: 16px;
    color: var(--gray-600);
    margin-top: 5px;
}

.breadcrumb {
    display: inline-block;
    color: var(--gray-600);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 10px;
}

.breadcrumb:hover {
    color: var(--primary);
}

.page-actions {
    display: flex;
    gap: 12px;
}

/* =========================================
   FORMULÁRIOS
   ========================================= */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: all 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(170, 199, 255, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--gray-500);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    justify-content: flex-end;
}

/* =========================================
   BOTÕES
   ========================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background: #aac7ff;
    color: white;
}

.btn-primary:hover {
    background: #7fa3ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-300);
}

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

.btn-success:hover {
    background: #059669;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-large {
    padding: 14px 24px;
    font-size: 15px;
}

.btn-icon {
    padding: 8px;
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    border-radius: 6px;
}

.btn-icon:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

/* =========================================
   CARDS E STATS
   ========================================= */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Link interno do card de stats */
.stat-card-link {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}

.stat-card-link:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* o hover precisa do card como "caixa" */
.stat-card-link:hover .stat-card {
    box-shadow: 0 4px 6px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}


.stat-card {
    background: white;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}


.stat-card:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}


.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon-primary {
    background: #E0EAFF;
    color: var(--primary);
}

.stat-icon-success {
    background: #D1FAE5;
    color: var(--success);
}

.stat-icon-warning {
    background: #E0EAFF;
    color: var(--warning);
}

.stat-content h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
}

.stat-content p {
    font-size: 13px;
    color: var(--gray-600);
}

.section {
    margin-bottom: 40px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
}

.mensagens-lista {
    display: grid;
    gap: 16px;
}

.mensagem-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    transition: all 0.2s;
}

.mensagem-card:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.mensagem-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 12px;
}

.mensagem-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
}

.mensagem-texto {
    color: var(--gray-600);
    font-size: 13px;
    margin-bottom: 12px;
}

.mensagem-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
}

.mensagem-data {
    font-size: 12px;
    color: var(--gray-500);
}

.mensagem-acoes {
    display: flex;
    gap: 8px;
}

.tip-card {
    background: #FEF3C7;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid var(--warning);
    display: flex;
    gap: 16px;
}

.tip-icon {
    font-size: 24px;
}

.tip-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.tip-content p {
    font-size: 14px;
    color: var(--gray-700);
}

/* =========================================
   MENSAGENS E ALERTAS
   ========================================= */
.alert {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-success {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #10B981;
}

.alert-error {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #EF4444;
}

.alert-info {
    background: #DBEAFE;
    color: #1E40AF;
    border: 1px solid #3B82F6;
}

.alert ul {
    margin-left: 20px;
    margin-top: 8px;
}

/* =========================================
   WIZARD
   ========================================= */
.wizard-container {
    max-width: 900px;
}

.wizard-progress {
    background: white;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    border: 1px solid var(--gray-200);
}

.progress-bar {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gray-200);
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--gray-400);
    transition: all 0.3s;
}

.progress-step.active .step-number {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.progress-step.completed .step-number {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.step-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    text-align: center;
}

.progress-step.active .step-label {
    color: var(--primary);
}

.wizard-step {
    background: white;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.step-header {
    margin-bottom: 30px;
}

.step-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.step-header p {
    color: var(--gray-600);
}

.wizard-form {
    width: 100%;
}

.pontos-container {
    display: grid;
    gap: 20px;
}

.ponto-card {
    background: var(--gray-50);
    padding: 24px;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
}

.ponto-card h3, .ponto-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 15px;
}

.conclusao-container {
    text-align: center;
}

.acoes-finais {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 30px 0;
}

.prompt-container {
    margin: 20px 0;
}

.prompt-container textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
}

.info-prompt {
    background: var(--gray-50);
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: left;
}

.info-prompt h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.info-prompt p {
    color: var(--gray-700);
    font-size: 14px;
}

/* =========================================
   TABELAS
   ========================================= */
.filtros-container {
    background: white;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.filtros-tabs {
    display: flex;
    gap: 8px;
}

.filtro-tab {
    padding: 8px 16px;
    background: none;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    text-decoration: none;
    color: var(--gray-700);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.filtro-tab:hover {
    background: var(--gray-50);
}

.filtro-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.busca-form {
    display: flex;
    gap: 8px;
}

.busca-input {
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 14px;
    min-width: 250px;
}

.table-responsive {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    /* deixa a tabela rolar na horizontal se precisar,
       mas NÃO corta o dropdown na vertical */
    overflow-x: auto;
    overflow-y: visible;
}


.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead {
    background: var(--gray-50);
}

.table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 13px;
    border-bottom: 1px solid var(--gray-200);
}

.table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200);
}

.table tbody tr:hover {
    background: var(--gray-50);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success {
    background: #D1FAE5;
    color: #065F46;
}

.badge-warning {
    background: #E0EAFF;
    color: #2563EB;
}

.acoes-cell {
    text-align: right;
}

/* =========================================
   DROPDOWN E AÇÕES
   ========================================= */
.acoes-dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    min-width: 180px;
    z-index: 100;
    margin-top: 4px;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--gray-700);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.dropdown-item:hover {
    background: var(--gray-50);
}

.dropdown-item-danger {
    color: var(--danger);
}

.dropdown-item-danger:hover {
    background: #FEE2E2;
}

.dropdown-menu hr {
    margin: 4px 0;
    border: none;
    border-top: 1px solid var(--gray-200);
}

/* =========================================
   VISUALIZAÇÃO DE MENSAGEM
   ========================================= */
.mensagem-visualizacao {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.mensagem-cabecalho {
    padding: 24px;
    border-bottom: 1px solid var(--gray-200);
}

.info-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-600);
}

.secao-mensagem {
    padding: 30px;
    border-bottom: 1px solid var(--gray-200);
}

.secao-mensagem:last-child {
    border-bottom: none;
}

.secao-titulo {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 16px;
}

.secao-destaque {
    background: #F0F5FF;
}

.ideia-central {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.5;
}

.texto-base {
    font-size: 16px;
    margin-bottom: 12px;
}

.texto-biblico {
    background: var(--gray-50);
    padding: 16px;
    border-left: 3px solid var(--primary);
    font-style: italic;
    color: var(--gray-700);
}

.subsecao {
    margin-bottom: 15px;
}

.subsecao h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.ponto-visualizacao {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.ponto-numero {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.ponto-conteudo {
    flex: 1;
}

.ponto-conteudo h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.desenvolvimento {
    margin-top: 12px;
    padding: 12px;
    background: var(--gray-50);
    border-left: 3px solid var(--gray-300);
    font-size: 13px;
}

/* =========================================
   EDIÇÃO DE MENSAGEM
   ========================================= */
.form-edicao {
    background: white;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.secao-form {
    padding: 24px 0;
    border-bottom: 1px solid var(--gray-200);
}

.secao-form:last-child {
    border-bottom: none;
}

.secao-form h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 20px;
}

.secao-form h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 12px;
}

/* =========================================
   ESTADOS VAZIOS
   ========================================= */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state svg {
    color: var(--gray-300);
    margin-bottom: 16px;
}

.empty-state h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--gray-600);
    margin-bottom: 20px;
}

/* =========================================
   PÁGINA DA BÍBLIA
   ========================================= */
.biblia-iframe-container {
    margin: 20px 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.instrucoes-uso {
    margin-top: 20px;
    padding: 20px;
    background: #E0EAFF;
    border-radius: 8px;
    border-left: 4px solid #aac7ff;
}

.instrucoes-uso h4 {
    font-size: 16px;
    font-weight: 700;
    color: #2563EB;
    margin-bottom: 12px;
}

.instrucoes-uso ol {
    margin-left: 20px;
    color: #1E40AF;
    line-height: 1.8;
}

.instrucoes-uso li {
    margin-bottom: 8px;
}

.livros-biblia .subtitle {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 16px;
}

.biblia-container {
    display: grid;
    gap: 30px;
}

.busca-biblica {
    background: white;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.busca-biblica h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.form-busca-biblia .form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.form-busca-biblia .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-busca-biblia .btn {
    flex-shrink: 0;
    padding: 10px 20px;
    white-space: nowrap;
}

.input-busca {
    font-size: 16px;
    padding: 12px 16px;
}

.resultado-busca {
    margin-top: 24px;
    padding: 20px;
    background: var(--gray-50);
    border-radius: 8px;
    border-left: 4px solid var(--primary);
}

.resultado-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}


/* =========================================
   MENU MOBILE - BOTÃO E OVERLAY
   ========================================= */

/* Botão de menu (hambúrguer) */
.menu-toggle {
    border: none;
    background: transparent;
    padding: 4px;
    margin-right: 8px;
    cursor: pointer;
    display: none; /* só aparece no mobile */
}

.menu-toggle svg {
    display: block;
}

/* Fundo escuro atrás do menu (overlay) */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 900;
}

.sidebar-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* Ajustes só para telas pequenas */
@media (max-width: 768px) {
    /* Mostra o botão hambúrguer no mobile */
    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Quando o JS adiciona .open, a sidebar volta pra tela */
    .sidebar.open {
        transform: translateX(0);
    }
}
/* ===== TOOLBAR (B / I / U / LISTAS / COR) ===== */

.toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 4px 0;
}

.toolbar button {
    border: 1px solid #ccc;
    background: #f7f7f7;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
    transition: 0.2s;
}

.toolbar button:hover {
    background: #e6e6e6;
}

.toolbar input[type="color"] {
    border: none;
    width: 28px;
    height: 28px;
    padding: 0;
    cursor: pointer;
}

/* ===== EDITOR (div contenteditable) ===== */

.editor {
    border: 1px solid #ccc;
    border-radius: 6px;
    min-height: 140px;
    padding: 10px;
    background: #fff;
    outline: none;
    resize: vertical;

    /* 👉 adiciona estas duas linhas aqui */
    padding-left: 20px;
    list-style-position: inside;
}


.editor:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

/* ===== DROPDOWN DO HAMBÚRGUER ===== */

.menu-wrapper {
    position: relative;
    display: inline-block;
}

.menu-dropdown {
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    min-width: 170px;
    padding: 8px 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    z-index: 999;
}

.menu-dropdown.show {
    display: block;
}

.menu-dropdown a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

.menu-dropdown a:hover {
    background: #f2f2f2;
}

/* Correção para o menu no iPhone */
.menu-toggle svg {
    stroke: #000 !important;
    color: #000 !important;
}

.menu-toggle {
    -webkit-tap-highlight-color: transparent;
}

/* =============================== */
/*   AJUSTE FINO PALETA EMAÚS      */
/*   Café nos botões + cards suaves */
/* =============================== */

:root {
    /* Fundo geral continua amarelo suave */
    --bg-body: #FFF4DD; /* levemente mais claro que o anterior */

    /* Cards: branco mais “cremoso” em vez de branco puro */
    --bg-card: #FFF8EE;          /* cards padrão */
    --bg-card-strong: #FFFDF8;   /* se precisar de card mais forte */

    /* Header / faixas superiores mais suaves que o branco puro */
    --bg-header: #FFECCB;

    /* Primária agora em tom de café */
    --primary: #8B5E3C;        /* marrom café */
    --primary-dark: #623D26;   /* café mais forte */
    --primary-light: #E2C0A3;  /* marrom clarinho para botões suaves / hovers */

    /* Secundária segue quente, mas menos laranjona */
    --secondary: #C2783B;

    /* Avisos */
    --warning: #F4C97D;
    --success: #10B981;
    --danger: #EF4444;

    /* Grays continuam iguais – estrutura do layout */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
}

/* Fundo geral da aplicação */
body {
    background-color: var(--bg-body);
    color: var(--gray-900);
}

/* Header / topo das páginas (ajusta pro que você tiver aí) */
.app-header,
.page-header,
.dashboard-header {
    background-color: var(--bg-header);
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}

/* Cards e blocos principais */
.card,
.app-card,
.secao-form,
.form-edicao,
.dashboard-card,
.mensagem-card {
    background-color: var(--bg-card);
    backdrop-filter: blur(4px);
}

/* Botão principal – marrom café */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary-dark);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

/* Botão secundário – tom café mais clarinho */
.btn-secondary {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--gray-900);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--primary);
    border-color: var(--primary-dark);
    color: #fff;
}

/* Botão de status tipo "Completa", "Rascunho" (se você usar classes assim) */
.badge,
.status-badge {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
}

/* Exemplo de status rascunho puxando levemente pro café */
.status-rascunho {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

/* MENU LATERAL MAIS SUAVE */
.app-sidebar,
.sidebar {
    background-color: #FFF0D0; /* amarelo/bege suave */
    border-right: 1px solid rgba(0, 0, 0, 0.03);
}

/* Item ativo do menu */
.app-sidebar .nav-link.active,
.sidebar .nav-link.active,
.sidebar .menu-item.active {
    background-color: #FFF8EE;
    color: var(--gray-900);
}

/* =============================== */
/*   EMAÚS – Tema Creme + Laranja  */
/* =============================== */

/* 1) NOVA PALETA */
:root {
    /* Fundo muito suave (quase branco com toque creme) */
    --bg-body: #FFF8F0;

    /* Cards clarinhos e harmonizados */
    --bg-card: #FFFCF8;
    --bg-card-strong: #FFFFFF;

    /* Header / barra superior */
    --bg-header: #FFF3E3;

    /* Botões laranja queimado */
    --primary: #F29A4A;       /* laranja queimado */
    --primary-dark: #C7742E;  /* escuro */
    --primary-light: #FFD7B3; /* suave */

    /* Cinzas intactos (estrutura do layout) */
}

/* 2) Fundo geral */
body {
    background-color: var(--bg-body);
    color: var(--gray-900);
}

/* 3) Sidebar */
.app-sidebar,
.sidebar {
    background-color: #FFF2E0;
    border-right: 1px solid rgba(0, 0, 0, 0.04);
}

.app-sidebar .nav-link.active {
    background-color: #FFF8F3;
}

/* 4) Header */
.app-header,
.page-header,
.dashboard-header {
    background-color: var(--bg-header);
}

/* 5) Cards do dashboard */
.card,
.app-card,
.dashboard .card,
.dashboard-cards .card,
.mensagem-card,
.secao-form,
.form-edicao {
    background-color: var(--bg-card);
    backdrop-filter: blur(4px);
}

/* 6) Botões – Laranja queimado */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary-dark);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Botão secundário suave */
.btn-secondary {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--gray-900);
}

.btn-secondary:hover {
    background-color: var(--primary);
    border-color: var(--primary-dark);
    color: #fff;
}

/* 7) Remover azul da seleção */
::selection {
    background-color: rgba(242, 154, 74, 0.3); /* laranja translúcido */
    color: var(--gray-900);
}

/* 8) Remover azul do foco */
button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
input:focus,
textarea:focus,
.select:focus {
    outline: 2px solid #F29A4A !important; /* laranja queimado */
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Remover fundo azul do item ativo da sidebar */
.app-sidebar .nav-item.active,
.sidebar .nav-item.active,
.nav-item.active {
    background-color: #FFF8F3 !important;   /* cor suave, igual ao restante */
    color: var(--gray-900) !important;
    border-radius: 10px;
    box-shadow: none !important;
}

/* Se o SVG estiver ficando azul, corrige também */
.nav-item.active svg {
    stroke: var(--primary-dark) !important; /* laranja queimado suave */
}

/* Texto do item ativo */
.nav-item.active span {
    color: var(--gray-900) !important;
}

/* =============================== */
/*     ESTILO DA TELA DE LOGIN     */
/* =============================== */

/* Fundo geral do login */
.login-page,
body.login {
    background: linear-gradient(160deg, #FFF8F0 0%, #FFEEDC 100%) !important;
}

/* Card de login */
.login-card,
.auth-card,
.form-box {
    background-color: #FFFCF8 !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
}

/* Inputs */
.login-card input,
.form-box input {
    background-color: #FFF9F3 !important;
    border: 1px solid #F2D7BD !important;
    color: var(--gray-900) !important;
}

.login-card input:focus,
.form-box input:focus {
    border-color: #F29A4A !important; /* laranja queimado */
    box-shadow: 0 0 0 2px rgba(242, 154, 74, 0.25) !important;
}

/* Botões */
.login-card button,
.form-box button,
.btn-login {
    background-color: #F29A4A !important;
    border-color: #C7742E !important;
    color: #fff !important;
    border-radius: 8px !important;
}

.login-card button:hover,
.form-box button:hover,
.btn-login:hover {
    background-color: #C7742E !important;
    border-color: #C7742E !important;
}

/* Aba "Entrar / Cadastrar" */
.login-tabs a,
.auth-tabs a {
    color: var(--gray-700) !important;
}

.login-tabs a.active,
.auth-tabs a.active {
    color: #C7742E !important;
    border-bottom: 2px solid #F29A4A !important;
}

/* Links */
.login-card a,
.form-box a {
    color: #C7742E !important;
}

.login-card a:hover,
.form-box a:hover {
    color: #A45A1E !important;
}

/* Remover o AZUL da seleção */
.login-card ::selection,
.form-box ::selection {
    background-color: rgba(242, 154, 74, 0.3);
    color: var(--gray-900);
}

/* Eliminar azul do foco (chrome outline) */
.login-card input:focus-visible,
.form-box input:focus-visible,
.login-card button:focus-visible,
.form-box button:focus-visible {
    outline: none !important;
}

/* ===========================================
   TEMA NEUTRO – CINZA + GRAFITE + LARANJA SUAVE
   =========================================== */

:root {
    /* Fundos */
    --bg-main: #F4F4F5;      /* fundo geral cinza claro */
    --bg-sidebar: #E5E5E7;   /* sidebar um pouco mais escura */
    --bg-card: #FFFFFF;      /* cards brancos */
    --bg-section: #F9FAFB;   /* seções / cabeçalhos de bloco */

    /* Escala de grafite (substitui os grays “principais”) */
    --gray-50:  #F9FAFB;
    --gray-100: #F4F4F5;
    --gray-200: #E5E7EB;
    --gray-300: #D4D4D8;
    --gray-400: #A1A1AA;
    --gray-500: #71717A;
    --gray-600: #52525B;   /* grafite médio */
    --gray-700: #3F3F46;   /* grafite */
    --gray-800: #27272F;   /* grafite escuro */
    --gray-900: #18181B;   /* quase preto */

    /* Texto */
    --text-main: #18181B;      /* grafite quase preto */
    --text-secondary: #52525B; /* cinza/grafite médio */

    /* Bordas */
    --border-light: #E4E4E7;

    /* Laranja suave para ações */
    --accent: #E89A52;        /* laranja suave */
    --accent-hover: #D7823D;  /* laranja suave mais escuro */
    --accent-soft: #F9D6B0;   /* laranja bem clarinho */

    /* Status */
    --success: #22C55E;
    --warning: #EAB308;
    --danger: #EF4444;
}

/* ===== Aplicação global ===== */

body {
    background: var(--bg-main) !important;
    color: var(--text-main) !important;
}

/* Sidebar */

.sidebar {
    background: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.sidebar .nav-item {
    color: var(--text-secondary);
}

.sidebar .nav-item.active {
    background: var(--accent-soft) !important;
    color: var(--text-main) !important;
}

/* Cards e cabeçalhos */

.card,
.table,
.table-responsive,
.page-header,
.secao-form,
.form-edicao {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
}

/* Títulos */

.page-header h1,
h1, h2, h3, h4 {
    color: var(--text-main) !important;
}

/* ===== Botões – laranja suave ===== */

.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: #FFFFFF !important;
}

.btn-secondary {
    background: var(--accent-soft) !important;
    border-color: var(--accent-soft) !important;
    color: var(--text-main) !important;
}

/* Badges / status */

.badge-success {
    background: var(--success) !important;
}

.badge-warning {
    background: var(--warning) !important;
}

.badge-danger {
    background: var(--danger) !important;
}


/* ===========================================
   BOTÕES LARANJA SUAVE — PREMIUM
   =========================================== */

/* Botão principal */
.btn-primary {
    background: #E89A52 !important;   /* laranja suave */
    border-color: #E89A52 !important;
    color: #fff !important;
}

.btn-primary:hover {
    background: #D7823D !important;   /* laranja suave escurecido */
    border-color: #D7823D !important;
}

/* Botão secundário */
.btn-secondary {
    background: #F3C7A2 !important;   /* tom pêssego */
    border-color: #F3C7A2 !important;
    color: #4B3A2F !important;         /* grafite/café escuro */
}

/* ============================
   BOTÕES AZUIS
   ============================ */

/* Primário: azul #2da1eb */
.btn-primary {
    background-color: #2DA1EB !important;
    border-color: #2DA1EB !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #2388C8 !important; /* azul um pouco mais escuro pro hover */
    border-color: #2388C8 !important;
    color: #ffffff !important;
}

/* Secundário: azul bem claro com borda azul */
.btn-secondary {
    background-color: #E5F4FE !important; /* azul clarinho */
    border-color: #2DA1EB !important;
    color: #1F2933 !important; /* grafite escuro pra leitura */
}

/* ============================
   SELEÇÃO EM AZUL NA DASHBOARD
   ============================ */

/* Seleção de texto (arrastar com o mouse) em toda a dashboard */
::selection {
    background-color: #93E7FA;
    color: #111827;
}

/* Hover das linhas de listas/tabelas em tom azul bem suave */
.table tbody tr:hover,
.mensagem-card:hover {
    background-color: #F0FAFF;
}

/* Sidebar - item ativo em azul */
.sidebar .nav-item.active {
    background-color: #2DA1EB !important; /* azul principal */
    color: #ffffff !important;
}

/* Ícone dentro do item ativo */
.sidebar .nav-item.active svg {
    stroke: #ffffff !important;
}

/* Hover dos itens da sidebar */
.sidebar .nav-item:hover {
    background-color: #E5F4FE !important; /* azul clarinho */
    color: #1F2933 !important;
}

.sidebar .nav-item:hover svg {
    stroke: #1F2933 !important;
}

/* Sidebar item ativo com azul pastel */
.sidebar .nav-item.active {
    background-color: #8FEBFF !important;
    color: #000 !important;              /* deixa o texto bem visível */
    border-radius: 8px;                  /* opcional, pra ficar mais premium */
}

/* Ícone dentro do item ativo */
.sidebar .nav-item.active svg {
    stroke: #000 !important;
}

/* === ÍCONES DOS CARDS DA DASHBOARD (Padronizar) === */
.dashboard .card svg,
.card svg {
    stroke: #3A3A3A !important;   /* Linha do ícone */
    color: #3A3A3A !important;    /* Ajuste extra */
}

/* Remove qualquer cor antiga aplicada no ícone */
.dashboard .card svg path,
.card svg path {
    stroke: #3A3A3A !important;
    fill: none !important; /* garante que não vai ficar colorido */
}

/* Ícones dos cards de resumo da Dashboard em grafite */
.main-content .card svg {
    color: #3A3A3A !important;   /* define o currentColor */
    stroke: #3A3A3A !important;  /* reforço extra */
}

/* Garante que paths internos não fiquem coloridos */
.main-content .card svg path,
.main-content .card svg polyline {
    stroke: #3A3A3A !important;
    fill: none !important;
}

/* Versão “bruta” se precisar */
svg[stroke="currentColor"] {
    color: #3A3A3A !important;
    stroke: #3A3A3A !important;
}

/* =============================
   PADRONIZAÇÃO DA TELA DE LOGIN
   ============================= */

/* Fundo geral igual da dashboard */
body.login-page,
body#login,
body[data-page="login"] {
    background: #F5F5F5 !important;
}

/* Caixa do formulário */
.login-card,
.container-login,
.card-login,
.login-box {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
    padding: 40px !important;
}

/* Título */
.login-card h1,
.login-card h2,
.card-login h1 {
    color: #222 !important;
}

/* Inputs */
.login-card input,
.card-login input {
    border: 1px solid #D0D0D0 !important;
    background: #FFFFFF !important;
    color: #333 !important;
}

.login-card input:focus,
.card-login input:focus {
    border-color: #2da1eb !important;
    box-shadow: 0 0 0 2px rgba(45,161,235,0.2) !important;
}

/* Botão azul padrão */
.login-card .btn-primary,
.card-login .btn-primary,
.login-card button[type="submit"] {
    background: #2da1eb !important;
    border-color: #2da1eb !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.login-card .btn-primary:hover,
.card-login .btn-primary:hover {
    background: #188acc !important;
}

/* Tabs Entrar / Cadastrar */
.login-tabs a,
.login-card .tabs a {
    color: #666 !important;
}

.login-tabs a.active,
.login-card .tabs a.active {
    color: #2da1eb !important;
    border-bottom: 2px solid #2da1eb !important;
}

/* Texto inferior */
.login-card .footer-text,
.card-login .footer-text {
    color: #666 !important;
}

/* Botão EXCLUIR em laranja */
.btn-danger,
.btn-excluir {
    background-color: #FF7A00 !important;   /* laranja */
    border-color: #FF7A00 !important;
    color: #ffffff !important;
}

.btn-danger:hover,
.btn-excluir:hover {
    background-color: #E66C00 !important;   /* laranja mais escuro no hover */
    border-color: #E66C00 !important;
}

/* Badge de RASCUNHO em cinza/grafite */
.badge-warning,
.status-rascunho {
    background-color: #E5E7EB !important;  /* cinza claro */
    color: #374151 !important;             /* grafite */
    border-radius: 999px;
    padding: 2px 10px;
    font-weight: 500;
    font-size: 12px;
}



/* Bolinha ativa */
.step.active .step-number {
    background-color: #2DA1EB !important;
    border-color: #2DA1EB !important;
    color: #ffffff !important;
}

/* Bolinha inativa (mantém neutro) */
.step-number {
    background-color: #ffffff !important;
    border: 2px solid #d0d0d0 !important; /* cinza suave */
    color: #666 !important;
}

/* Título da etapa ativa */
.step.active .step-title {
    color: #2DA1EB !important;
    font-weight: 600;
}

/* Linha de progresso ativa (se ela existir) */
.step.active ~ .step-line {
    background-color: #2DA1EB !important;
}

/* Bolinha ativa */
.step.active .step-number {
    background-color: #2DA1EB !important;
    border-color: #2DA1EB !important;
    color: #ffffff !important;
}

/* Texto da etapa ativa */
.step.active .step-label {
    color: #2DA1EB !important;
    font-weight: 600 !important;
}

/* Bolinhas não ativas */
.step-number {
    background-color: #ffffff !important;
    border: 2px solid #d0d0d0 !important; 
    color: #666 !important;
}

/* Texto não ativo */
.step-label {
    color: #666 !important;
}

/* ===========================================
   WIZARD – ETAPA ATIVA EM AZUL
   =========================================== */

/* Estado neutro das bolinhas */
.step-number {
    background-color: #ffffff !important;
    border: 2px solid #d0d0d0 !important;
    color: #666666 !important;
}

/* Estado neutro dos rótulos */
.step-label {
    color: #666666 !important;
}

/* --- Etapa ativa (cobrindo os jeitos mais comuns) --- */

/* Se a classe estiver no pai: <div class="step active"> */
.step.active .step-number,
.steps .step.active .step-number {
    background-color: #2DA1EB !important;
    border-color: #2DA1EB !important;
    color: #ffffff !important;
}

.step.active .step-label,
.steps .step.active .step-label {
    color: #2DA1EB !important;
    font-weight: 600 !important;
}

/* Se a classe estiver direto na bolinha: <div class="step-number active"> */
.step-number.active {
    background-color: #2DA1EB !important;
    border-color: #2DA1EB !important;
    color: #ffffff !important;
}

/* Se a classe estiver direto no label: <div class="step-label active"> */
.step-label.active {
    color: #2DA1EB !important;
    font-weight: 600 !important;
}

/* ===========================================
   CAMPOS FOCADOS – AZUL NO LUGAR DO LARANJA
   =========================================== */

input:focus,
textarea:focus,
select:focus {
    border-color: #2DA1EB !important;
    box-shadow: 0 0 0 2px rgba(45, 161, 235, 0.25) !important;
    outline: none !important;
}

/* Bolinha ATIVA */
.progress-step.active .step-number {
    background-color: #2da1eb !important;
    color: #ffffff !important;
    border-color: #2da1eb !important;
}

/* Texto abaixo (ATIVO) */
.progress-step.active .step-label {
    color: #2da1eb !important;
}

/* Borda do botão */
.btn-primary {
    background-color: #2da1eb !important;
    border: 2px solid #2da1eb !important;
    color: #fff !important;
}

/* Quando clica (focus) */
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
    outline: 3px solid #8FBFF7 !important; /* azul claro */
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Remove o laranja amaldiçoado */
.nav-item.active {
    border: 2px solid transparent !important;
    box-shadow: 0 0 0 3px #E0EAFF !important; /* nosso azul suave */
    background: #E0EAFF !important;
    color: #1a1a1a !important;
}

/* Ícone dentro do item ativo */
.nav-item.active svg {
    stroke: #1a1a1a !important;
}

/* Ajuste final dos botões de filtro da página Minhas Mensagens */
.filtro-tab {
    background: #F0F3FF !important;   /* fundo neutro azul clarinho */
    color: #34495E !important;        /* texto grafite */
    border: 1px solid #D6DBF5 !important;
    padding: 8px 16px;
    border-radius: 8px;
    transition: 0.2s;
}

.filtro-tab:hover {
    background: #E0EAFF !important;   /* hover azul suave */
    color: #2da1eb !important;
}

.filtro-tab.active {
    background: #2da1eb !important;   /* azul primário */
    color: white !important;
    border-color: #2da1eb !important;
}

button.btn.btn-primary[onclick="buscarVersiculo()"] {
    background: #2da1eb !important;
    border-color: #2da1eb !important;
    color: white !important;
}

button.btn.btn-primary[onclick="buscarVersiculo()"]:hover {
    background: #198fdb !important;
}

/* Botão "Buscar" da página Bíblia */
button.btn.btn-primary[onclick="buscarVersiculo()"] {
    width: auto !important;           /* deixa o botão só do tamanho do conteúdo */
    max-width: 220px !important;      /* limite pra não ficar gigante */
    height: 44px !important;          /* altura parecida com os inputs */
    padding: 10px 22px !important;    /* menos “estufado” */
    border-radius: 8px !important;    /* mesmo estilo dos outros */
    display: inline-flex !important;  /* centraliza ícone + texto */
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;              /* espaço entre o emoji e o texto */
    font-size: 15px !important;
}

/* Mantém o estilo azul padrão dos outros botões primários */
button.btn.btn-primary[onclick="buscarVersiculo()"] {
    background-color: #2da1eb !important;
    border-color: #2da1eb !important;
    color: #ffffff !important;
}

button.btn.btn-primary[onclick="buscarVersiculo()"]:hover {
    background-color: #198fdb !important;
}

/* Alinha input + botão Buscar lado a lado */
.busca-rapida-container {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important; /* espaço entre input e botão */
}

/* Em caso de o wrapper interno ser diferente */
.busca-rapida-container .form-group,
.busca-rapida-container input,
.busca-rapida-container button {
    margin: 0 !important;
}

/* Organiza o input + botão lado a lado */
.form-row {
    display: flex;
    align-items: flex-end; /* alinha pela base */
    gap: 12px; /* espaço entre input e botão */
}

/* Deixa o campo com tamanho adequado */
.form-row .form-group {
    flex: 1; /* ocupa todo o espaço possível */
}

/* Ajusta o input para ficar alinhado com o botão */
.input-busca {
    height: 44px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

/* Botão Buscar padronizado */
.form-row .btn.btn-primary {
    height: 44px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px !important;
    font-size: 14px;
}

/* Deixar input + botão na mesma linha */
.form-row {
    display: flex;
    align-items: flex-start;  /* alinha pelo topo do grupo */
    gap: 12px;
}

/* Input ocupa todo o espaço disponível */
.form-row .form-group {
    flex: 1;
}

/* Ajusta o input para ter a mesma altura visual do botão */
.input-busca {
    height: 44px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

/* Botão "Buscar" alinhado pela base do input */
.form-row .btn.btn-primary {
    align-self: flex-end;          /* cola o botão na base do form-group */
    height: 44px !important;       /* mesma altura do input */
    padding: 0 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-row .btn.btn-primary {
    margin-bottom: 20px; /* ajuste fino */
}

/* ESTILO BASE PARA TODOS OS BADGES DE STATUS */
.badge {
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent; /* cada cor vai ajustar o seu */
}

/* BADGE - COMPLETA */
.badge-success {
    background-color: #D1FAE5 !important;   /* verde pastel */
    color: #065F46 !important;              /* verde escuro */
    border-color: #A7F3D0 !important;       /* borda sutil */
}

/* BADGE - RASCUNHO */
.badge-warning,
.badge-secondary,
.badge-rascunho {
    background-color: #E5E7EB !important;   /* cinza claro pastel */
    color: #374151 !important;              /* grafite */
    border-color: #D1D5DB !important;       /* borda cinza suave */
}


/* ============================================
   ESTILO DEFINITIVO DA TELA DE LOGIN - Emaús
   ============================================ */

html.login-page,
body.login-page {
    background-color: #f3f4f6 !important;  /* cinza claro */
    background-image: none !important;     /* remove qualquer gradiente */
    min-height: 100vh !important;          /* cobre a tela inteira */
    height: 100% !important;
    padding: 0;
    margin: 0;
}

/* Container central */
body.login-page .login-container {
    background: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    min-height: 100vh; /* Garantia extra */
}

/* Card do login */
body.login-page .login-box {
    background: #ffffff !important;
    border-radius: 20px;
    padding: 30px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

/* Logo centralizada */
body.login-page .logo-grande {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

/* Inputs */
body.login-page input {
    background: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
}

/* Botão azul padrão Emaús */
body.login-page button[type="submit"],
body.login-page .btn-primary {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 10px;
    font-size: 15px;
    transition: background 0.2s ease;
}

body.login-page button[type="submit"]:hover,
body.login-page .btn-primary:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* Abas do login/cadastro */
body.login-page .tabs button {
    background: none;
    border: none;
    padding: 8px 18px;
    font-size: 15px;
    color: #64748b;
}

body.login-page .tabs .active {
    color: #2563eb;
    border-bottom: 2px solid #2563eb;
}

/* ===================================
   TEMA DEFINITIVO DA TELA DE LOGIN
   =================================== */

html.login-page,
body.login-page {
    background-color: #f3f4f6 !important;  /* cinza claro do dashboard */
    background-image: none !important;     /* mata qualquer gradiente antigo */
    min-height: 100vh !important;
}

/* Caixa branca do login */
body.login-page .login-container {
    background: transparent !important;
}

body.login-page .login-box {
    background: #ffffff !important;
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

/* Inputs */
body.login-page input {
    background: #f9fafb !important;
    border: 1px solid #d1d5db !important;
}

/* Botão azul EMAÚS */
body.login-page .btn-primary,
body.login-page button[type="submit"] {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

body.login-page .btn-primary:hover,
body.login-page button[type="submit"]:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* TAMANHO FIXO DA LOGO DO LOGIN */
.login-page .logo-grande img {
    width: 80px !important;   /* tamanho ideal */
    height: auto !important;  /* mantém proporção */
    display: block;
    margin: 0 auto;
}

/* Remover fundo branco da página Início */
.page-header {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Limpa o topo da página Início borda fina */
.page-header {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Remove linha/efeito de overscroll do Android */
html, body {
    overscroll-behavior-y: contain !important;
    overscroll-behavior-x: none !important;
}