:root {
    --bg-color: #fdfdfd;
    --text-color: #111827;
    --text-secondary: #475569;
    --primary-color: #0f172a;
    --primary-hover: #334155;
    --secondary-color: #6b7280;
    --accent-color: #10b981;
    --card-bg: #ffffff;
    --bg-hover: #f8fafc;
    --border-color: rgba(0, 0, 0, 0.05);
    --highlight-bg: #fef08a;
    --highlight-text: #854d0e;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.02);
    --shadow-md: 0 10px 40px -10px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 60px -15px rgba(0, 0, 0, 0.05);
    --glass-bg: rgba(253, 253, 253, 0.75);
    --glass-border: rgba(0, 0, 0, 0.02);
    --bible-font-size: 1.05rem;
    --bible-line-height: 1.75;
}

:root[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
[data-theme="dark"] {
    --bg-color: #09090b;
    --text-color: #f4f4f5;
    --text-secondary: #cbd5e1;
    --primary-color: #fafafa;
    --primary-hover: #e4e4e7;
    --secondary-color: #a1a1aa;
    --accent-color: #10b981;
    --card-bg: #18181b;
    --bg-hover: #202025;
    --border-color: rgba(255, 255, 255, 0.08);
    --highlight-bg: #713f12;
    --highlight-text: #fef08a;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 40px -10px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 20px 60px -15px rgba(0, 0, 0, 0.8);
    --glass-bg: rgba(9, 9, 11, 0.85);
    --glass-border: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] body,
html[data-theme="dark"] body,
body[data-theme="dark"] {
    background-color: var(--bg-color, #09090b);
    color: var(--text-color, #f4f4f5);
}

body {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    font-size: 1.05rem;
    font-weight: 300;
}

.navbar {
    background-color: var(--glass-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color 0.3s ease;
}

.navbar-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    letter-spacing: -0.5px;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.search-panel {
    background-color: transparent;
    border-radius: 24px;
    padding: 1rem 0;
    margin-bottom: 3.5rem;
    border: none;
    position: relative;
    overflow: hidden;
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.tab {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    background-color: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 500;
    color: var(--secondary-color);
    transition: all 0.3s ease;
}

.tab:hover {
    color: var(--text-color);
    background-color: var(--border-color);
}

.tab.active {
    background-color: var(--text-color);
    color: var(--bg-color);
    box-shadow: var(--shadow-sm);
}

.search-form {
    display: none;
}

.search-form.active {
    display: block;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.form-control {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    font-family: inherit;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--card-bg);
    color: var(--text-color);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

textarea.form-control {
    border-radius: 4px;
}

.form-control:focus {
    outline: none;
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
    background-color: var(--card-bg);
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn {
    display: inline-block;
    padding: 0.9rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    color: var(--bg-color);
    background-color: var(--text-color);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s;
}

.btn:hover {
    background-color: var(--primary-hover);
    transform: scale(1.02);
}

.btn:active {
    transform: scale(0.98);
}

.btn-full {
    width: 100%;
}

.btn-outline,
.btn.btn-outline {
    background-color: transparent !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color, #cbd5e1) !important;
}

.btn-outline:hover,
.btn.btn-outline:hover {
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.05)) !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn.btn-outline {
    background-color: transparent !important;
    color: #f4f4f5 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .btn.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--accent-color, #10b981) !important;
    color: var(--accent-color, #10b981) !important;
}

#results-container {
    margin-top: 2rem;
}

.result-header {
    margin-bottom: 1.5rem;
}

.result-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.result-meta {
    color: var(--secondary-color);
    font-size: 0.95rem;
}

.card {
    background-color: var(--card-bg);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    padding: 2.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.reference {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

.translation-badge {
    background-color: var(--primary-color);
    color: var(--bg-color);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.verse-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.verse-item {
    display: flex;
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.verse-num {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.9rem;
    margin-right: 1rem;
    min-width: 1.5rem;
    text-align: right;
    user-select: none;
    padding-top: 0.1rem;
}

.verse-text {
    flex: 1;
    font-size: 1.05rem;
}

.highlight {
    background-color: var(--highlight-bg);
    color: var(--highlight-text);
    padding: 0 0.2rem;
    border-radius: 3px;
    font-weight: 600;
}

.ref-hover {
    color: var(--primary-color);
    cursor: pointer;
    position: relative;
    display: inline-block;
    font-weight: 600;
}

.ref-hover:hover {
    text-decoration: underline;
}

.ref-tooltip {
    visibility: hidden;
    width: 280px;
    background-color: var(--card-bg);
    color: var(--text-color);
    text-align: left;
    border-radius: 8px;
    padding: 1rem;
    position: absolute;
    z-index: 50;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 0.95rem;
    line-height: 1.5;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    font-weight: normal;
    cursor: default;
}

.ref-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--border-color) transparent transparent transparent;
}

.ref-hover:hover .ref-tooltip,
.ref-hover:active .ref-tooltip {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 640px) {
    .ref-tooltip {
        position: fixed;
        top: 50%;
        left: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: 90vw;
        max-width: 350px;
        z-index: 9999;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    .ref-tooltip::after {
        display: none;
    }
}

.modal .ref-tooltip {
    position: fixed;
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 350px;
    z-index: 9999;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.2);
}

.modal .ref-tooltip::after {
    display: none;
}

.error-msg {
    color: #ef4444;
    background-color: #fef2f2;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #fecaca;
    margin-bottom: 1rem;
}

.no-results {
    text-align: center;
    color: var(--secondary-color);
    padding: 3rem;
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px dashed var(--border-color);
}

.loader {
    display: none;
    text-align: center;
    padding: 2rem;
    color: var(--secondary-color);
}

/* Barra Flutuante de Status da Busca (Aparece no Topo em Buscas Extensas) */
.floating-search-status {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: var(--card-bg, #1e293b);
    color: var(--text-color, #f8fafc);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    border-bottom: 2px solid var(--accent-color, #2563eb);
    padding: 0.65rem 1.25rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.floating-status-content {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.floating-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.floating-status-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.95rem;
}

.floating-status-spinner {
    display: inline-block;
    font-size: 1.15rem;
    animation: pulseSpin 1.4s infinite ease-in-out;
}

@keyframes pulseSpin {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.22); }
}

.floating-status-title {
    font-weight: 600;
    color: var(--text-color, #f8fafc);
}

.floating-status-detail {
    font-size: 0.8rem;
    color: var(--accent-color, #38bdf8);
    background: rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
    font-weight: 500;
}

.btn-cancelar-topo {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-cancelar-topo:hover {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.floating-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    overflow: hidden;
}

.floating-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color, #2563eb), #38bdf8);
    width: 0%;
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 3px;
}

.footer {
    text-align: center;
    padding: 2rem;
    color: var(--secondary-color);
    border-top: 1px solid var(--border-color);
    margin-top: 3rem;
    font-size: 0.9rem;
}

.verse-stats {
    font-size: 0.75rem;
    color: var(--secondary-color);
    background-color: var(--bg-color);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    display: inline-block;
}

.ficha-panel {
    background-color: var(--bg-color);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-top: 1.5rem;
}

.ficha-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.ficha-stat {
    background-color: var(--card-bg);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ficha-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.ficha-stat-label {
    font-size: 0.85rem;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .navbar {
        padding: 0.6rem 1rem;
    }

    .navbar-container {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .logo {
        text-align: center;
        font-size: 1.35rem;
    }

    .navbar-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .container {
        padding: 0 0.85rem;
        margin: 0.75rem auto;
    }

    .search-panel {
        padding: 0.5rem 0;
    }

    .card {
        padding: 1.25rem;
    }

    .tabs {
        flex-direction: row;
        overflow-x: auto;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.5rem;
        border-bottom: none;
        padding-bottom: 0.5rem;
    }
    
    .tab {
        flex: 0 0 auto;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .translation-badge {
        align-self: flex-start;
    }

    .verse-stats {
        display: inline-block;
        margin-left: 0;
        margin-top: 0.25rem;
    }

    .title {
        font-size: 1.75rem;
    }

    .verse-num {
        min-width: 1.25rem;
        margin-right: 0.5rem;
    }
}

.clickable-word {
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 3px;
}

.clickable-word:hover {
    background-color: var(--primary-color);
    color: var(--bg-color);
}

.reference-clickable {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease, transform 0.15s ease;
    border-radius: 4px;
    padding: 1px 4px;
}

.reference-clickable:hover {
    color: var(--accent-color) !important;
    text-decoration: underline;
    background-color: rgba(16, 185, 129, 0.08);
    transform: translateX(2px);
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px);
}

.modal[style*="block"] {
    display: flex !important;
    align-items: stretch;
    justify-content: stretch;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Modais globais tomam a tela toda para máxima imersão e leitura sem aperto */
.modal-content {
    background-color: var(--card-bg);
    position: relative;
    padding: 16px 32px;
    border-radius: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: none;
}

[data-theme="dark"] .modal-content {
    background-color: #121215 !important;
    color: #f4f4f5 !important;
}

/* Elimina bordas e paddings redundantes de cards dentro de qualquer modal */
.modal .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 1rem 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
}

.modal .card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.modal .card-header {
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

/* Diálogos compactos centralizados no Desktop (Login) */
#modal-login[style*="block"] {
    align-items: center;
    justify-content: center;
    padding: 1rem !important;
}

#modal-login .modal-content {
    width: 92% !important;
    max-width: 480px !important;
    height: auto !important;
    max-height: 90dvh !important;
    border-radius: 16px !important;
    margin: auto !important;
    padding: 24px 28px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

.close-modal {
    position: absolute;
    right: 20px;
    top: 15px;
    color: #999;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close-modal:hover {
    color: var(--text-color);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.modal-header h3 {
    margin: 0;
    color: var(--primary-color);
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    color: var(--text-color);
}

.checkbox-group .trad-checkbox-label {
    margin-right: 1rem;
}

.traducoes-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: var(--bg-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    max-height: 200px;
    overflow-y: auto;
}

.trad-accordion-header {
    background-color: var(--primary-color);
    color: var(--bg-color);
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.trad-accordion-header:hover {
    background-color: var(--secondary-color);
}

.trad-accordion-content {
    display: none;
    padding-top: 1rem;
}

.trad-accordion-content.active {
    display: block;
}

#leitura-traducoes label,
#cronograma-traducoes label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.3rem 0.8rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s;
    font-weight: 500;
}

#leitura-traducoes label:hover,
#cronograma-traducoes label:hover {
    background-color: var(--bg-color);
}

#leitura-traducoes input[type="radio"]:checked+label,
#cronograma-traducoes input[type="radio"]:checked+label {
    border-color: var(--primary-color);
    background-color: #eff6ff;
    color: var(--primary-color);
}

#leitura-traducoes input[type="radio"],
#cronograma-traducoes input[type="radio"] {
    display: none;
}

.leitura-texto-capital {
    font-weight: 600;
    color: var(--text-color);
}

.leitura-verso {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.leitura-verso-num {
    color: var(--accent-color);
    font-weight: 700;
    margin-right: 0.75rem;
    font-size: 0.95rem;
    min-width: 25px;
    display: inline-block;
}

.verse-text {
    flex: 1;
}

.leitura-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    background-color: var(--bg-color);
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--secondary-color);
}

.leitura-stats span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.leitura-stats strong {
    color: var(--text-color);
}

.leitura-refs-apenas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.leitura-ref-item {
    cursor: pointer;
    color: var(--primary-color);
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    border: 1px solid var(--border-color);
}

.leitura-ref-item:hover {
    background-color: #eff6ff;
    text-decoration: underline;
}

/* === CABEÇALHO FIXO DE LEITURA (STICKY BIBLE READER BAR) === */
.leitura-sticky-header {
    position: sticky;
    top: -16px;
    margin: -16px -32px 1.25rem -32px;
    padding: 12px 32px 8px 32px;
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
    border-radius: 0;
    width: calc(100% + 64px);
    box-sizing: border-box;
}

[data-theme="dark"] .leitura-sticky-header {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* === VISIBILIDADE DO MENU DE CAPÍTULOS E CONTROLES NO MODO ESCURO === */
[data-theme="dark"] .leitura-cap-stepper {
    background-color: #27272a !important;
    border: 1.5px solid #3f3f46 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .select-capitulo-leitura {
    background-color: #27272a !important;
    color: #ffffff !important;
    border-left: 1px solid #3f3f46 !important;
    border-right: 1px solid #3f3f46 !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .btn-stepper-nav {
    color: #f4f4f5 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-stepper-nav:hover:not(:disabled) {
    background-color: #3f3f46 !important;
    color: #34d399 !important;
}

[data-theme="dark"] .btn-stepper-nav:disabled {
    color: #71717a !important;
    opacity: 0.4 !important;
}

[data-theme="dark"] .select-livro-leitura {
    background-color: #27272a !important;
    color: #ffffff !important;
    border: 1.5px solid #10b981 !important;
}

[data-theme="dark"] .select-traducao-leitura {
    background-color: #27272a !important;
    color: #ffffff !important;
    border: 1.5px solid #3f3f46 !important;
}

[data-theme="dark"] .btn-leitura-quickjump-toggle {
    background-color: #27272a !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
}

[data-theme="dark"] .font-size-control {
    background-color: #27272a !important;
    border-color: #3f3f46 !important;
}

[data-theme="dark"] .btn-font-size {
    color: #f4f4f5 !important;
}

[data-theme="dark"] .font-size-indicator {
    color: #a1a1aa !important;
}

[data-theme="dark"] .btn-leitura-fechar-sticky {
    color: #a1a1aa !important;
}

[data-theme="dark"] .btn-leitura-fechar-sticky:hover {
    color: #f87171 !important;
    background-color: rgba(239, 68, 68, 0.2) !important;
}

/* Garante que o texto de TODAS as opções de dropdown seja 100% visível em qualquer tema */
select option {
    background-color: #ffffff;
    color: #18181b;
}

[data-theme="dark"] select option {
    background-color: #18181b !important;
    color: #ffffff !important;
    padding: 8px 12px;
}

[data-theme="dark"] select option:checked {
    background-color: #059669 !important;
    color: #ffffff !important;
    font-weight: 700;
}

.leitura-sticky-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.leitura-header-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.leitura-header-icon {
    font-size: 1.4rem;
    line-height: 1;
    user-select: none;
}

.select-livro-leitura {
    width: auto !important;
    max-width: 220px;
    padding: 0.35rem 0.65rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border: 1.5px solid var(--accent-color) !important;
    border-radius: 8px !important;
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    cursor: pointer;
}

.leitura-cap-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--card-bg);
}

.btn-stepper-nav {
    background: transparent;
    border: none;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    user-select: none;
}

.btn-stepper-nav:hover:not(:disabled) {
    background-color: var(--border-color);
    color: var(--accent-color);
}

.btn-stepper-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.select-capitulo-leitura {
    width: auto !important;
    border: none !important;
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    padding: 0.35rem 0.65rem !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    background-color: transparent !important;
    color: var(--text-color) !important;
    cursor: pointer;
}

.leitura-trad-wrapper {
    display: inline-flex;
    align-items: center;
}

.select-traducao-leitura {
    width: auto !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--border-color) !important;
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    cursor: pointer;
}

.leitura-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-leitura-quickjump-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.btn-leitura-quickjump-toggle:hover,
.btn-leitura-quickjump-toggle.active {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: rgba(16, 185, 129, 0.08);
}

.btn-leitura-fechar-sticky {
    background: transparent;
    border: none;
    color: var(--secondary-color);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
    user-select: none;
}

.btn-leitura-fechar-sticky:hover {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
}

/* Painel Expansível de Salto Rápido */
.leitura-quickjump-panel {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    animation: quickjumpFadeIn 0.2s ease;
}

@keyframes quickjumpFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.quickjump-form-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.quickjump-form-container input {
    flex: 1;
    font-size: 0.95rem;
    padding: 0.4rem 0.75rem;
}

.btn-quickjump-go {
    background-color: var(--accent-color);
    color: #fff;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.btn-quickjump-go:hover {
    opacity: 0.9;
}

.btn-quickjump-cancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--secondary-color);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-quickjump-cancel:hover {
    color: var(--text-color);
    border-color: var(--text-color);
}

.quickjump-msg {
    font-size: 0.85rem;
    color: #ef4444;
    margin-top: 6px;
}

/* Barra de Progresso de Leitura */
.leitura-progress-track {
    width: 100%;
    height: 3px;
    background-color: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}

.leitura-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), #3b82f6);
    transition: width 0.1s linear;
}

/* Animação quando salta para um versículo específico */
@keyframes versoPulseAnim {
    0% {
        background-color: rgba(16, 185, 129, 0.35);
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.4);
    }
    50% {
        background-color: rgba(16, 185, 129, 0.5);
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.2);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

.verso-highlight-pulse {
    animation: versoPulseAnim 2.8s ease-out;
    border-radius: 6px;
    padding: 2px 4px;
}

/* Ocultar top bar e botão close padrão quando o header sticky de leitura estiver ativo */
#modal-main-results.leitura-ativa .modal-results-top-bar,
#modal-main-results.leitura-ativa > .modal-content > #close-main-results {
    display: none !important;
}


.leitura-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.leitura-nav .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.leitura-nav .btn:disabled:hover {
    background-color: var(--primary-color);
}

.leitura-resultado-destaque {
    background-color: var(--highlight-bg);
    color: var(--highlight-text);
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
    font-weight: 600;
}

.leitura-nav .btn-outline {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.leitura-nav .btn-outline:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Ajuste para o modal na aba leitura */
.modal .leitura-verso {
    margin-bottom: 0.3rem;
}

/* Estilos para o modo slide na aba leitura */
.leitura-slide-container {
    display: none;
}

.leitura-slide-container.active {
    display: block;
}

.leitura-lista-container {
    display: block;
}

.leitura-lista-container.hidden {
    display: none;
}

.leitura-slide-verso {
    font-size: 1.2rem;
    line-height: 1.8;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.leitura-slide-verso:last-child {
    border-bottom: none;
}

/* Estilos de Anotações */
.btn-nota {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 5px;
    opacity: 0.3;
    transition: all 0.2s;
    vertical-align: middle;
}
.btn-nota:hover {
    opacity: 0.8;
    transform: scale(1.1);
}
.btn-nota.has-nota {
    opacity: 1;
}

.nota-box {
    background-color: var(--highlight-bg);
    color: var(--highlight-text);
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    border-left: 4px solid var(--accent-color);
    box-shadow: var(--shadow-sm);
}

.leitura-slide-num {
    color: var(--accent-color);
    font-weight: 700;
    margin-right: 0.75rem;
    min-width: 1.8rem;
    display: inline-block;
    text-align: right;
    font-size: 0.9rem;
}

.leitura-slide-texto {
    flex: 1;
}

.leitura-slide-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.leitura-slide-nav .btn {
    padding: 0.5rem 1.5rem;
    min-width: 100px;
}

.leitura-slide-nav .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.leitura-slide-nav .btn:disabled:hover {
    background-color: var(--primary-color);
}

.leitura-slide-counter {
    font-weight: 600;
    color: var(--text-color);
    min-width: 80px;
    text-align: center;
}

.leitura-slide-voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 500;
    padding: 0.5rem 0;
    border: none;
    background: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.leitura-slide-voltar:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.leitura-slide-verso-container {
    padding: 0.5rem 0;
}

.leitura-ref-item.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.leitura-ref-item.active:hover {
    background-color: var(--primary-hover);
}

/* Animação de transição suave */
.leitura-slide-content {
    animation: slideFade 0.3s ease;
}

@keyframes slideFade {
    from {
        opacity: 0.5;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.leitura-slide-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.leitura-slide-ref {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bg-color);
}

.leitura-slide-texto-completo {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-color);
    padding: 0.5rem 0;
}

.leitura-slide-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    color: var(--secondary-color);
}

.leitura-slide-stats span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.leitura-slide-stats strong {
    color: var(--text-color);
}

/* Responsividade para dispositivos móveis */
@media (max-width: 640px) {
    .leitura-slide-nav {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .leitura-slide-nav .btn {
        min-width: 80px;
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
    }

    .leitura-slide-counter {
        min-width: 60px;
        font-size: 0.9rem;
    }

    .leitura-slide-texto-completo {
        font-size: 1rem;
    }

    .leitura-slide-ref {
        font-size: 1.1rem;
    }
}

/* Modo Escuro - Theme Toggle */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: background-color 0.2s, color 0.2s;
}

.theme-toggle:hover {
    background-color: var(--border-color);
    color: var(--primary-color);
}

.theme-icon {
    width: 24px;
    height: 24px;
}

.theme-icon.hidden {
    display: none;
}

/* ================= RESPONSIVIDADE COMPLETA PARA TODOS OS DISPOSITIVOS ================= */

/* Tablets e Telas Médias (iPad, Galaxy Tab, etc. - até 1024px) */
@media (max-width: 1024px) {
    .modal-content {
        padding: 12px 20px !important;
    }

    .modal-results-top-bar {
        top: -12px;
        margin: -12px -20px 14px -20px;
    }

    .search-sticky-nav-wrapper {
        top: 32px;
        margin: 0 -20px 10px -20px;
        padding: 6px 20px;
    }

    .livro-section-header {
        top: 66px;
    }

    .leitura-sticky-header {
        top: -12px;
        margin: -12px -20px 1rem -20px;
        padding: 10px 20px 6px 20px;
        width: calc(100% + 40px);
    }
}

/* Celulares e Telas Menores (até 768px) */
@media (max-width: 768px) {
    .modal[style*="block"] {
        padding: 0 !important;
    }

    .modal-content {
        padding: 8px 12px 24px 12px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #modal-login .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        padding: 16px !important;
    }

    .close-modal {
        right: 12px;
        top: 10px;
        font-size: 26px;
    }

    .leitura-sticky-header {
        top: -8px;
        margin: -8px -12px 0.75rem -12px;
        padding: 6px 10px 4px 10px;
        border-radius: 0;
        width: calc(100% + 24px);
        gap: 5px;
    }

    .leitura-sticky-top-row {
        gap: 5px;
        justify-content: space-between;
    }

    .leitura-header-left {
        gap: 4px;
        flex: 1;
        min-width: 0;
    }

    .leitura-header-icon {
        font-size: 1.15rem;
    }

    .select-livro-leitura {
        max-width: 110px !important;
        font-size: 0.85rem !important;
        padding: 0.25rem 0.35rem !important;
        border-radius: 6px !important;
    }

    .leitura-cap-stepper {
        border-radius: 6px;
    }

    .select-capitulo-leitura {
        font-size: 0.85rem !important;
        padding: 0.25rem 0.35rem !important;
    }

    .select-traducao-leitura {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.35rem !important;
        max-width: 65px !important;
        border-radius: 6px !important;
    }

    .btn-stepper-nav {
        padding: 0.25rem 0.35rem;
        font-size: 0.75rem;
    }

    .leitura-header-right {
        gap: 4px;
    }

    .btn-leitura-quickjump-toggle .quickjump-text {
        display: none;
    }

    .btn-leitura-quickjump-toggle {
        padding: 0.25rem 0.45rem;
        border-radius: 6px;
    }

    .font-size-control {
        padding: 2px 4px;
        gap: 1px;
    }

    .btn-font-size {
        padding: 2px 3px;
        font-size: 0.75rem;
    }

    .font-size-indicator {
        font-size: 0.72rem;
        min-width: 38px;
        padding: 0 2px;
    }

    .modal-results-top-bar {
        margin: -16px -16px 14px -16px;
        padding: 6px 12px;
    }

    .modal-results-title-bar {
        font-size: 0.95rem;
    }

    .btn-leitura-fechar-sticky {
        font-size: 1.4rem;
        padding: 0 2px;
        margin-left: 2px;
    }

    /* Leitura Bíblica em Tela Cheia no Celular (Sem aperto) */
    .leitura-verso {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 0.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    .leitura-verso-conteudo {
        display: flex;
        align-items: baseline;
        gap: 4px;
        line-height: 1.75;
        width: 100%;
    }

    .leitura-verso-num {
        min-width: 18px;
        margin-right: 0.25rem;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .leitura-verso-texto {
        flex: 1;
        word-break: break-word;
    }

    .verse-action-group {
        margin: 0 1px;
        gap: 1px;
    }

    .btn-marca-texto,
    .btn-nota {
        font-size: 0.75rem;
        padding: 1px 2px;
    }
}

/* Celulares Muito Compactos (até 380px) */
@media (max-width: 380px) {
    .container {
        padding: 0 0.5rem;
        margin: 0.5rem auto;
    }

    .select-livro-leitura {
        max-width: 85px !important;
        font-size: 0.78rem !important;
    }

    .select-capitulo-leitura {
        font-size: 0.78rem !important;
    }

    .select-traducao-leitura {
        max-width: 52px !important;
        font-size: 0.75rem !important;
    }

    .btn-stepper-nav {
        padding: 0.2rem 0.25rem;
        font-size: 0.7rem;
    }

    .navbar {
        padding: 0.5rem 0.5rem;
    }

    .logo {
        font-size: 1.2rem;
    }

    .navbar-actions {
        gap: 6px;
    }
}
/* Admin Table Styles */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.9rem;
    text-align: left;
}
.admin-table th, .admin-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
}
.admin-table th {
    background-color: var(--bg-color);
    font-weight: 600;
}
.admin-table-input {
    width: 100%;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
}
.admin-table-btn {
    padding: 4px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    background: var(--accent-color);
    color: white;
    border: none;
}
.admin-table-btn:hover {
    background: var(--primary-color);
}
.admin-tabs {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}
.admin-tab {
    padding: 8px 15px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}
.admin-tab.active {
    border-bottom-color: var(--accent-color);
    color: var(--accent-color);
}
.admin-tab-content {
    display: none;
}
.admin-tab-content.active {
    display: block;
}

/* ================= MARCA-TEXTO & DESTAQUES ================= */
.destaque-amarelo {
    background-color: rgba(254, 240, 138, 0.4) !important;
    border-left: 5px solid #eab308 !important;
    padding-left: 8px !important;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.destaque-amarelo .leitura-verso-texto,
.destaque-amarelo .verse-text {
    background-color: rgba(254, 240, 138, 0.7) !important;
    color: #713f12 !important;
    padding: 1px 4px;
    border-radius: 3px;
}

.destaque-verde {
    background-color: rgba(187, 247, 208, 0.4) !important;
    border-left: 5px solid #22c55e !important;
    padding-left: 8px !important;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.destaque-verde .leitura-verso-texto,
.destaque-verde .verse-text {
    background-color: rgba(187, 247, 208, 0.7) !important;
    color: #14532d !important;
    padding: 1px 4px;
    border-radius: 3px;
}

.destaque-azul {
    background-color: rgba(191, 219, 254, 0.4) !important;
    border-left: 5px solid #3b82f6 !important;
    padding-left: 8px !important;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.destaque-azul .leitura-verso-texto,
.destaque-azul .verse-text {
    background-color: rgba(191, 219, 254, 0.7) !important;
    color: #1e3a8a !important;
    padding: 1px 4px;
    border-radius: 3px;
}

.destaque-rosa {
    background-color: rgba(251, 207, 232, 0.4) !important;
    border-left: 5px solid #ec4899 !important;
    padding-left: 8px !important;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.destaque-rosa .leitura-verso-texto,
.destaque-rosa .verse-text {
    background-color: rgba(251, 207, 232, 0.7) !important;
    color: #831843 !important;
    padding: 1px 4px;
    border-radius: 3px;
}

.destaque-roxo {
    background-color: rgba(233, 213, 255, 0.45) !important;
    border-left: 5px solid #a855f7 !important;
    padding-left: 8px !important;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.destaque-roxo .leitura-verso-texto,
.destaque-roxo .verse-text {
    background-color: rgba(233, 213, 255, 0.75) !important;
    color: #581c87 !important;
    padding: 1px 4px;
    border-radius: 3px;
}

.destaque-laranja {
    background-color: rgba(254, 215, 170, 0.45) !important;
    border-left: 5px solid #f97316 !important;
    padding-left: 8px !important;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.destaque-laranja .leitura-verso-texto,
.destaque-laranja .verse-text {
    background-color: rgba(254, 215, 170, 0.75) !important;
    color: #7c2d12 !important;
    padding: 1px 4px;
    border-radius: 3px;
}

.destaque-ciano {
    background-color: rgba(165, 243, 252, 0.45) !important;
    border-left: 5px solid #06b6d4 !important;
    padding-left: 8px !important;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.destaque-ciano .leitura-verso-texto,
.destaque-ciano .verse-text {
    background-color: rgba(165, 243, 252, 0.75) !important;
    color: #164e63 !important;
    padding: 1px 4px;
    border-radius: 3px;
}

.destaque-vermelho {
    background-color: rgba(254, 202, 202, 0.45) !important;
    border-left: 5px solid #ef4444 !important;
    padding-left: 8px !important;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.destaque-vermelho .leitura-verso-texto,
.destaque-vermelho .verse-text {
    background-color: rgba(254, 202, 202, 0.75) !important;
    color: #7f1d1d !important;
    padding: 1px 4px;
    border-radius: 3px;
}

.destaque-ambar {
    background-color: rgba(253, 230, 138, 0.45) !important;
    border-left: 5px solid #d97706 !important;
    padding-left: 8px !important;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.destaque-ambar .leitura-verso-texto,
.destaque-ambar .verse-text {
    background-color: rgba(253, 230, 138, 0.75) !important;
    color: #78350f !important;
    padding: 1px 4px;
    border-radius: 3px;
}

.destaque-cinza {
    background-color: rgba(226, 232, 240, 0.5) !important;
    border-left: 5px solid #64748b !important;
    padding-left: 8px !important;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.destaque-cinza .leitura-verso-texto,
.destaque-cinza .verse-text {
    background-color: rgba(226, 232, 240, 0.8) !important;
    color: #334155 !important;
    padding: 1px 4px;
    border-radius: 3px;
}

/* Dark theme overrides para destaques */
[data-theme="dark"] .destaque-amarelo {
    background-color: rgba(234, 179, 8, 0.2) !important;
    border-left-color: #facc15 !important;
}
[data-theme="dark"] .destaque-amarelo .leitura-verso-texto,
[data-theme="dark"] .destaque-amarelo .verse-text {
    background-color: rgba(234, 179, 8, 0.45) !important;
    color: #fef08a !important;
}

[data-theme="dark"] .destaque-verde {
    background-color: rgba(34, 197, 94, 0.2) !important;
    border-left-color: #4ade80 !important;
}
[data-theme="dark"] .destaque-verde .leitura-verso-texto,
[data-theme="dark"] .destaque-verde .verse-text {
    background-color: rgba(34, 197, 94, 0.45) !important;
    color: #bbf7d0 !important;
}

[data-theme="dark"] .destaque-azul {
    background-color: rgba(59, 130, 246, 0.2) !important;
    border-left-color: #60a5fa !important;
}
[data-theme="dark"] .destaque-azul .leitura-verso-texto,
[data-theme="dark"] .destaque-azul .verse-text {
    background-color: rgba(59, 130, 246, 0.45) !important;
    color: #bfdbfe !important;
}

[data-theme="dark"] .destaque-rosa {
    background-color: rgba(236, 72, 153, 0.2) !important;
    border-left-color: #f472b6 !important;
}
[data-theme="dark"] .destaque-rosa .leitura-verso-texto,
[data-theme="dark"] .destaque-rosa .verse-text {
    background-color: rgba(236, 72, 153, 0.45) !important;
    color: #fbcfe8 !important;
}

[data-theme="dark"] .destaque-roxo {
    background-color: rgba(168, 85, 247, 0.2) !important;
    border-left-color: #c084fc !important;
}
[data-theme="dark"] .destaque-roxo .leitura-verso-texto,
[data-theme="dark"] .destaque-roxo .verse-text {
    background-color: rgba(168, 85, 247, 0.45) !important;
    color: #f3e8ff !important;
}

[data-theme="dark"] .destaque-laranja {
    background-color: rgba(249, 115, 22, 0.2) !important;
    border-left-color: #fb923c !important;
}
[data-theme="dark"] .destaque-laranja .leitura-verso-texto,
[data-theme="dark"] .destaque-laranja .verse-text {
    background-color: rgba(249, 115, 22, 0.45) !important;
    color: #fed7aa !important;
}

[data-theme="dark"] .destaque-ciano {
    background-color: rgba(6, 182, 212, 0.2) !important;
    border-left-color: #22d3ee !important;
}
[data-theme="dark"] .destaque-ciano .leitura-verso-texto,
[data-theme="dark"] .destaque-ciano .verse-text {
    background-color: rgba(6, 182, 212, 0.45) !important;
    color: #cffafe !important;
}

[data-theme="dark"] .destaque-vermelho {
    background-color: rgba(239, 68, 68, 0.2) !important;
    border-left-color: #f87171 !important;
}
[data-theme="dark"] .destaque-vermelho .leitura-verso-texto,
[data-theme="dark"] .destaque-vermelho .verse-text {
    background-color: rgba(239, 68, 68, 0.45) !important;
    color: #fee2e2 !important;
}

[data-theme="dark"] .destaque-ambar {
    background-color: rgba(217, 119, 6, 0.2) !important;
    border-left-color: #f59e0b !important;
}
[data-theme="dark"] .destaque-ambar .leitura-verso-texto,
[data-theme="dark"] .destaque-ambar .verse-text {
    background-color: rgba(217, 119, 6, 0.45) !important;
    color: #fef3c7 !important;
}

[data-theme="dark"] .destaque-cinza {
    background-color: rgba(148, 163, 184, 0.2) !important;
    border-left-color: #94a3b8 !important;
}
[data-theme="dark"] .destaque-cinza .leitura-verso-texto,
[data-theme="dark"] .destaque-cinza .verse-text {
    background-color: rgba(148, 163, 184, 0.45) !important;
    color: #f1f5f9 !important;
}

/* Indicadores de cor no botão marca-texto */
.btn-marca-texto.has-destaque.cor-amarelo {
    background-color: #fef08a !important;
    border: 1.5px solid #eab308 !important;
    opacity: 1 !important;
}
.btn-marca-texto.has-destaque.cor-verde {
    background-color: #bbf7d0 !important;
    border: 1.5px solid #22c55e !important;
    opacity: 1 !important;
}
.btn-marca-texto.has-destaque.cor-azul {
    background-color: #bfdbfe !important;
    border: 1.5px solid #3b82f6 !important;
    opacity: 1 !important;
}
.btn-marca-texto.has-destaque.cor-rosa {
    background-color: #fbcfe8 !important;
    border: 1.5px solid #ec4899 !important;
    opacity: 1 !important;
}
.btn-marca-texto.has-destaque.cor-roxo {
    background-color: #e9d5ff !important;
    border: 1.5px solid #a855f7 !important;
    opacity: 1 !important;
}
.btn-marca-texto.has-destaque.cor-laranja {
    background-color: #fed7aa !important;
    border: 1.5px solid #f97316 !important;
    opacity: 1 !important;
}
.btn-marca-texto.has-destaque.cor-ciano {
    background-color: #a5f3fc !important;
    border: 1.5px solid #06b6d4 !important;
    opacity: 1 !important;
}
.btn-marca-texto.has-destaque.cor-vermelho {
    background-color: #fecaca !important;
    border: 1.5px solid #ef4444 !important;
    opacity: 1 !important;
}
.btn-marca-texto.has-destaque.cor-ambar {
    background-color: #fde68a !important;
    border: 1.5px solid #d97706 !important;
    opacity: 1 !important;
}
.btn-marca-texto.has-destaque.cor-cinza {
    background-color: #e2e8f0 !important;
    border: 1.5px solid #64748b !important;
    opacity: 1 !important;
}

.verse-action-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
    margin: 0 4px;
}

.btn-marca-texto {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.82rem;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0.6;
    transition: all 0.2s ease;
    line-height: 1;
}

.btn-marca-texto:hover {
    opacity: 1;
    transform: scale(1.15);
    background-color: var(--bg-color);
}

.btn-marca-texto.has-destaque {
    opacity: 1;
    border-color: var(--border-color);
    background-color: var(--bg-color);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.destaque-palette-floating button:hover {
    transform: scale(1.25) !important;
}

.anotacao-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.anotacao-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* ================= CONTROLE DE FONTE (A- / A+) ================= */
.verse-text, 
.leitura-verso,
.leitura-verso-texto,
#modal-ref-conteudo,
.modal-ref-conteudo,
.refs-lista-conteudo,
.leitura-refs-apenas,
.leitura-ref-item,
.anotacao-conteudo {
    font-size: var(--bible-font-size) !important;
    line-height: var(--bible-line-height) !important;
}

.verse-text span,
.verse-text strong,
.verse-text mark,
.leitura-verso-texto span,
.leitura-verso-texto strong,
.leitura-verso-texto mark,
.modal-ref-conteudo span,
.refs-lista-conteudo span {
    font-size: inherit;
    line-height: inherit;
}

.leitura-verso-num,
.verse-num {
    font-size: calc(var(--bible-font-size) * 0.88) !important;
}

.verse-stats {
    font-size: calc(var(--bible-font-size) * 0.76) !important;
}

.nota-box {
    font-size: calc(var(--bible-font-size) * 0.88) !important;
}

.leitura-slide-texto {
    font-size: calc(var(--bible-font-size) * 1.35) !important;
    line-height: var(--bible-line-height) !important;
}
.leitura-slide-texto span {
    font-size: inherit;
    line-height: inherit;
}

/* Barra superior com A- / A+ no modal de resultados */
.modal-results-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: -16px;
    z-index: 95;
    background-color: var(--card-bg);
    padding: 8px 16px;
    margin: -16px -32px 18px -32px;
    border-bottom: 1px solid var(--border-color);
}

.modal-results-title-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.05rem;
}

.modal-results-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modal-results-top-bar .close-modal {
    position: static !important;
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
    color: var(--secondary-color);
    transition: color 0.15s ease;
}

.modal-results-top-bar .close-modal:hover {
    color: var(--text-color);
}

.font-size-control {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2px 6px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.font-size-control:hover {
    border-color: var(--secondary-color);
}

.btn-font-size {
    background: transparent;
    border: none;
    color: var(--text-color);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 12px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-font-size:hover:not(:disabled) {
    background-color: var(--primary-hover);
    color: var(--bg-color);
}

.btn-font-size:active:not(:disabled) {
    transform: scale(0.92);
}

.btn-font-size:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.font-size-indicator {
    font-size: 0.78rem;
    color: var(--secondary-color);
    font-weight: 600;
    min-width: 44px;
    text-align: center;
    cursor: pointer;
    padding: 0 3px;
    transition: color 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.font-size-indicator:hover {
    color: var(--accent-color);
}

/* Modal Seleção de Traduções */
#modal-selecao-traducoes {
    z-index: 2000 !important;
}

#modal-selecao-traducoes[style*="block"],
#modal-selecao-traducoes[style*="flex"],
#modal-selecao-traducoes.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    z-index: 2000 !important;
}

.modal-traducoes-content {
    width: 95vw !important;
    max-width: 580px !important;
    height: auto !important;
    max-height: 88vh !important;
    max-height: 88dvh !important;
    margin: auto !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    padding: 24px !important;
    position: relative !important;
}

.modal-filtros-palavra-content {
    width: 95vw !important;
    max-width: 660px !important;
    height: auto !important;
    max-height: 88vh !important;
    max-height: 88dvh !important;
    margin: auto !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    padding: 24px !important;
    position: relative !important;
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .modal-filtros-palavra-content {
    background-color: #18181b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.modal-filtros-body-scroll {
    overflow-y: auto;
    padding-right: 6px;
    margin-right: -4px;
}

.modal-filtros-body-scroll::-webkit-scrollbar {
    width: 6px;
}

.modal-filtros-body-scroll::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

.filtros-secao-card {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s ease;
}

[data-theme="dark"] .filtros-secao-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.btn-modal-filtros {
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-filtros:hover {
    border-color: var(--accent-color);
}

.badge-filtro-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    background-color: var(--accent-color);
    transition: transform 0.2s ease;
}

.badge-filtro-contador.ativo {
    transform: scale(1.05);
}

@media (max-width: 640px) {
    .form-row-topo-palavra,
    .form-row-topo-leitura,
    .leitura-topo-grid {
        grid-template-columns: 1fr !important;
    }
    .modal-filtros-palavra-content {
        padding: 18px 14px !important;
        border-radius: 14px !important;
        max-height: 94vh !important;
        max-height: 94dvh !important;
    }
}

/* Cronograma de Leitura */
.cronograma-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.cronograma-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    text-align: left;
}

.cronograma-table th, 
.cronograma-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
}

.cronograma-table th {
    background-color: var(--card-bg);
    color: var(--text-color);
    font-weight: 600;
}

.cronograma-table tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .cronograma-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

.cronograma-btn-export {
    background-color: var(--accent-color);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s;
}

.cronograma-btn-export:hover {
    opacity: 0.9;
}

.cronograma-export-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    margin-bottom: 2rem;
}

@media (max-width: 580px) {
    .cronograma-export-actions {
        flex-direction: column;
        width: 100%;
    }
    .cronograma-export-actions .btn,
    .cronograma-export-actions .cronograma-btn-export {
        width: 100%;
        margin-left: 0 !important;
        justify-content: center;
        text-align: center;
    }
}


/* ================= COMPONENTES DA BUSCA AVANÇADA ================= */

.btn-link-action {
    background: transparent;
    border: none;
    color: var(--secondary-color);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.btn-link-action:hover {
    color: var(--accent-color);
    background-color: rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .btn-link-action {
    color: #a1a1aa;
}
[data-theme="dark"] .btn-link-action:hover {
    color: #34d399;
    background-color: rgba(255, 255, 255, 0.08);
}

/* Modais Especializados: Contexto, Comparação, Histórico */
#modal-contexto .modal-content,
#modal-comparacao .modal-content,
#modal-historico .modal-content {
    width: 95vw !important;
    max-width: 780px !important;
    height: auto !important;
    max-height: 88vh !important;
    max-height: 88dvh !important;
    margin: auto !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-color);
    padding: 24px !important;
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5) !important;
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}
[data-theme="dark"] #modal-contexto .modal-content,
[data-theme="dark"] #modal-comparacao .modal-content,
[data-theme="dark"] #modal-historico .modal-content {
    background-color: #18181b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Abas de Histórico e Favoritos */
.active-tab-btn {
    background-color: var(--accent-color) !important;
    color: #ffffff !important;
    border-color: var(--accent-color) !important;
}

/* Autocomplete Inteligente & Sugestões */
.autocomplete-box,
.smart-suggestions-box {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10000;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    max-height: 280px;
    overflow-y: auto;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-sizing: border-box;
}

[data-theme="dark"] .autocomplete-box,
[data-theme="dark"] .smart-suggestions-box {
    background-color: #18181b;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}

.autocomplete-item,
.smart-suggestion-item {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.94rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color);
    transition: all 0.12s ease;
    gap: 10px;
}

[data-theme="dark"] .autocomplete-item,
[data-theme="dark"] .smart-suggestion-item {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.autocomplete-item:hover,
.autocomplete-item.active,
.smart-suggestion-item:hover,
.smart-suggestion-item.active {
    background-color: rgba(37, 99, 235, 0.09);
    color: var(--primary-color);
}

[data-theme="dark"] .autocomplete-item:hover,
[data-theme="dark"] .autocomplete-item.active,
[data-theme="dark"] .smart-suggestion-item:hover,
[data-theme="dark"] .smart-suggestion-item.active {
    background-color: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

.autocomplete-item:last-child,
.smart-suggestion-item:last-child {
    border-bottom: none;
}

.smart-suggestion-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.smart-suggestion-icon {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}

.smart-suggestion-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.smart-suggestion-title {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.smart-suggestion-sub {
    font-size: 0.78rem;
    color: var(--secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.smart-suggestion-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

.smart-suggestion-badge.badge-passagem {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.smart-suggestion-badge.badge-livro {
    background: rgba(147, 51, 234, 0.12);
    color: #9333ea;
    border: 1px solid rgba(147, 51, 234, 0.3);
}

.smart-suggestion-badge.badge-palavra {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.smart-suggestion-badge.badge-correcao {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .smart-suggestion-badge.badge-passagem {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}
[data-theme="dark"] .smart-suggestion-badge.badge-livro {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}
[data-theme="dark"] .smart-suggestion-badge.badge-palavra {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}
[data-theme="dark"] .smart-suggestion-badge.badge-correcao {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

/* Banner de Resiliência: "Você quis dizer...?" e Detecção de Passagem em Palavras */
.sugestao-did-you-mean {
    background: rgba(37, 99, 235, 0.07);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-left: 5px solid var(--accent-color, #2563eb);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 1rem 0 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.98rem;
    color: var(--text-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .sugestao-did-you-mean {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    border-left-color: #60a5fa;
}

.sugestao-did-you-mean .did-you-mean-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}

.sugestao-did-you-mean .did-you-mean-conteudo {
    flex: 1;
    line-height: 1.6;
}

.btn-sugestao-termo {
    background: var(--card-bg, #ffffff);
    border: 1.5px solid var(--accent-color, #2563eb);
    color: var(--accent-color, #2563eb);
    font-weight: 700;
    font-size: 0.94rem;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.btn-sugestao-termo:hover {
    background: var(--accent-color, #2563eb);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] .btn-sugestao-termo {
    background: #1e293b;
    border-color: #60a5fa;
    color: #93c5fd;
}

[data-theme="dark"] .btn-sugestao-termo:hover {
    background: #3b82f6;
    color: #ffffff;
}

.btn-sugestao-acao-primaria {
    background: var(--accent-color, #10b981) !important;
    border: 1.5px solid var(--accent-color, #10b981) !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    margin: 0 4px;
    vertical-align: middle;
}

.btn-sugestao-acao-primaria:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

/* Barra de Estatísticas e Feedback de Consulta */
.search-stats-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0.5rem 0 0.8rem 0;
    padding: 8px 14px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--text-color);
}
[data-theme="dark"] .search-stats-bar {
    background: #121214;
    border-color: rgba(255, 255, 255, 0.08);
}
.search-feedback-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 0.8rem;
    background-color: rgba(37, 99, 235, 0.06);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
    font-size: 0.88rem;
    color: var(--text-color);
}
[data-theme="dark"] .search-feedback-bar {
    background-color: rgba(37, 99, 235, 0.12);
    color: #f4f4f5;
}

/* Chips de Filtros Ativos */
.active-filters-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0.8rem;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #2563eb;
    color: #ffffff !important;
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 0.8rem;
    font-weight: 600;
}
[data-theme="dark"] .filter-chip {
    background: #1d4ed8;
    color: #ffffff !important;
}
.filter-chip-remove {
    cursor: pointer;
    font-weight: bold;
    margin-left: 3px;
    opacity: 0.85;
}
.filter-chip-remove:hover {
    opacity: 1;
}

/* Facetas Interativas */
.facets-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 1.2rem;
}
[data-theme="dark"] .facets-section {
    background: #161618;
    border-color: rgba(255, 255, 255, 0.08);
}
.facets-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.facets-group:last-child {
    margin-bottom: 0;
}
.facets-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--secondary-color);
    min-width: 80px;
}
.facet-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text-color);
    transition: all 0.15s ease;
}
[data-theme="dark"] .facet-pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e4e4e7;
}
.facet-pill:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
[data-theme="dark"] .facet-pill:hover {
    border-color: var(--accent-color);
    color: #34d399;
}
.facet-pill.active {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
}
.facet-pill-clear {
    border-color: #ef4444;
    color: #ef4444;
}
.facet-pill-clear:hover {
    background-color: #ef4444;
    color: #ffffff;
}

/* Concordância Dinâmica */
.concordance-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px dashed rgba(16, 185, 129, 0.35);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 1.2rem;
    font-size: 0.85rem;
}
[data-theme="dark"] .concordance-section {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #f4f4f5;
}
.concordance-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--card-bg);
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-color);
    transition: all 0.15s ease;
}
[data-theme="dark"] .concordance-pill {
    background: #27272a;
    color: #a7f3d0;
    border-color: rgba(16, 185, 129, 0.5);
}
.concordance-pill:hover,
[data-theme="dark"] .concordance-pill:hover {
    background-color: #10b981;
    color: #ffffff !important;
    border-color: #10b981;
}

/* Ações nos Cards de Resultados */
.card-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .card-actions-row {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.btn-card-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--secondary-color);
    cursor: pointer;
    transition: all 0.15s ease;
}
[data-theme="dark"] .btn-card-action {
    border-color: rgba(255, 255, 255, 0.1);
    color: #d4d4d8;
    background-color: rgba(255, 255, 255, 0.03);
}
.btn-card-action:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: rgba(37, 99, 235, 0.05);
}
[data-theme="dark"] .btn-card-action:hover {
    border-color: #3b82f6;
    color: #93c5fd;
    background-color: rgba(59, 130, 246, 0.1);
}

/* Contexto do Versículo */
.context-verse-item {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    font-size: var(--bible-font-size);
    line-height: var(--bible-line-height);
}
.context-verse-item.current {
    border: 2px solid var(--accent-color);
    background-color: rgba(37, 99, 235, 0.06);
}
[data-theme="dark"] .context-verse-item.current {
    border: 2px solid var(--accent-color);
    background-color: rgba(16, 185, 129, 0.08);
}
.context-verse-badge-target {
    display: inline-block;
    padding: 2px 8px;
    background: var(--accent-color);
    color: #ffffff !important;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 6px;
}

/* Comparação de Traduções */
.comparacao-trad-bloco {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .comparacao-trad-bloco {
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.comparacao-trad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}
[data-theme="dark"] .comparacao-trad-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.comparacao-trad-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #2563eb;
    color: #ffffff !important;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
[data-theme="dark"] .comparacao-trad-badge {
    background: #3b82f6;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   NAVEGADOR DE LIVROS STICKY, CABEÇALHOS POR LIVRO E EXPLORADOR CONTÍNUO
   ========================================================================== */

/* Painel de busca e controles do modal de exploração */
.modal-search-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

[data-theme="dark"] .modal-search-panel {
    background: #141416;
    border-color: rgba(255, 255, 255, 0.08);
}

.modal-search-main-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.modal-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 260px;
    display: flex;
    align-items: center;
}

.search-icon-inline {
    position: absolute;
    left: 12px;
    font-size: 0.95rem;
    color: var(--secondary-color);
    pointer-events: none;
    z-index: 2;
}

.modal-input-principal {
    padding-left: 36px !important;
    padding-right: 32px !important;
    font-size: 0.95rem !important;
    height: 42px !important;
    border-radius: 6px !important;
    width: 100%;
}

.modal-input-clear-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--secondary-color);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.modal-input-clear-btn:hover {
    color: var(--text-color);
}

.btn-modal-primary {
    background-color: var(--accent-color);
    color: #ffffff;
    font-weight: 600;
    padding: 0.55rem 1.25rem;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-modal-primary:hover {
    filter: brightness(1.1);
}

/* Gaveta de Filtros */
#btn-modal-toggle-filtros.active {
    background-color: var(--primary-color, #2563eb);
    color: #ffffff !important;
    border-color: var(--primary-color, #2563eb);
}

.modal-filtros-drawer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.modal-filtros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 10px;
    align-items: end;
}

.filtro-item label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 4px;
}

.badge-filtro-ativo {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 0;
    margin-left: 2px;
}

.modal-search-quick-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* Histórico e Breadcrumbs no Topo do Modal */
.modal-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 55vw;
    scrollbar-width: thin;
    padding: 2px 0;
}

.modal-breadcrumb-item {
    cursor: pointer;
    color: var(--accent-color);
    font-weight: 500;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.08);
    transition: all 0.15s ease;
}
.modal-breadcrumb-item:hover {
    text-decoration: underline;
    background: rgba(16, 185, 129, 0.18);
}

.modal-breadcrumb-sep {
    color: var(--secondary-color);
    opacity: 0.5;
    font-size: 0.8rem;
}

.modal-breadcrumb-current {
    font-weight: 700;
    color: var(--text-color);
    padding: 2px 4px;
}

.modal-btn-voltar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
}

/* Navegador de Resultados por Livro (Sticky Bar) */
.book-navigator-bar {
    position: sticky;
    top: 0;
    z-index: 92;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 12px;
    margin: 0 -32px 16px -32px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .book-navigator-bar {
    background: #141416;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.book-nav-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.book-nav-chips-container {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
    scrollbar-width: thin;
    flex: 1;
}

.book-nav-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    user-select: none;
}

[data-theme="dark"] .book-nav-chip {
    background: #1f1f23;
    border-color: rgba(255, 255, 255, 0.08);
}

.book-nav-chip:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(16, 185, 129, 0.08);
    transform: translateY(-1px);
}

.book-nav-chip.active {
    background: var(--accent-color) !important;
    color: #ffffff !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}

/* Cabeçalhos Visuais de Livro nos Resultados */
.livro-section-header {
    position: sticky;
    top: 68px;
    z-index: 85;
    background: var(--card-bg);
    border-left: 4px solid var(--accent-color);
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 16px;
    margin: 24px 0 14px 0;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, opacity 0.2s ease;
}

.livro-section-header:hover {
    filter: brightness(0.97);
}

[data-theme="dark"] .livro-section-header {
    background: #18181b;
    border-top-color: rgba(255, 255, 255, 0.06);
    border-right-color: rgba(255, 255, 255, 0.06);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .livro-section-header:hover {
    filter: brightness(1.08);
}

.livro-section-header.recolhido {
    margin-bottom: 8px;
    opacity: 0.9;
    border-left-color: var(--secondary-color);
}

.resultado-relacoes-biblicas.recolhido,
.resultado-relacoes-refs-compactas.recolhido {
    opacity: 0.95;
    margin-bottom: 10px;
}

.resultado-relacoes-header:hover {
    filter: brightness(0.97);
}

[data-theme="dark"] .resultado-relacoes-header:hover {
    filter: brightness(1.08);
}

.livro-header-chevron {
    font-size: 0.85rem;
    color: var(--secondary-color);
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 4px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.livro-section-header:hover .livro-header-chevron {
    color: var(--primary-color);
}

.livro-header-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.livro-header-nome {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--primary-color);
    letter-spacing: 0.6px;
}

.livro-header-counts {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-color);
}

.livro-header-trads-detail {
    font-size: 0.8rem;
    color: var(--secondary-color);
    width: 100%;
    margin-top: 4px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px dashed var(--border-color);
}

.livro-header-pulse {
    animation: livroHeaderPulse 1.2s ease-out;
}

@keyframes livroHeaderPulse {
    0% {
        background-color: var(--highlight-bg);
        transform: scale(1.01);
    }
    100% {
        background-color: var(--card-bg);
        transform: scale(1);
    }
}

/* Termos Frequentes (Concordância Dinâmica Ampliada) */
.concordance-section {
    margin: 14px 0;
    padding: 12px 16px;
    background: rgba(16, 185, 129, 0.04);
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 8px;
}

[data-theme="dark"] .concordance-section {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.22);
}

.concordance-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 6px;
}

.concordance-sub {
    font-size: 0.8rem;
    color: var(--secondary-color);
}

.concordance-chips-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.concordance-group {
    width: 100%;
    margin-bottom: 8px;
}
.concordance-group:last-child {
    margin-bottom: 2px;
}
.concordance-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--secondary-color);
    margin-bottom: 6px;
    padding-left: 2px;
}
.concordance-group-icon {
    font-size: 0.85rem;
}
.concordance-group-title {
    color: var(--text-color);
    opacity: 0.85;
}
.concordance-group-count {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.7;
}
.concordance-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.concordance-pill-phrase {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.4);
}
[data-theme="dark"] .concordance-pill-phrase {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.45);
    color: #a7f3d0;
}
.concordance-pill-phrase:hover {
    background: var(--accent-color) !important;
    color: #ffffff !important;
}

.pill-dict-badge {
    font-size: 0.75rem;
    margin-left: 2px;
    opacity: 0.9;
    vertical-align: middle;
}

.concordance-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.84rem;
    font-weight: 500;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

[data-theme="dark"] .concordance-pill {
    background: #1f1f23;
    border-color: rgba(255, 255, 255, 0.08);
}

.concordance-pill:hover {
    background: var(--accent-color) !important;
    color: #ffffff !important;
    border-color: var(--accent-color) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.pill-word {
    font-weight: 600;
}

.pill-freq {
    font-size: 0.76rem;
    opacity: 0.8;
    font-weight: 600;
}

.btn-expand-concordance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-color);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.btn-expand-concordance:hover {
    text-decoration: underline;
}

.termos-filtro-box {
    margin-bottom: 6px;
}

.termos-filtro-input:focus {
    outline: none;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .termos-filtro-input {
    background: #1a1a1e !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

/* Estatísticas multi-tradução */
.trad-stats-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 0;
}

.trad-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 0.8rem;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 4px;
    color: var(--text-color);
}

[data-theme="dark"] .trad-stat-badge {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
}

/* ==========================================================================
   BARRA STICKY DE NAVEGAÇÃO E PAINÉIS RETRÁTEIS DROPDOWN
   ========================================================================== */

.search-sticky-nav-wrapper {
    position: sticky;
    top: 32px;
    z-index: 92;
    background: var(--card-bg);
    margin: 0 -32px 10px -32px;
    padding: 6px 32px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: background-color 0.2s ease;
}

[data-theme="dark"] .search-sticky-nav-wrapper {
    background: #141416;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.search-panels-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

/* Container flutuante (dropdown) dos painéis retráteis para NUNCA deslocar os resultados */
.search-collapsible-panels-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
}

.search-retractable-panel {
    pointer-events: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 14px 32px;
    max-height: 48vh;
    overflow-y: auto;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    animation: panelSlideDown 0.2s ease-out;
    scrollbar-width: thin;
}

[data-theme="dark"] .search-retractable-panel {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
}

@keyframes panelSlideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.retractable-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .retractable-panel-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.retractable-panel-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

.retractable-panel-hint {
    font-size: 0.76rem;
    color: var(--secondary-color);
    margin-left: 8px;
    font-weight: normal;
}

.retractable-panel-close-btn {
    background: none;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--secondary-color);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.retractable-panel-close-btn:hover {
    color: var(--text-color);
    background: rgba(0, 0, 0, 0.05);
}

/* Grid de Livros no Painel */
.panel-books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

.panel-book-card {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

[data-theme="dark"] .panel-book-card {
    background: #1f1f23;
    border-color: rgba(255, 255, 255, 0.06);
}

.panel-book-card:hover {
    border-color: var(--accent-color);
    background: rgba(16, 185, 129, 0.08);
    transform: translateY(-1px);
}

.panel-book-card.active {
    border-color: var(--accent-color);
    background: rgba(16, 185, 129, 0.15);
    box-shadow: 0 0 0 1px var(--accent-color);
}

.book-card-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
}

.book-card-name {
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--text-color);
}

.book-card-stats {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-color);
    white-space: nowrap;
}

.book-card-trads {
    font-size: 0.72rem;
    color: var(--secondary-color);
    margin-top: 4px;
    padding-top: 3px;
    border-top: 1px dashed var(--border-color);
}

[data-theme="dark"] .book-card-trads {
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* Grid de Testamentos no Painel */
.panel-testamentos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.testamento-card {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
}

[data-theme="dark"] .testamento-card {
    background: #1f1f23;
    border-color: rgba(255, 255, 255, 0.06);
}

.testamento-card:hover {
    border-color: var(--accent-color);
    background: rgba(16, 185, 129, 0.08);
    transform: translateY(-1px);
}

.testamento-card.active {
    border-color: var(--accent-color);
    background: rgba(16, 185, 129, 0.14);
    box-shadow: 0 0 0 1px var(--accent-color);
}

.testamento-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.testamento-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary-color);
}

.testamento-card-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
}

.testamento-card-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.84rem;
    color: var(--text-color);
    line-height: 1.5;
}

/* Painel de Termos Relacionados */
.panel-termos-content {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .modal-content {
        padding: 12px 16px !important;
    }
    .modal-results-top-bar {
        top: -12px;
        margin: -12px -16px 14px -16px;
        padding: 8px 12px;
    }
    .search-sticky-nav-wrapper {
        top: 30px;
        margin: 0 -16px 8px -16px;
        padding: 5px 12px;
    }
    .search-panels-toolbar {
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .search-panels-toolbar::-webkit-scrollbar {
        display: none;
    }
    .search-retractable-panel {
        padding: 12px 16px;
        max-height: 52vh;
    }
    .modal-breadcrumbs {
        max-width: 40vw;
    }
    .modal-filtros-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .livro-section-header {
        top: 64px;
        padding: 6px 12px;
        margin: 18px 0 10px 0;
    }
    .panel-books-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        max-height: 240px;
    }
    .panel-testamentos-grid {
        grid-template-columns: 1fr;
    }
}

/* ================= EXPANSÃO LEXICAL / FAMÍLIAS DE PALAVRAS ================= */
.search-variacoes-bar {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 3px solid var(--accent-color, #3b82f6);
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--text-color, #1e293b);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.badge-formas-lexicais {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--secondary-color, #64748b);
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: normal;
    vertical-align: middle;
}

.badge-formas-lexicais strong {
    color: var(--primary-color, #1e40af);
}

/* ================= EXPANSÃO GENEALÓGICA E PERSONAGENS BÍBLICOS ================= */
.search-filtros-genealogia-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.btn-filtro-genealogia-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.84rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.25;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    user-select: none;
}

.btn-filtro-genealogia-tag .filtro-tag-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.btn-filtro-genealogia-tag .filtro-tag-seta {
    font-size: 0.72rem;
    margin-left: 3px;
    opacity: 0.85;
    transition: transform 0.2s ease;
}

/* Botão Azul: Personagem */
.btn-filtro-personagem {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.btn-filtro-personagem:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.btn-filtro-personagem.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.35);
}

.btn-filtro-personagem.active strong {
    color: #ffffff;
}

/* Botão Verde: Genealogia e Personagens */
.btn-filtro-genealogia {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.btn-filtro-genealogia:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
}

.btn-filtro-genealogia.active {
    background: #059669;
    color: #ffffff;
    border-color: #047857;
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.35);
}

.btn-filtro-genealogia.active strong {
    color: #ffffff;
}

/* Container retrátil com animação suave */
.painel-retratil-genealogia {
    width: 100%;
    margin-top: 4px;
    margin-bottom: 8px;
    animation: fadeInPainelGen 0.18s ease-in-out;
}

@keyframes fadeInPainelGen {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Painel Verde: Detalhes Genealógicos */
.painel-genealogia-detalhes {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 4px solid #10b981;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.painel-genealogia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.genealogia-termos-badge {
    font-size: 0.76rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.genealogia-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px 2px;
}

.genealogia-tag-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.genealogia-aviso-limite {
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.search-genealogia-bar {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 3px solid #10b981;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--text-color, #1e293b);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.genealogia-drawer {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 10px;
    margin-top: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.painel-personagem-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 4px solid var(--accent-color, #2563eb);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 6px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.painel-personagem-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.painel-personagem-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-color, #1e293b);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.painel-personagem-desc {
    font-size: 0.85rem;
    color: var(--secondary-color, #64748b);
    margin-top: 2px;
}

.painel-personagem-acoes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.painel-personagem-relacoes {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.85rem;
    line-height: 1.45;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #f1f5f9);
}

.painel-personagem-chip {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 3px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 12px;
    font-size: 0.8rem;
    color: #1d4ed8;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.painel-personagem-chip:hover {
    background: rgba(37, 99, 235, 0.18);
    border-color: #2563eb;
}

.painel-personagem-chip.chip-ref {
    background: rgba(37, 99, 235, 0.08);
    border-color: #3b82f6;
    color: #1d4ed8;
}

.painel-personagem-chip.chip-ref:hover {
    background: rgba(37, 99, 235, 0.2);
    border-color: #2563eb;
}

.desambiguacao-box {
    background: var(--card-bg, #ffffff);
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 10px 14px;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.desambiguacao-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
}

/* ==========================================================================
   PRECISÃO CANÔNICA E SEMÂNTICA: ACABE (REI vs VERBO DAR CABO / DESTRUIR)
   ========================================================================== */

.box-precisao-acabe {
    background: var(--card-bg, #ffffff);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-left: 5px solid #2563eb;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.precisao-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0.85rem;
}

.precisao-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.precisao-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-color, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
}

.precisao-desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--secondary-color, #475569);
    margin-top: 4px;
}

.precisao-chips-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.precisao-chips-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--secondary-color, #64748b);
}

.chip-sentido {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--bg-color, #f8fafc);
    color: var(--text-color, #334155);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chip-sentido:hover {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
}

.chip-sentido.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}

.chip-sentido.chip-rei.active {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.chip-sentido.chip-verbo.active {
    background: #c2410c;
    border-color: #c2410c;
}

.chip-sentido.chip-profeta.active {
    background: #7e22ce;
    border-color: #7e22ce;
}

/* Badges de Sentido no Card do Versículo */
.badge-sentido-acabe {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-left: 8px;
    vertical-align: middle;
}

.badge-sentido-rei {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    border: 1px solid rgba(37, 99, 235, 0.3);
}

.badge-sentido-verbo {
    background: rgba(234, 88, 12, 0.14);
    color: #c2410c;
    border: 1px solid rgba(234, 88, 12, 0.35);
}

.badge-sentido-profeta {
    background: rgba(147, 51, 234, 0.12);
    color: #7e22ce;
    border: 1px solid rgba(147, 51, 234, 0.3);
}

/* Dark Mode Suporte */
[data-theme="dark"] .box-precisao-acabe {
    background: var(--card-bg, #1e293b);
    border-color: rgba(96, 165, 250, 0.3);
    border-left-color: #3b82f6;
}

[data-theme="dark"] .chip-sentido {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .chip-sentido:hover {
    background: rgba(59, 130, 246, 0.18);
    border-color: #60a5fa;
}

[data-theme="dark"] .badge-sentido-rei {
    background: rgba(59, 130, 246, 0.22);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.4);
}

[data-theme="dark"] .badge-sentido-verbo {
    background: rgba(249, 115, 22, 0.22);
    color: #fdba74;
    border-color: rgba(251, 146, 60, 0.4);
}

[data-theme="dark"] .badge-sentido-profeta {
    background: rgba(168, 85, 247, 0.22);
    color: #d8b4fe;
    border-color: rgba(192, 132, 252, 0.4);
}



/* ==========================================================================
   CAMADA DE CONHECIMENTO BÍBLICO - DICIONÁRIO DINÂMICO
   ========================================================================== */

.dict-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 5px solid #2563eb;
    border-radius: 8px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: background-color 0.2s, border-color 0.2s, padding 0.2s, margin-bottom 0.2s;
}

.dict-card.recolhido {
    padding: 0.75rem 1.15rem;
    margin-bottom: 0.9rem;
    opacity: 0.96;
}

.dict-card.recolhido .dict-card-header {
    margin-bottom: 0;
}

.dict-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.dict-card-header:hover {
    filter: brightness(0.97);
}

[data-theme="dark"] .dict-card-header:hover {
    filter: brightness(1.08);
}

.btn-toggle-dict {
    transition: color 0.2s ease;
}

.dict-card-header:hover .btn-toggle-dict {
    color: var(--primary-color);
}

.dict-title-area {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dict-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dict-icon {
    font-size: 1.25rem;
}

.dict-term {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color, #1e293b);
}

.dict-badge-classe {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--secondary-color, #64748b);
    background: rgba(100, 116, 139, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.dict-badge-escopo {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 12px;
    letter-spacing: 0.02em;
}

.badge-escopo-global {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.badge-escopo-trad {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.dict-etimologia-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
}

.dict-badge-strong {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-weight: 600;
}

.dict-badge-lang {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: inherit;
}

.dict-definition-curta {
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-color, #1e293b);
    margin-bottom: 0.65rem;
}

.dict-definition-completa {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary, #475569);
    margin-bottom: 0.85rem;
}

.dict-section {
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--border-color, #e2e8f0);
}

.dict-section-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--secondary-color, #64748b);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dict-section-content {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-color, #334155);
}

.dict-references-section {
    margin-top: 0.85rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.dict-references-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--secondary-color, #64748b);
    margin-bottom: 0.4rem;
}

.dict-references-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dict-ref-chip {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--primary-color, #1e3a8a);
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.dict-ref-chip:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: #3b82f6;
    transform: translateY(-1px);
}

.btn-dict-admin-edit {
    background: transparent;
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--secondary-color, #64748b);
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-dict-admin-edit:hover {
    background: var(--hover-bg, #f1f5f9);
    color: var(--primary-color, #1e3a8a);
}

/* Suporte ao Modo Escuro - Card do Dicionário */
[data-theme="dark"] .dict-card {
    background: var(--card-bg, #18181b);
    border-color: rgba(255, 255, 255, 0.08);
    border-left-color: #3b82f6;
}

[data-theme="dark"] .dict-term {
    color: #f4f4f5;
}

[data-theme="dark"] .dict-badge-classe {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

[data-theme="dark"] .badge-escopo-global {
    background: rgba(37, 99, 235, 0.22);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.35);
}

[data-theme="dark"] .badge-escopo-trad {
    background: rgba(16, 185, 129, 0.22);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.35);
}

[data-theme="dark"] .dict-badge-strong {
    background: rgba(245, 158, 11, 0.2);
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .dict-badge-lang {
    background: rgba(99, 102, 241, 0.22);
    color: #c7d2fe;
    border-color: rgba(165, 180, 252, 0.35);
}

[data-theme="dark"] .dict-definition-curta {
    color: #f4f4f5;
}

[data-theme="dark"] .dict-definition-completa {
    color: #cbd5e1;
}

[data-theme="dark"] .dict-section {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dict-section-title {
    color: #93c5fd;
}

[data-theme="dark"] .dict-section-content {
    color: #e2e8f0;
}

[data-theme="dark"] .dict-references-section {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dict-references-title {
    color: #cbd5e1;
}

[data-theme="dark"] .dict-ref-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

[data-theme="dark"] .dict-ref-chip strong {
    color: #93c5fd;
}

[data-theme="dark"] .dict-ref-chip:hover {
    background: rgba(59, 130, 246, 0.22);
    border-color: #60a5fa;
    color: #ffffff;
}

[data-theme="dark"] .dict-ref-chip:hover strong {
    color: #ffffff;
}

[data-theme="dark"] .btn-dict-admin-edit {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.15);
    color: #93c5fd;
}

[data-theme="dark"] .btn-dict-admin-edit:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #ffffff;
    border-color: #3b82f6;
}

/* Suporte ao Modo Escuro - Genealogia & Personagens (Botões e Painéis) */
[data-theme="dark"] .btn-filtro-personagem {
    background: rgba(37, 99, 235, 0.16);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .btn-filtro-personagem:hover {
    background: rgba(37, 99, 235, 0.28);
    color: #bfdbfe;
    border-color: #60a5fa;
}

[data-theme="dark"] .btn-filtro-personagem.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .btn-filtro-genealogia {
    background: rgba(16, 185, 129, 0.16);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="dark"] .btn-filtro-genealogia:hover {
    background: rgba(16, 185, 129, 0.28);
    color: #a7f3d0;
    border-color: #34d399;
}

[data-theme="dark"] .btn-filtro-genealogia.active {
    background: #059669;
    color: #ffffff;
    border-color: #10b981;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .painel-personagem-card {
    background: var(--card-bg, #18181b);
    border-color: rgba(255, 255, 255, 0.08);
    border-left-color: #3b82f6;
}

[data-theme="dark"] .painel-personagem-desc {
    color: #cbd5e1;
}

[data-theme="dark"] .painel-personagem-chip {
    background: rgba(37, 99, 235, 0.18);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.35);
}

[data-theme="dark"] .painel-personagem-chip:hover {
    background: rgba(37, 99, 235, 0.3);
    color: #bfdbfe;
    border-color: #60a5fa;
}

[data-theme="dark"] .painel-personagem-chip.chip-ref {
    background: rgba(37, 99, 235, 0.18);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.35);
}

[data-theme="dark"] .painel-personagem-chip.chip-ref:hover {
    background: rgba(37, 99, 235, 0.3);
    color: #bfdbfe;
    border-color: #60a5fa;
}

[data-theme="dark"] .painel-genealogia-detalhes {
    background: var(--card-bg, #18181b);
    border-color: rgba(255, 255, 255, 0.08);
    border-left-color: #10b981;
}

[data-theme="dark"] .genealogia-termos-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="dark"] .genealogia-tag-chip {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #86efac;
}

[data-theme="dark"] .genealogia-aviso-limite {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fde68a;
}

[data-theme="dark"] .search-genealogia-bar {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #e2e8f0;
}

[data-theme="dark"] .desambiguacao-box {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fef3c7;
}

[data-theme="dark"] .desambiguacao-item {
    color: #fef3c7;
}

/* Suporte ao Modo Escuro - Expansão Lexical */
[data-theme="dark"] .search-variacoes-bar {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #e2e8f0;
}

[data-theme="dark"] .badge-formas-lexicais {
    background: rgba(59, 130, 246, 0.18);
    color: #cbd5e1;
    border-color: rgba(96, 165, 250, 0.35);
}

[data-theme="dark"] .badge-formas-lexicais strong {
    color: #93c5fd;
}

/* Suporte ao Modo Escuro - Painel Admin do Dicionário */
[data-theme="dark"] .admin-dict-subtab {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

[data-theme="dark"] .admin-dict-subtab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

[data-theme="dark"] .admin-dict-subtab.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #3b82f6;
}

[data-theme="dark"] .admin-dict-table th {
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .admin-dict-table td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    color: #f4f4f5;
}

[data-theme="dark"] .status-publicado {
    background: rgba(16, 185, 129, 0.22);
    color: #6ee7b7;
}

[data-theme="dark"] .status-rascunho {
    background: rgba(245, 158, 11, 0.22);
    color: #fde68a;
}

[data-theme="dark"] .status-arquivado {
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
}

[data-theme="dark"] .admin-dict-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .admin-dict-badge[style*="16,185,129"],
[data-theme="dark"] .admin-dict-badge[style*="047857"],
[data-theme="dark"] .admin-dict-badge[style*="059669"] {
    background: rgba(16, 185, 129, 0.22) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.35);
}

[data-theme="dark"] .admin-dict-badge[style*="37,99,235"],
[data-theme="dark"] .admin-dict-badge[style*="1d4ed8"],
[data-theme="dark"] .admin-dict-badge[style*="2563eb"] {
    background: rgba(37, 99, 235, 0.22) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.35);
}

[data-theme="dark"] .admin-dict-badge[style*="245,158,11"],
[data-theme="dark"] .admin-dict-badge[style*="d97706"],
[data-theme="dark"] .admin-dict-badge[style*="b45309"] {
    background: rgba(245, 158, 11, 0.22) !important;
    color: #fde68a !important;
    border-color: rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] #admin-dict-btn-atalho-importar,
[data-theme="dark"] #admin-dict-btn-baixar-modelo-txt,
[data-theme="dark"] #admin-dict-btn-baixar-modelo-xml {
    color: #6ee7b7 !important;
    border-color: #059669 !important;
    background: rgba(16, 185, 129, 0.12) !important;
}

[data-theme="dark"] #admin-dict-btn-atalho-importar:hover,
[data-theme="dark"] #admin-dict-btn-baixar-modelo-txt:hover,
[data-theme="dark"] #admin-dict-btn-baixar-modelo-xml:hover {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #a7f3d0 !important;
}

[data-theme="dark"] #admin-dict-file-selected-name {
    color: #6ee7b7 !important;
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
}

[data-theme="dark"] #admin-dict-preview-badge {
    background: rgba(37, 99, 235, 0.22) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] #admin-dict-secao-importar h4,
[data-theme="dark"] #admin-dict-secao-importar p {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #admin-dict-secao-vocabulario div[style*="rgba(37,99,235"],
[data-theme="dark"] #admin-dict-secao-importar div[style*="rgba(16,185,129"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] #admin-vocab-table-body td button[style*="1d4ed8"],
[data-theme="dark"] #admin-dict-table-body td button[style*="059669"] {
    color: #6ee7b7 !important;
    border-color: #059669 !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

[data-theme="dark"] #admin-vocab-table-body td button[style*="1d4ed8"]:hover,
[data-theme="dark"] #admin-dict-table-body td button[style*="059669"]:hover {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #a7f3d0 !important;
}

/* Painel Administrativo do Dicionário */
.admin-dict-nav-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding-bottom: 0.5rem;
}

.admin-dict-tab-btn, .admin-dict-subtab {
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 6px;
    background: var(--card-bg, #ffffff);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary-color, #64748b);
    transition: all 0.15s ease;
}

.admin-dict-tab-btn:hover, .admin-dict-subtab:hover {
    background: var(--hover-bg, #f1f5f9);
    color: var(--primary-color, #1e3a8a);
}

.admin-dict-tab-btn.active, .admin-dict-subtab.active {
    background: var(--primary-color, #1e3a8a);
    color: #ffffff;
    border-color: var(--primary-color, #1e3a8a);
}

.admin-dict-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 1rem;
}

.admin-dict-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.admin-dict-table th, .admin-dict-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    text-align: left;
}

.admin-dict-table th {
    background: rgba(0, 0, 0, 0.03);
    font-weight: 600;
    color: var(--secondary-color, #64748b);
}

.admin-dict-status-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
}

.status-publicado {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.status-rascunho {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.status-arquivado {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
}

/* ==========================================================================
   ESTUDO BÍBLICO SISTEMÁTICO: PAI, FILHO E ESPÍRITO SANTO (TRINDADE)
   ========================================================================== */
#form-trindade {
    display: none;
    width: 100%;
}

#form-trindade.active {
    display: block;
}

.trindade-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.trindade-header-banner {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(79, 70, 229, 0.05) 100%);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    position: relative;
}

[data-theme="dark"] .trindade-header-banner {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(30, 41, 59, 0.4) 100%);
    border-color: rgba(37, 99, 235, 0.3);
}

.trindade-banner-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.trindade-main-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color, #1e3a8a);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-theme="dark"] .trindade-main-title {
    color: #93c5fd;
}

.trindade-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.trindade-main-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: var(--secondary-color, #64748b);
    line-height: 1.5;
}

.trindade-stats-row {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-color, #1e293b);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-link-clean {
    background: transparent;
    border: none;
    color: #2563eb;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
}

.btn-link-clean:hover {
    color: #1d4ed8;
}

/* Barra de Filtros e Busca */
.trindade-controls-bar {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .trindade-controls-bar {
        grid-template-columns: 1fr;
    }
}

/* Cards das Seções */
.trindade-secoes-container {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.trindade-secao-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.trindade-secao-card:hover {
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}

.trindade-secao-card.aberta {
    border-color: rgba(37, 99, 235, 0.4);
}

.trindade-secao-header {
    padding: 0.9rem 1.15rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: transparent;
    user-select: none;
}

.trindade-secao-header:hover {
    background: rgba(0, 0, 0, 0.015);
}

[data-theme="dark"] .trindade-secao-header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.trindade-header-info {
    flex: 1;
    min-width: 0;
}

.trindade-header-top-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.trindade-badge-numero {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--secondary-color, #64748b);
    background: rgba(100, 116, 139, 0.1);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.trindade-categoria-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
}

[data-theme="dark"] .trindade-categoria-tag {
    color: #93c5fd;
    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(37, 99, 235, 0.35);
}

.trindade-badge-contagem, .trindade-badge-refs {
    font-size: 0.72rem;
    color: var(--secondary-color, #64748b);
    background: var(--bg-color, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
}

.trindade-secao-titulo {
    margin: 0 0 0.2rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color, #0f172a);
}

.trindade-secao-subtitulo {
    font-size: 0.83rem;
    color: var(--secondary-color, #64748b);
    line-height: 1.4;
}

.trindade-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trindade-btn-copy-sec {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--secondary-color, #64748b);
    transition: all 0.15s ease;
}

.trindade-btn-copy-sec:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--border-color, #cbd5e1);
    color: var(--text-color);
}

[data-theme="dark"] .trindade-btn-copy-sec:hover {
    background: rgba(255, 255, 255, 0.08);
}

.trindade-btn-chevron {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color, #64748b);
}

.chevron-icon {
    transition: transform 0.2s ease;
}

.chevron-icon.rotacionado {
    transform: rotate(180deg);
}

/* Corpo da Seção */
.trindade-secao-body {
    border-top: 1px solid var(--border-color, #e2e8f0);
    padding: 0.75rem 1.15rem 1rem 1.15rem;
    background: var(--card-bg, #ffffff);
}

[data-theme="dark"] .trindade-secao-body {
    background: rgba(15, 23, 42, 0.3);
}

.trindade-itens-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trindade-item-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    transition: background 0.12s ease;
}

.trindade-item-row:hover {
    background: rgba(37, 99, 235, 0.04);
}

[data-theme="dark"] .trindade-item-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.trindade-item-bullet {
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

[data-theme="dark"] .trindade-item-bullet {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.trindade-item-content {
    flex: 1;
    min-width: 0;
}

.trindade-item-text {
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--text-color, #1e293b);
}

.trindade-btn-copy-item {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.2;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: opacity 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.trindade-item-row:hover .trindade-btn-copy-item {
    opacity: 0.8;
}

.trindade-btn-copy-item:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.08);
}

/* Chips de Referências Bíblicas */
.trindade-chips-container {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.trindade-ref-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid #3b82f6;
    color: #1d4ed8;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.15s ease;
}

.trindade-ref-chip:hover {
    background: #2563eb;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
}

[data-theme="dark"] .trindade-ref-chip {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    color: #93c5fd;
}

[data-theme="dark"] .trindade-ref-chip:hover {
    background: #2563eb;
    color: #ffffff;
}

/* Destaque de Busca */
.trindade-highlight {
    background: #fde047;
    color: #854d0e;
    padding: 0.05rem 0.2rem;
    border-radius: 3px;
}

[data-theme="dark"] .trindade-highlight {
    background: #a16207;
    color: #fef08a;
}

/* Loading & Estados Vazios */
.trindade-loading, .trindade-vazio, .trindade-erro {
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
}

.trindade-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(37, 99, 235, 0.2);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: trindade-spin 0.8s linear infinite;
    margin: 0 auto 1rem auto;
}

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

/* Modal de Preview Rápido de Versículo */
#modal-trindade-preview .modal-content {
    max-width: 600px;
}

.trindade-preview-conteudo {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.trindade-preview-cabecalho {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.trindade-preview-trad-badge {
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.trindade-preview-ref-txt {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color, #1e293b);
}

.trindade-preview-versos-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.trindade-preview-verso-row {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}

.trindade-preview-verso-num {
    font-weight: 700;
    font-size: 0.82rem;
    color: #2563eb;
    min-width: 22px;
    flex-shrink: 0;
}

.trindade-preview-verso-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-color, #1e293b);
}

.trindade-preview-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

/* Toast de Notificação */
.trindade-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #0f172a;
    color: #f8fafc;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(12px);
    transition: all 0.25s ease;
    pointer-events: none;
    z-index: 10000;
}

.trindade-toast.visivel {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   TEXTOS RELACIONADOS - ESTILOS DO MODAL E COMPONENTES
   ========================================================================== */

.modal-related-content {
    max-width: 850px;
    width: 95%;
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: var(--shadow-lg);
}

/* Card Versículo Base */
.related-base-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-color);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.related-base-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 8px;
}

.related-base-ref-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.related-badge-base-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(16, 185, 129, 0.12);
    color: var(--accent-color);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.related-base-ref {
    font-size: 1.1rem;
    color: var(--text-color);
}

.related-base-text {
    font-style: italic;
    font-size: var(--bible-font-size, 1.05rem);
    line-height: var(--bible-line-height, 1.75);
    color: var(--text-color);
}

/* Barra de Abas Dinâmicas */
.related-tabs-bar {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
    scrollbar-width: thin;
}

.related-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.related-tab-btn:hover {
    background: var(--card-bg);
    border-color: var(--accent-color);
    color: var(--text-color);
}

.related-tab-btn.active {
    background: var(--accent-color);
    color: #ffffff;
    border-color: var(--accent-color);
    font-weight: 600;
}

.related-tab-badge {
    background: rgba(0, 0, 0, 0.08);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.75rem;
}

.related-tab-btn.active .related-tab-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Cards de Versículos Relacionados */
.related-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.85rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.related-card:hover {
    box-shadow: var(--shadow-md);
}

.related-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.5rem;
}

.related-card-ref-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.related-badges-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Badges */
.badge-rel-cadastrada {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.badge-tipo-citacao {
    background: rgba(147, 51, 234, 0.1);
    color: #9333ea;
    border-color: rgba(147, 51, 234, 0.25);
}

.badge-tipo-profecia {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.3);
}

.badge-tipo-paralelo {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.25);
}

.badge-tipo-tematico {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
    border-color: rgba(100, 116, 139, 0.25);
}

.badge-rel-similarity {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
}

.badge-rel-score {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

.score-high {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.score-medium-high {
    background: rgba(6, 182, 212, 0.15);
    color: #0891b2;
}

.score-medium {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.score-low {
    background: rgba(107, 114, 128, 0.15);
    color: #4b5563;
}

/* Texto do card */
.related-card-text {
    font-size: var(--bible-font-size, 1.05rem);
    line-height: var(--bible-line-height, 1.75);
    color: var(--text-color);
    margin: 0.5rem 0;
}

/* Motivos / Explicabilidade */
.related-reasons-details {
    margin: 0.5rem 0;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    font-size: 0.83rem;
}

.related-reasons-summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    user-select: none;
}

.related-reasons-summary:hover {
    color: var(--text-color);
}

.related-reasons-list {
    margin: 0.4rem 0 0.2rem 1.2rem;
    padding: 0;
    color: var(--text-secondary);
}

.related-reasons-list li {
    margin-bottom: 0.2rem;
}

/* Botões de Ação do Card */
.related-card-actions {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.btn-related-explore {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-color);
    border-color: rgba(16, 185, 129, 0.3);
    font-weight: 600;
}

.btn-related-explore:hover {
    background: var(--accent-color);
    color: #ffffff;
}

/* Estado Vazio */
.related-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-secondary);
}

/* Modo Escuro */
[data-theme="dark"] .badge-rel-similarity {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

[data-theme="dark"] .badge-tipo-citacao {
    color: #c084fc;
    background: rgba(192, 132, 252, 0.15);
    border-color: rgba(192, 132, 252, 0.3);
}

[data-theme="dark"] .badge-tipo-profecia {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .badge-tipo-paralelo {
    color: #34d399;
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .score-high {
    color: #34d399;
    background: rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .score-medium-high {
    color: #22d3ee;
    background: rgba(34, 211, 238, 0.2);
}

[data-theme="dark"] .score-medium {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .score-low {
    color: #9ca3af;
    background: rgba(156, 163, 175, 0.2);
}

[data-theme="dark"] .related-tab-badge {
    background: rgba(255, 255, 255, 0.1);
}

/* ================= NAVEGAÇÃO GLOBAL DE REFERÊNCIAS BÍBLICAS ================= */
.biblia-ref-link, .reference-clickable {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease, text-decoration 0.15s ease;
}

.biblia-ref-link:hover, .reference-clickable:hover {
    color: var(--accent-color, #2563eb) !important;
    text-decoration: underline !important;
}

.biblia-ref-link:focus, .reference-clickable:focus {
    outline: 2px solid var(--accent-color, #2563eb);
    outline-offset: 2px;
}

/* ================= SEÇÃO INLINE DE TEXTOS RELACIONADOS (FORM-REF) ================= */
.related-inline-section {
    margin-top: 1.75rem;
    border-top: 2px dashed var(--border-color, #e2e8f0);
    padding-top: 1.5rem;
}

.related-inline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 8px;
}

.related-inline-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color, #2563eb);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.related-inline-badge {
    background: rgba(37, 99, 235, 0.12);
    color: var(--primary-color, #2563eb);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
}

.related-inline-grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

[data-theme="dark"] .related-inline-section {
    border-top-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .related-inline-title {
    color: #60a5fa;
}

[data-theme="dark"] .related-inline-badge {
    background: rgba(96, 165, 250, 0.2);
    color: #93c5fd;
}

/* Botão Recolher/Expandir da Seção Inline */
.btn-toggle-related-inline {
    background: transparent;
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--text-color, #334155);
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-toggle-related-inline:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
    border-color: var(--primary-color, #2563eb);
    color: var(--primary-color, #2563eb);
}

.related-inline-section.recolhido .related-inline-body {
    display: none !important;
}

/* Chips / Filtros Rápidos por Categoria da Seção Inline */
.related-inline-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 1rem;
}

.related-inline-filter-btn {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-color, #475569);
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.related-inline-filter-btn:hover {
    border-color: var(--primary-color, #2563eb);
    color: var(--primary-color, #2563eb);
    transform: translateY(-1px);
}

.related-inline-filter-btn.active {
    background: var(--primary-color, #2563eb);
    color: #ffffff;
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

.related-inline-filter-count {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 5px;
    border-radius: 9999px;
    font-size: 0.72rem;
}

.related-inline-filter-btn.active .related-inline-filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.related-inline-load-more {
    text-align: center;
    margin-top: 1rem;
    padding-top: 0.5rem;
}

/* Barra de Histórico de Navegação no Leitor */
.leitura-historico-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(59, 130, 246, 0.04));
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    margin-bottom: 1rem;
    gap: 8px;
    animation: fadeInSlideDown 0.3s ease;
}

@keyframes fadeInSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.btn-leitura-voltar-historico {
    background: transparent;
    border: none;
    color: var(--primary-color, #2563eb);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    text-align: left;
}

.btn-leitura-voltar-historico:hover {
    text-decoration: underline;
}

.btn-leitura-limpar-historico {
    background: transparent;
    border: none;
    color: var(--secondary-color, #64748b);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.btn-leitura-limpar-historico:hover {
    color: #ef4444;
}

/* Ações Rápidas no Versículo da Leitura (Opção 1: Linha Própria Abaixo do Texto) */
.leitura-verso {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100%;
    transition: background 0.15s ease;
}

.leitura-verso:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.02));
}

.leitura-verso-conteudo {
    display: flex;
    align-items: baseline;
    gap: 6px;
    width: 100%;
    line-height: var(--bible-line-height, 1.75);
    font-size: var(--bible-font-size, 1.05rem);
    word-break: break-word;
}

.leitura-verso-num-btn {
    background: transparent;
    border: none;
    padding: 2px 6px;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 6px;
    transition: all 0.15s ease;
    vertical-align: baseline;
    flex-shrink: 0;
    text-decoration: none;
}

.leitura-verso-num-btn:hover,
.leitura-verso-num-btn:focus-visible {
    background: var(--bg-hover, rgba(37, 99, 235, 0.12));
    outline: none;
}

.leitura-verso-num {
    color: var(--accent-color, #2563eb);
    font-weight: 700;
    font-size: 0.95rem;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: text-decoration 0.1s ease;
}

.leitura-verso-num-btn:hover .leitura-verso-num,
.leitura-verso-num-btn:hover .verse-num {
    text-decoration: underline;
}

.verse-item .leitura-verso-num-btn {
    align-self: flex-start;
    margin-right: 0.5rem;
}

.leitura-verso-num-btn .verse-num {
    margin-right: 0;
    padding-top: 0;
    min-width: unset;
}

.leitura-verso-nota-dot {
    font-size: 0.76rem;
    line-height: 1;
    display: inline-block;
}

.leitura-verso-texto {
    flex: 1;
    word-break: break-word;
    cursor: text;
    border-radius: 4px;
}

/* Responsividade de leitura para celular */
@media (max-width: 768px) {
    .leitura-verso {
        padding: 0.4rem 0.25rem;
        margin-bottom: 0.55rem;
    }
    .leitura-verso-num-btn {
        padding: 4px 8px;
        min-height: 32px; /* Touch-target confortável */
    }
}

/* ===================================================
   MODAL / BOTTOM SHEET DE AÇÕES DO VERSÍCULO
   =================================================== */

#modal-acoes-verso {
    z-index: 99999;
    align-items: flex-end; /* Padrão mobile: Bottom Sheet */
    justify-content: center;
}

.modal-acoes-verso-content {
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1e293b);
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.22);
    width: 100%;
    max-width: 520px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 1.1rem 1.3rem 1.6rem;
    box-sizing: border-box;
    animation: sheetSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
}

@keyframes sheetSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0.6;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-sheet-handle-bar {
    width: 42px;
    height: 5px;
    background: var(--border-color, #cbd5e1);
    border-radius: 3px;
    margin: 0 auto 12px auto;
    cursor: pointer;
    transition: background 0.15s ease;
}

.modal-sheet-handle-bar:hover {
    background: var(--text-muted, #94a3b8);
}

.modal-acoes-verso-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.modal-acoes-verso-ref-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-acoes-verso-icon {
    font-size: 1.2rem;
}

.modal-acoes-verso-titulo {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color, #1e293b);
}

.modal-acoes-verso-preview {
    background: var(--bg-hover, rgba(0, 0, 0, 0.03));
    border-left: 3px solid var(--accent-color, #2563eb);
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 14px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.95rem;
    line-height: 1.6;
    max-height: 90px;
    overflow-y: auto;
}

.modal-acoes-verso-num-badge {
    font-weight: 700;
    color: var(--accent-color, #2563eb);
    font-size: 0.88rem;
    flex-shrink: 0;
}

.modal-acoes-verso-texto {
    color: var(--text-color, #334155);
    font-style: italic;
}

/* Seção 1: Marcador / Marca-texto Rápido */
.modal-acoes-secao.modal-acoes-marcador {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--bg-hover, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
}

.modal-acoes-secao-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.88rem;
}

.modal-secao-label {
    font-weight: 600;
    color: var(--text-color, #475569);
}

.modal-acoes-cor-status {
    font-size: 0.8rem;
    color: var(--secondary-color, #64748b);
    font-weight: 500;
}

.modal-acoes-palette {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 2px 0;
}

.btn-palette-choice {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
}

.btn-palette-choice:hover {
    transform: scale(1.18);
}

.btn-palette-choice.active {
    transform: scale(1.22);
    box-shadow: 0 0 0 2px var(--card-bg, #fff), 0 0 0 4px var(--accent-color, #2563eb);
}

.btn-palette-choice.cor-amarelo {
    background: #fef08a;
    border-color: #eab308;
}

.btn-palette-choice.cor-verde {
    background: #bbf7d0;
    border-color: #22c55e;
}

.btn-palette-choice.cor-azul {
    background: #bfdbfe;
    border-color: #3b82f6;
}

.btn-palette-choice.cor-rosa {
    background: #fbcfe8;
    border-color: #ec4899;
}

.btn-palette-choice.cor-roxo {
    background: #e9d5ff;
    border-color: #a855f7;
}

.btn-palette-choice.cor-laranja {
    background: #fed7aa;
    border-color: #f97316;
}

.btn-palette-choice.cor-ciano {
    background: #a5f3fc;
    border-color: #06b6d4;
}

.btn-palette-choice.cor-vermelho {
    background: #fecaca;
    border-color: #ef4444;
}

.btn-palette-choice.cor-ambar {
    background: #fde68a;
    border-color: #d97706;
}

.btn-palette-choice.cor-cinza {
    background: #e2e8f0;
    border-color: #64748b;
}

.btn-palette-choice.cor-limpar {
    background: transparent;
    border: 1px dashed var(--border-color, #cbd5e1);
    color: var(--text-color, #64748b);
    font-size: 13px;
    font-weight: bold;
}

.btn-palette-choice.cor-limpar:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* Seção 2: Lista de Ações */
.modal-acoes-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-modal-acao {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    color: var(--text-color, #1e293b);
    box-sizing: border-box;
}

.btn-modal-acao:hover,
.btn-modal-acao:focus-visible {
    background: var(--bg-hover, rgba(37, 99, 235, 0.05));
    border-color: var(--accent-color, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.btn-modal-acao .acao-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.btn-modal-acao .acao-detalhes {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.btn-modal-acao .acao-titulo {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color, #1e293b);
}

.btn-modal-acao .acao-subtitulo {
    font-size: 0.8rem;
    color: var(--secondary-color, #64748b);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-modal-acao .acao-arrow {
    font-size: 1.2rem;
    color: var(--border-color, #94a3b8);
    font-weight: 600;
}

.btn-modal-acao:hover .acao-arrow {
    color: var(--accent-color, #2563eb);
}

.acao-feedback-badge {
    background: #10b981;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
}

/* Adaptação Desktop para o Modal */
@media (min-width: 769px) {
    #modal-acoes-verso {
        align-items: center; /* Centralizado no desktop */
    }

    .modal-acoes-verso-content {
        border-radius: 14px;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
        animation: modalScaleUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
        padding: 1.4rem 1.6rem;
    }

    .modal-sheet-handle-bar {
        display: none;
    }
}

@keyframes modalScaleUp {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Dark Mode para Modal de Ações */
[data-theme="dark"] .modal-acoes-verso-content {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .modal-acoes-verso-titulo {
    color: #f8fafc;
}

[data-theme="dark"] .modal-acoes-verso-preview {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .modal-acoes-verso-texto {
    color: #cbd5e1;
}

[data-theme="dark"] .modal-acoes-secao.modal-acoes-marcador {
    background: rgba(255, 255, 255, 0.03);
    border-color: #334155;
}

[data-theme="dark"] .modal-secao-label {
    color: #cbd5e1;
}

[data-theme="dark"] .btn-modal-acao {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .btn-modal-acao:hover {
    background: #1e293b;
    border-color: #60a5fa;
}

[data-theme="dark"] .btn-modal-acao .acao-titulo {
    color: #f1f5f9;
}

[data-theme="dark"] .btn-palette-choice.active {
    box-shadow: 0 0 0 2px #1e293b, 0 0 0 4px #60a5fa;
}

/* Tooltip Global de Preview Bíblico ao Passar o Mouse */
.biblia-hover-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: 320px;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1e293b);
    border: 1px solid var(--border-color, #cbd5e1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.88rem;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.biblia-hover-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.biblia-hover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    font-weight: 700;
    color: var(--primary-color, #2563eb);
    font-size: 0.85rem;
}

.biblia-hover-body {
    color: var(--text-color, #334155);
    font-style: italic;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.biblia-hover-footer {
    font-size: 0.72rem;
    color: var(--secondary-color, #64748b);
    text-align: right;
}

[data-theme="dark"] .biblia-hover-tooltip {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .biblia-hover-header {
    color: #60a5fa;
    border-bottom-color: #334155;
}

[data-theme="dark"] .biblia-hover-body {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-toggle-related-inline {
    border-color: #475569;
    color: #cbd5e1;
}

[data-theme="dark"] .related-inline-filter-btn {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .related-inline-filter-btn.active {
    background: #2563eb;
    color: #ffffff;
}

/* ===================================================
   VERSÍCULOS INTERATIVOS EM TODOS OS MODAIS
   =================================================== */

#modal-acoes-verso {
    z-index: 999999 !important;
}

.context-verse-item {
    transition: background 0.15s ease;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
}

.context-verse-item:hover {
    background: var(--bg-hover, rgba(37, 99, 235, 0.04));
}

.btn-context-action-dots {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--secondary-color, #64748b);
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.btn-context-action-dots:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.06));
    color: var(--primary-color, #2563eb);
}

.context-verse-text {
    cursor: pointer;
    transition: color 0.12s ease;
}

.context-verse-text:hover {
    color: var(--primary-color, #2563eb);
}

.comparacao-trad-badge-btn {
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg-hover, rgba(37, 99, 235, 0.06));
    border: 1px solid var(--border-color, #cbd5e1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.comparacao-action-hint {
    font-size: 0.75rem;
    color: var(--accent-color, #2563eb);
    font-weight: 500;
}

.comparacao-verse-text {
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.comparacao-verse-text:hover {
    background: var(--bg-hover, rgba(37, 99, 235, 0.04));
}

.related-card-text {
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.12s ease;
}

.related-card-text:hover {
    background: var(--bg-hover, rgba(37, 99, 235, 0.04));
    color: var(--primary-color, #2563eb);
}

.related-base-text {
    cursor: pointer;
    transition: color 0.12s ease;
}

.related-base-text:hover {
    color: var(--primary-color, #2563eb);
}

.trindade-preview-verso-row {
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.trindade-preview-verso-row:hover {
    background: var(--bg-hover, rgba(37, 99, 235, 0.04));
}

.trindade-verso-num-btn {
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/* Dark Mode para versículos interativos nos modais */
[data-theme="dark"] .comparacao-trad-badge-btn {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .context-verse-item:hover,
[data-theme="dark"] .comparacao-verse-text:hover,
[data-theme="dark"] .related-card-text:hover,
[data-theme="dark"] .trindade-preview-verso-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .btn-context-action-dots:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #60a5fa;
}

/* Blocos de Intervalo de Capítulos Bíblicos (ex: Gênesis 1-3) */
.capitulo-intervalo-bloco {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.capitulo-intervalo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.9rem;
    background: var(--bg-hover, rgba(37, 99, 235, 0.06));
    border-radius: 8px;
    border-left: 4px solid var(--accent-color, #2563eb);
    margin-bottom: 0.65rem;
    transition: background-color 0.2s ease;
}

[data-theme="dark"] .capitulo-intervalo-header {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: #60a5fa;
}

/* Blocos de Intervalo Entre Livros (ex: João 3 - Atos 5) */
.livro-intervalo-bloco {
    margin-top: 1.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 1.15rem;
    background: var(--card-bg, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.livro-intervalo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 8px;
    border-left: 5px solid var(--primary-color, #1e3a8a);
    margin-bottom: 1rem;
}

[data-theme="dark"] .livro-intervalo-bloco {
    border-color: rgba(255, 255, 255, 0.1);
    background: var(--card-bg, #1e293b);
}

[data-theme="dark"] .livro-intervalo-header {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: #3b82f6;
}

.livro-intervalo-titulo {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-color, #0f172a);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.livro-intervalo-badge-meta {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--secondary-color, #64748b);
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
}

[data-theme="dark"] .livro-intervalo-badge-meta {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

/* ================= ABA ANOTAÇÕES - CARDS E PASSAGENS RETRÁTEIS ================= */
.anotacoes-toolbar-acoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.2rem;
    padding: 0.6rem 0.8rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.anotacoes-contador {
    font-size: 0.9rem;
    color: var(--secondary-color);
}

.anotacoes-botoes-grupo {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

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

/* Card Retrátil de Anotação */
.anotacao-card-retratil {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    overflow: hidden;
}

.anotacao-card-retratil:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-color);
}

/* Cabeçalho do Card (Clicável) */
.anotacao-card-header {
    padding: 0.85rem 1rem;
    cursor: pointer;
    user-select: none;
    background: transparent;
    transition: background-color 0.15s ease;
}

.anotacao-card-header:hover {
    background: rgba(37, 99, 235, 0.03);
}

[data-theme="dark"] .anotacao-card-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.anotacao-card-header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.anotacao-card-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.anotacao-badge-resumo {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.75rem;
    color: var(--secondary-color);
    font-weight: 500;
}

.anotacao-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-toggle-card {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: var(--secondary-color);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-toggle-card:hover {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.anotacao-card-chevron {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.anotacao-card-preview-linha {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

/* Corpo do Card Retrátil */
.anotacao-card-body {
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.2rem;
    animation: fadeInAnotacao 0.2s ease;
}

@keyframes fadeInAnotacao {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Bloco de Passagem Bíblica (Dentro do Card) */
.anotacao-bloco-passagem {
    margin-top: 0.85rem;
    margin-bottom: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-color);
}

.btn-toggle-passagem {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-color);
    text-align: left;
    transition: background 0.15s ease;
}

.btn-toggle-passagem:hover {
    background: rgba(37, 99, 235, 0.05);
}

[data-theme="dark"] .btn-toggle-passagem:hover {
    background: rgba(255, 255, 255, 0.05);
}

.passagem-header-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.passagem-header-hint {
    font-size: 0.75rem;
    color: var(--secondary-color);
    margin-left: 6px;
}

.passagem-chevron {
    font-size: 0.75rem;
    color: var(--secondary-color);
    transition: transform 0.2s ease;
}

.anotacao-passagem-conteudo {
    padding: 0.75rem 0.85rem;
    border-top: 1px dashed var(--border-color);
    background: var(--card-bg);
}

.anotacao-passagem-citacao {
    margin: 0;
    font-size: var(--bible-font-size, 1rem);
    line-height: var(--bible-line-height, 1.6);
    color: var(--text-color);
    border-left: 3px solid var(--accent-color);
    padding-left: 0.75rem;
    font-style: normal;
}

.anotacao-passagem-num {
    font-weight: 700;
    color: var(--accent-color);
    font-size: 0.85em;
    margin-right: 4px;
}

.anotacao-passagem-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.6rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-color);
}

/* Bloco da Anotação (Texto Grande) */
.anotacao-bloco-nota {
    margin-top: 0.85rem;
}

.anotacao-bloco-nota-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    color: var(--secondary-color);
}

.anotacao-bloco-titulo {
    font-weight: 600;
}

.anotacao-conteudo {
    background: var(--bg-color);
    padding: 0.85rem 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    border-left: 4px solid var(--accent-color);
    max-height: 420px;
    overflow-y: auto;
}

.anotacao-apenas-destaque {
    font-style: italic;
    color: var(--secondary-color);
    font-size: 0.85rem;
    padding: 0.4rem 0;
}

/* ================= CAIXA DE NOTA RETRÁTIL NAS PASSAGENS (LEITURA E BUSCA) ================= */
.nota-box.nota-box-collapsible {
    padding: 0;
}

.nota-box-collapsible {
    border-radius: 8px;
    margin-top: 8px;
    margin-bottom: 12px;
    border-left: 4px solid var(--accent-color);
    background-color: var(--highlight-bg, rgba(37, 99, 235, 0.08));
    overflow: hidden;
    transition: all 0.2s ease;
}

.nota-box-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.88rem;
    color: var(--highlight-text, var(--text-color));
    transition: background-color 0.15s ease;
}

.nota-box-toggle:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .nota-box-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
}

.nota-box-header-title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.nota-box-preview-resumo {
    flex: 1;
    font-size: 0.82rem;
    color: var(--secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
    padding: 0 6px;
}

.nota-box-chevron {
    font-size: 0.72rem;
    color: var(--secondary-color);
    transition: transform 0.2s ease;
}

.nota-box-corpo {
    padding: 8px 14px 12px 14px;
    border-top: 1px dashed var(--border-color);
    background: var(--card-bg);
}

.nota-box-texto {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: calc(var(--bible-font-size, 1rem) * 0.92);
    line-height: 1.6;
    color: var(--text-color);
    max-height: 380px;
    overflow-y: auto;
}

.nota-box-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}

/* ================= MODAL ANOTAÇÃO PESSOAL (TELA CHEIA & CAMPO QUADRADO) ================= */
#modal-nota {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: rgba(0, 0, 0, 0.65) !important;
    z-index: 10000 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#modal-nota[style*="block"],
#modal-nota[style*="flex"] {
    display: flex !important;
}

.modal-nota-fullscreen-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 20px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--card-bg) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: none !important;
}

/* Header do Modal */
.modal-nota-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.modal-nota-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-nota-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.modal-nota-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color);
}

.modal-nota-badges {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nota-badge-ref {
    display: inline-block;
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

[data-theme="dark"] .nota-badge-ref {
    background-color: #3b82f6;
    color: #ffffff;
}

.modal-nota-close {
    position: static !important;
    font-size: 32px;
    font-weight: 400;
    color: var(--secondary-color);
    cursor: pointer;
    background: transparent;
    border: none;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.modal-nota-close:hover {
    color: var(--text-color);
    background-color: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .modal-nota-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Pré-visualização do Versículo no Topo */
.nota-verse-preview {
    margin-top: 12px;
    padding: 10px 16px;
    background-color: var(--bg-color);
    border-left: 4px solid var(--accent-color, #10b981);
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-color);
    max-height: 90px;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.nota-verse-quote-icon {
    font-size: 1.8rem;
    line-height: 0.8;
    color: var(--accent-color, #10b981);
    font-family: Georgia, serif;
    font-weight: bold;
}

.nota-verse-preview-text {
    font-style: italic;
    color: var(--text-color);
}

/* Área de Escrita: Estritamente Quadrada (sem arredondamento descomunal) */
.modal-nota-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    min-height: 0; /* Essencial para flexbox interno preencher tela cheia sem scroll externo */
}

.nota-label-editor {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color);
    flex-shrink: 0;
}

#nota-texto,
.nota-textarea-full {
    flex: 1 !important;
    width: 100% !important;
    min-height: 160px !important;
    border-radius: 4px !important; /* Totalmente quadrado, sem arredondamento excessivo */
    border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    padding: 16px 20px !important;
    font-size: 1.15rem !important;
    line-height: 1.65 !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    resize: none !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}

[data-theme="dark"] #nota-texto,
[data-theme="dark"] .nota-textarea-full {
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    background-color: #121215 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

#nota-texto:focus,
.nota-textarea-full:focus {
    outline: none !important;
    border-color: var(--accent-color, #10b981) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
    background-color: var(--card-bg) !important;
}

/* Barra Inferior / Rodapé */
.modal-nota-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-nota-paleta-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.modal-nota-paleta-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nota-label-paleta {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-color);
}

.nota-cor-selecionada-badge {
    font-size: 0.82rem;
    padding: 2px 10px;
    border-radius: 4px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--secondary-color);
    font-weight: 600;
}

.modal-nota-palette-grid {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Botões de Cores do Modal Nota */
.btn-cor-choice {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
}

.btn-cor-choice:hover {
    transform: scale(1.18);
}

.btn-cor-choice.active {
    transform: scale(1.22);
    box-shadow: 0 0 0 2px var(--card-bg, #ffffff), 0 0 0 4px var(--accent-color, #10b981);
}

.btn-cor-choice.cor-amarelo {
    background-color: #fef08a;
    border-color: #eab308;
}

.btn-cor-choice.cor-verde {
    background-color: #bbf7d0;
    border-color: #22c55e;
}

.btn-cor-choice.cor-azul {
    background-color: #bfdbfe;
    border-color: #3b82f6;
}

.btn-cor-choice.cor-rosa {
    background-color: #fbcfe8;
    border-color: #ec4899;
}

.btn-cor-choice.cor-roxo {
    background-color: #e9d5ff;
    border-color: #a855f7;
}

.btn-cor-choice.cor-laranja {
    background-color: #fed7aa;
    border-color: #f97316;
}

.btn-cor-choice.cor-ciano {
    background-color: #a5f3fc;
    border-color: #06b6d4;
}

.btn-cor-choice.cor-vermelho {
    background-color: #fecaca;
    border-color: #ef4444;
}

.btn-cor-choice.cor-ambar {
    background-color: #fde68a;
    border-color: #d97706;
}

.btn-cor-choice.cor-cinza {
    background-color: #e2e8f0;
    border-color: #64748b;
}

.btn-cor-choice.cor-limpar {
    background: transparent;
    border: 1.5px dashed var(--border-color, #cbd5e1);
    color: var(--text-color, #64748b);
    font-size: 13px;
    font-weight: bold;
}

.btn-cor-choice.cor-limpar:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* Botões de Ação Inferiores */
.modal-nota-acoes-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.btn-excluir-nota-styled {
    border: 1.5px solid #ef4444 !important;
    background: transparent !important;
    color: #ef4444 !important;
    padding: 10px 24px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-excluir-nota-styled:hover {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

.btn-salvar-nota-styled {
    background-color: var(--accent-color, #10b981) !important;
    border: 1.5px solid var(--accent-color, #10b981) !important;
    color: #ffffff !important;
    padding: 10px 32px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-salvar-nota-styled:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.nota-feedback-msg {
    text-align: center;
    margin-top: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Responsividade Mobile do Modal de Nota Fullscreen */
@media (max-width: 768px) {
    .modal-nota-fullscreen-content {
        padding: 14px 16px !important;
    }

    .modal-nota-paleta-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .modal-nota-palette-grid {
        gap: 6px;
        width: 100%;
    }

    .btn-cor-choice {
        width: 27px;
        height: 27px;
    }

    .modal-nota-acoes-bar {
        width: 100%;
        display: flex;
    }

    .btn-excluir-nota-styled,
    .btn-salvar-nota-styled {
        flex: 1;
        text-align: center;
        padding: 10px 12px !important;
    }
}

/* ==========================================================================
   Central de Planos de Leitura Bíblica, Hábitos e Estatísticas (100% Responsivo)
   ========================================================================== */

#form-cronograma {
    display: none;
    width: 100%;
    margin: 0 auto;
    padding: 0.5rem 0;
    box-sizing: border-box;
}

#form-cronograma.active {
    display: block;
}

.cronograma-header-secao {
    margin-bottom: 1.5rem;
    text-align: left;
}

.cronograma-secao-titulo {
    font-size: clamp(1.35rem, 4vw, 1.85rem);
    font-weight: 800;
    margin: 0 0 0.35rem 0;
    color: var(--text-color);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.cronograma-secao-sub {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.45;
}

/* Dashboard de Estatísticas */
.cronograma-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1050px) {
    .cronograma-dashboard {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }
}

@media (max-width: 580px) {
    .cronograma-dashboard {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.cronograma-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.9rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.cronograma-stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

.stat-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    font-size: 1.35rem;
    background: rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    line-height: 1;
}

[data-theme="dark"] .stat-card-icon {
    background: rgba(255, 255, 255, 0.06);
}

.card-streak .stat-card-icon {
    background: rgba(245, 158, 11, 0.15);
}

.card-progresso .stat-card-icon {
    background: rgba(59, 130, 246, 0.15);
}

.card-tempo .stat-card-icon {
    background: rgba(16, 185, 129, 0.15);
}

.card-proxima .stat-card-icon {
    background: rgba(16, 185, 129, 0.2);
}

.card-proxima {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(37, 99, 235, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.35);
}

[data-theme="dark"] .card-proxima {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(37, 99, 235, 0.09) 100%);
    border-color: rgba(16, 185, 129, 0.4);
}

.stat-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.stat-card-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.stat-card-value {
    font-size: clamp(1.4rem, 3.5vw, 1.85rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-color);
    margin-bottom: 0.3rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.stat-card-unit {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.stat-card-sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.35;
    word-break: break-word;
}

/* Mini barras de progresso AT / NT */
.stat-bars-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.45rem;
    width: 100%;
}

.stat-mini-bar-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mini-bar-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.progress-bar-bg {
    width: 100%;
    height: 7px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 999px;
    overflow: hidden;
}

[data-theme="dark"] .progress-bar-bg {
    background: rgba(255, 255, 255, 0.1);
}

.progress-bar-bg.grande {
    height: 10px;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #3b82f6;
}

.progress-bar-fill.fill-at {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.progress-bar-fill.fill-nt {
    background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
}

.progress-bar-fill.fill-accent {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

/* Próxima Leitura */
.stat-card-proxima-ref {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.2rem;
    line-height: 1.25;
}

.btn-continuar-leitura {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 0.65rem;
    padding: 0.55rem 0.9rem;
    background: #10b981;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.86rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.28);
    min-height: 38px;
    box-sizing: border-box;
}

.btn-continuar-leitura:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.38);
}

.btn-continuar-leitura:active {
    transform: translateY(0);
}

/* Navegação por Abas/Pills de Planos */
.cronograma-planos-nav {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
    padding: 0.2rem 0.1rem 0.75rem 0.1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    scroll-padding: 0.5rem;
}

.cronograma-planos-nav::-webkit-scrollbar {
    height: 5px;
}

.cronograma-planos-nav::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.cronograma-plano-pill,
.cronograma-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1rem;
    font-family: inherit;
    color: var(--text-secondary);
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: left;
    min-height: 48px;
    box-sizing: border-box;
}

.cronograma-plano-pill:hover,
.cronograma-nav-pill:hover {
    color: var(--text-color);
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.05);
    transform: translateY(-1px);
}

.cronograma-plano-pill:active,
.cronograma-nav-pill:active {
    transform: translateY(0);
}

.cronograma-plano-pill.active,
.cronograma-nav-pill.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #059669 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

[data-theme="dark"] .cronograma-plano-pill.active,
[data-theme="dark"] .cronograma-nav-pill.active {
    color: #042f2e !important;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
    border-color: #34d399 !important;
    box-shadow: 0 4px 16px rgba(52, 211, 153, 0.35);
}

.plano-pill-icon {
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.plano-pill-texts {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.plano-pill-title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
}

.plano-pill-progress {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.85;
}

.cronograma-plano-pill.active .plano-pill-progress {
    opacity: 0.95;
    font-weight: 600;
}

/* Painel do Plano Selecionado */
.cronograma-plano-detalhe,
.cronograma-plano-painel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    width: 100%;
}

.plano-detalhe-top,
.plano-detalhe-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.plano-detalhe-titulos,
.plano-detalhe-info {
    flex: 1;
    min-width: min(100%, 280px);
}

.plano-detalhe-title,
.plano-detalhe-titulo {
    font-size: clamp(1.2rem, 3.5vw, 1.55rem);
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 0.35rem 0;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.plano-detalhe-desc {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.plano-detalhe-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.badge-plano-ativo-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 0.9rem;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

[data-theme="dark"] .badge-plano-ativo-status {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.35);
}

/* Barra de Progresso do Plano */
.plano-progresso-bar-wrap {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding: 0.85rem 1.15rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}

[data-theme="dark"] .plano-progresso-bar-wrap {
    background: rgba(255, 255, 255, 0.02);
}

.plano-progresso-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

/* Lista de Dias / Checklist */
.cronograma-dias-lista {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.75rem;
    width: 100%;
}

.cronograma-dia-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.15rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.cronograma-dia-row:hover {
    border-color: rgba(16, 185, 129, 0.35);
    background-color: rgba(16, 185, 129, 0.02);
}

.cronograma-dia-row.dia-concluido {
    background-color: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .cronograma-dia-row.dia-concluido {
    background-color: rgba(16, 185, 129, 0.08);
    border-color: rgba(52, 211, 153, 0.22);
}

/* Custom Checkbox */
.cronograma-check-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    margin: 0;
    flex-shrink: 0;
    min-width: 28px;
    min-height: 28px;
}

.cronograma-check-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.cronograma-checkmark {
    position: relative;
    display: inline-block;
    height: 22px;
    width: 22px;
    background-color: transparent;
    border: 2px solid var(--secondary-color);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.cronograma-check-wrap:hover .cronograma-checkmark {
    border-color: #10b981;
}

.cronograma-check-input:checked ~ .cronograma-checkmark {
    background-color: #10b981;
    border-color: #10b981;
}

.cronograma-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.cronograma-check-input:checked ~ .cronograma-checkmark:after {
    display: block;
}

.cronograma-dia-num {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 65px;
    flex-shrink: 0;
}

.cronograma-dia-info {
    flex: 1;
    min-width: 0;
}

.cronograma-dia-titulo {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.dia-concluido .cronograma-dia-titulo {
    text-decoration: line-through;
    opacity: 0.85;
}

.cronograma-dia-ref-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.cronograma-dia-ref-row .biblia-ref-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}

[data-theme="dark"] .cronograma-dia-ref-row .biblia-ref-link {
    color: #60a5fa;
}

.cronograma-dia-ref-row .biblia-ref-link:hover {
    text-decoration: underline;
}

.cronograma-tempo-tag {
    font-size: 0.76rem;
    color: var(--secondary-color);
    font-weight: 500;
}

.cronograma-dia-status-badge {
    text-align: right;
    flex-shrink: 0;
}

.badge-status-concluido {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

[data-theme="dark"] .badge-status-concluido {
    background: rgba(16, 185, 129, 0.25);
    color: #34d399;
}

.badge-status-pendente {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

[data-theme="dark"] .badge-status-pendente {
    background: rgba(255, 255, 255, 0.07);
}

/* Rodapé de Ações do Plano */
.cronograma-rodape-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.btn-danger-soft {
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.btn-danger-soft:hover {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border-color: #ef4444 !important;
}

/* Card Personalizado */
.cronograma-personalizado-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}

.cronograma-form-grid,
.personalizado-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.15rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .cronograma-form-grid,
    .personalizado-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .cronograma-form-grid,
    .personalizado-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsividade Geral dos Planos (<= 768px) */
@media (max-width: 768px) {
    #form-cronograma {
        padding: 0.25rem 0;
    }

    .cronograma-plano-detalhe,
    .cronograma-plano-painel {
        padding: 1.15rem 0.9rem;
        border-radius: 14px;
    }

    .plano-detalhe-top,
    .plano-detalhe-topo {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }

    .plano-detalhe-actions {
        width: 100%;
    }

    .plano-detalhe-actions button,
    .plano-detalhe-actions .badge-plano-ativo-status {
        width: 100%;
        justify-content: center;
        text-align: center;
        min-height: 40px;
    }

    .cronograma-rodape-acoes {
        flex-direction: column;
        gap: 0.5rem;
    }

    .cronograma-rodape-acoes button {
        width: 100%;
        min-height: 40px;
    }
}

/* Responsividade Mobile para Lista de Dias (<= 640px) */
@media (max-width: 640px) {
    .cronograma-dia-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem 0.65rem;
        padding: 0.85rem 0.9rem;
    }

    .cronograma-check-wrap {
        order: 1;
        min-width: 24px;
        min-height: 24px;
    }

    .cronograma-dia-num {
        order: 2;
        min-width: auto;
        font-size: 0.85rem;
    }

    .cronograma-dia-status-badge {
        order: 3;
        margin-left: auto;
        display: block;
    }

    .cronograma-dia-info {
        order: 4;
        width: 100%;
        flex: 0 0 100%;
        margin-top: 0.2rem;
        padding-left: 2rem;
        box-sizing: border-box;
    }

    .cronograma-dia-titulo {
        white-space: normal;
        word-break: break-word;
        font-size: 0.92rem;
        line-height: 1.35;
        margin-bottom: 0.25rem;
    }
}

@media (max-width: 380px) {
    .cronograma-dia-row {
        padding: 0.75rem 0.7rem;
    }

    .cronograma-dia-info {
        padding-left: 0;
        margin-top: 0.35rem;
        border-top: 1px dashed rgba(0, 0, 0, 0.06);
        padding-top: 0.45rem;
    }

    [data-theme="dark"] .cronograma-dia-info {
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    .cronograma-stat-card {
        padding: 0.9rem;
        gap: 0.65rem;
    }

    .stat-card-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 1.15rem;
    }

    .cronograma-plano-pill,
    .cronograma-nav-pill {
        padding: 0.5rem 0.75rem;
        font-size: 0.82rem;
    }
}

/* ==========================================================================
   LEITURA BÍBLICA - SELEÇÃO DE ORDEM CANÔNICA VS CRONOLÓGICA (Responsivo)
   ========================================================================== */

.leitura-ordem-tabs {
    display: flex;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.03);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

[data-theme="dark"] .leitura-ordem-tabs {
    background: rgba(255, 255, 255, 0.03);
}

.btn-ordem-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: clamp(0.82rem, 2.5vw, 0.92rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-align: center;
    min-height: 42px;
}

@media (max-width: 580px) {
    .leitura-ordem-tabs {
        flex-direction: column;
        gap: 0.35rem;
    }
    .btn-ordem-pill {
        width: 100%;
    }
}

.btn-ordem-pill:hover {
    color: var(--text-color);
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .btn-ordem-pill:hover {
    background: rgba(255, 255, 255, 0.05);
}

.btn-ordem-pill.active {
    background: var(--card-bg);
    color: var(--text-color);
    font-weight: 600;
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .btn-ordem-pill.active {
    background: #27272a;
    color: #f4f4f5;
    border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   BANNER DO LEITOR CRONOLÓGICO (Modo História Harmonizada)
   ========================================================================== */

.leitura-cronologia-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-left: 5px solid var(--accent-color);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    box-sizing: border-box;
    width: 100%;
}

[data-theme="dark"] .leitura-cronologia-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(59, 130, 246, 0.10) 100%);
    border-color: rgba(16, 185, 129, 0.35);
    border-left-color: var(--accent-color);
}

.cronologia-banner-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.cronologia-banner-ident {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cronologia-era-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.12);
    color: var(--accent-color);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.cronologia-passo-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
}

[data-theme="dark"] .cronologia-passo-pill {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.cronologia-sql-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .cronologia-sql-pill {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.35);
}

.cronologia-sql-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}


.cronologia-banner-ctrls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-banner-toggle-lido {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
}

.btn-banner-toggle-lido:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.btn-banner-toggle-lido.concluido {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

.btn-banner-trocar-ordem {
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-banner-trocar-ordem:hover {
    color: var(--text-color);
    border-color: var(--text-secondary);
}

.cronologia-banner-centro {
    padding: 0.9rem 0;
}

.cronologia-banner-titulo {
    font-size: clamp(1.1rem, 3.5vw, 1.35rem);
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.35;
    letter-spacing: -0.3px;
    margin-bottom: 0.4rem;
}

.cronologia-banner-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem 0.85rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.cronologia-banner-ref {
    font-weight: 600;
    color: var(--text-color);
}

.cronologia-banner-tempo {
    color: var(--secondary-color);
}

.cronologia-banner-paralelos {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cronologia-paralelo-tag {
    font-size: 0.78rem;
    font-weight: 600;
    color: #eab308;
}

.cronologia-paralelo-link {
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    background: rgba(234, 179, 8, 0.12);
    color: #b45309;
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

[data-theme="dark"] .cronologia-paralelo-link {
    background: rgba(234, 179, 8, 0.2);
    color: #fde047;
    border-color: rgba(234, 179, 8, 0.4);
}

.cronologia-paralelo-link:hover {
    background: rgba(234, 179, 8, 0.25);
    text-decoration: underline;
}

.cronologia-banner-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.btn-cronologia-passo-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 38px;
}

.btn-cronologia-passo-stepper:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

[data-theme="dark"] .btn-cronologia-passo-stepper:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
}

.btn-cronologia-passo-stepper:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cronologia-passo-indicador-barra {
    font-size: 0.82rem;
    color: var(--secondary-color);
    text-align: center;
}

@media (max-width: 768px) {
    .cronologia-banner-topo {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .cronologia-banner-ctrls {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .btn-banner-toggle-lido,
    .btn-banner-trocar-ordem {
        flex: 1;
        justify-content: center;
        text-align: center;
    }

    .cronologia-banner-rodape {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .cronologia-passo-indicador-barra {
        grid-column: 1 / -1;
        text-align: center;
        margin-bottom: 0.2rem;
    }

    .btn-cronologia-passo-stepper {
        width: 100%;
        justify-content: center;
    }
}

/* Banner de sugestão quando em modo canônico */
.leitura-cronologia-banner-sugestao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: rgba(59, 130, 246, 0.05);
    border: 1px dashed rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

[data-theme="dark"] .leitura-cronologia-banner-sugestao {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.4);
}

.btn-banner-ver-cronologia {
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #2563eb;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    min-height: 36px;
}

.btn-banner-ver-cronologia:hover {
    background: #1d4ed8;
}

/* Badge no Sticky Header */
.leitura-sticky-cronologia-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-color);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 9999px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.2;
}

@media (max-width: 600px) {
    .leitura-sticky-cronologia-badge {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ==========================================================================
   ABA CRONOGRAMA - PLANO CRONOLÓGICO HARMONIZADO (100% Responsivo)
   ========================================================================== */

.cronologia-detalhe-container {
    padding-top: 0.5rem;
}

.cronologia-super-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));
    color: var(--accent-color);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

/* Card de Metodologia */
.cronograma-metodologia-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-color);
    border-radius: 12px;
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.metodologia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    background: rgba(0, 0, 0, 0.015);
    gap: 0.75rem;
}

[data-theme="dark"] .metodologia-header {
    background: rgba(255, 255, 255, 0.02);
}

.metodologia-header:hover {
    background: rgba(0, 0, 0, 0.035);
}

[data-theme="dark"] .metodologia-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

.metodologia-tit-group {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
    min-width: 0;
}

.metodologia-icone {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.metodologia-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    line-height: 1.3;
}

.metodologia-sub {
    font-size: 0.84rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    line-height: 1.35;
}

.btn-toggle-metodologia {
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.cronograma-metodologia-card.aberto .btn-toggle-metodologia {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--accent-color);
}

.metodologia-conteudo {
    padding: 1.25rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.metodologia-metricas-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 900px) {
    .metodologia-metricas-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .metodologia-metricas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.55rem;
    }
    .metodologia-metrica-pill.destaque {
        grid-column: 1 / -1;
    }
}

.metodologia-metrica-pill {
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    box-sizing: border-box;
}

[data-theme="dark"] .metodologia-metrica-pill {
    background: rgba(255, 255, 255, 0.03);
}

.metodologia-metrica-pill.destaque {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.metrica-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
}

.metodologia-metrica-pill.destaque .metrica-val {
    color: var(--accent-color);
}

.metrica-lbl {
    font-size: 0.76rem;
    color: var(--secondary-color);
    font-weight: 500;
    line-height: 1.25;
}

.metodologia-texto-corpo {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.metodologia-paragrafo {
    margin-bottom: 0.75rem;
}

.metodologia-links-secao {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.metodologia-links-tit {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.75rem;
}

.metodologia-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 0.75rem;
}

.metodologia-link-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.metodologia-link-card:hover {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.link-card-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.link-card-body {
    flex: 1;
    min-width: 0;
}

.link-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.25;
}

.link-card-sub {
    font-size: 0.76rem;
    color: var(--secondary-color);
    margin-top: 0.15rem;
    line-height: 1.3;
}

.link-card-arrow {
    font-size: 0.9rem;
    color: var(--secondary-color);
    font-weight: 600;
    flex-shrink: 0;
}

/* Barra de Ferramentas Cronológica (Modos e Busca) */
.cronologia-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.cronologia-modos-toggle {
    display: flex;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.03);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .cronologia-modos-toggle {
    background: rgba(255, 255, 255, 0.03);
}

.btn-modo-cronologia {
    flex: 1;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
}

.btn-modo-cronologia:hover {
    color: var(--text-color);
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .btn-modo-cronologia:hover {
    background: rgba(255, 255, 255, 0.05);
}

.btn-modo-cronologia.active {
    background: var(--card-bg);
    color: var(--text-color);
    font-weight: 700;
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .btn-modo-cronologia.active {
    background: #27272a;
    color: #f4f4f5;
    border-color: rgba(255, 255, 255, 0.1);
}

.cronologia-search-wrap {
    width: 100%;
}

.cronologia-search-wrap input {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 1rem; /* Prevents iOS auto-zoom */
    box-sizing: border-box;
    border: 1.5px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cronologia-search-wrap input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Barra de Períodos Históricos (10 Eras) */
.cronologia-periodos-bar {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.35rem 0.15rem 0.75rem;
    margin-bottom: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    scroll-padding: 0.5rem;
}

.cronologia-periodos-bar::-webkit-scrollbar {
    height: 5px;
}

.cronologia-periodos-bar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.cronologia-periodo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    min-height: 38px;
    box-sizing: border-box;
}

.cronologia-periodo-chip:hover {
    border-color: #10b981;
    color: var(--text-color);
    background: rgba(16, 185, 129, 0.05);
}

.cronologia-periodo-chip.active {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .cronologia-periodo-chip.active {
    background: #34d399;
    border-color: #34d399;
    color: #042f2e;
    box-shadow: 0 2px 10px rgba(52, 211, 153, 0.35);
}

.cronologia-periodo-chip.active .chip-count {
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
}

.chip-icone {
    font-size: 1rem;
    line-height: 1;
}

.chip-nome {
    font-weight: 500;
}

.chip-count {
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
    font-weight: 600;
}

[data-theme="dark"] .chip-count {
    background: rgba(255, 255, 255, 0.1);
}

/* Card da Linha do Passo / Dia Cronológico */
.cronologia-dia-badge {
    min-width: 95px;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.cronologia-sub-total {
    font-size: 0.72rem;
    color: var(--secondary-color);
    font-weight: 400;
}

.cronologia-row-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.cronologia-mini-era {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    background: rgba(16, 185, 129, 0.1);
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.cronologia-tempo-tag {
    font-size: 0.75rem;
    color: var(--secondary-color);
    white-space: nowrap;
}

.cronologia-passos-inclusos {
    font-size: 0.75rem;
    color: var(--secondary-color);
    font-weight: 500;
}

.cronologia-paralelo-inline {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.paralelo-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #d97706;
}

[data-theme="dark"] .paralelo-label {
    color: #f59e0b;
}

.chip-paralelo {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.3);
    cursor: pointer;
    transition: all 0.15s ease;
}

[data-theme="dark"] .chip-paralelo {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.4);
}

.chip-paralelo:hover {
    background: rgba(245, 158, 11, 0.25);
    text-decoration: underline;
}

.cronologia-row-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.btn-ler-passo {
    padding: 0.38rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1.5px solid var(--accent-color);
    color: var(--accent-color);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-ler-passo:hover {
    background: var(--accent-color);
    color: #ffffff;
}

.cronologia-vazio-msg {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    border: 1px dashed var(--border-color);
}

/* Responsividade Mobile Específica para Cronologia */
@media (max-width: 768px) {
    .cronologia-modos-toggle {
        flex-direction: column;
        gap: 0.35rem;
    }

    .btn-modo-cronologia {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .cronologia-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem 0.65rem;
        padding: 0.85rem 0.9rem;
    }

    .cronologia-row .cronograma-check-wrap {
        order: 1;
    }

    .cronologia-row .cronologia-dia-badge {
        order: 2;
        min-width: auto;
    }

    .cronologia-row .cronologia-row-actions {
        order: 3;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 0.45rem;
    }

    .cronologia-row .cronograma-dia-info {
        order: 4;
        width: 100%;
        flex: 0 0 100%;
        margin-top: 0.25rem;
        padding-left: 2rem;
        box-sizing: border-box;
    }

    .cronologia-row .cronograma-dia-titulo {
        white-space: normal;
        word-break: break-word;
        font-size: 0.92rem;
        line-height: 1.35;
        margin-bottom: 0.25rem;
    }

    .metodologia-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
        padding: 0.85rem 1rem;
    }

    .metodologia-tit-group {
        width: 100%;
    }

    .btn-toggle-metodologia {
        width: 100%;
        text-align: center;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .metodologia-conteudo {
        padding: 1rem;
    }
}

@media (max-width: 380px) {
    .cronologia-row .cronograma-dia-info {
        padding-left: 0;
        margin-top: 0.35rem;
        border-top: 1px dashed rgba(0, 0, 0, 0.06);
        padding-top: 0.45rem;
    }

    [data-theme="dark"] .cronologia-row .cronograma-dia-info {
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    .cronologia-row .cronologia-row-actions {
        order: 5;
        width: 100%;
        flex: 0 0 100%;
        justify-content: space-between;
        margin-top: 0.35rem;
        padding-top: 0.35rem;
        border-top: 1px dashed rgba(0, 0, 0, 0.06);
    }

    [data-theme="dark"] .cronologia-row .cronologia-row-actions {
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    .cronologia-row .cronologia-row-actions .btn-ler-passo {
        flex: 1;
        min-height: 36px;
    }

    .metodologia-metricas-grid {
        grid-template-columns: 1fr;
    }

    .metodologia-links-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PRESETS DE DIAS & TABELA DO PLANO SEQUENCIAL PERSONALIZADO
   ========================================================================== */
.cronograma-presets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.cronograma-preset-select {
    max-width: 320px;
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
}

.cronograma-presets-scrollable {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.4rem 0.2rem 0.75rem 0.2rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    flex-wrap: wrap;
    max-height: 180px;
    overflow-y: auto;
}

.cronograma-preset-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color, #1e293b);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cronograma-preset-chip:hover {
    border-color: var(--accent-color, #2563eb);
    background: rgba(37, 99, 235, 0.06);
    transform: translateY(-1px);
}

.cronograma-preset-chip.active {
    background: var(--accent-color, #2563eb) !important;
    border-color: var(--accent-color, #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.35);
}

.cronograma-preset-chip .preset-chip-detalhe {
    font-size: 0.72rem;
    opacity: 0.82;
    font-weight: normal;
    margin-top: 1px;
}

.cronograma-preset-chip.active .preset-chip-detalhe {
    color: rgba(255, 255, 255, 0.92);
}

.cronograma-custom-header {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 1.1rem 1.35rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}

.custom-progresso-box {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.custom-progresso-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.45rem;
    color: var(--text-secondary, #64748b);
}

.cronograma-table tr.dia-concluido {
    background-color: rgba(16, 185, 129, 0.08) !important;
}

[data-theme="dark"] .cronograma-table tr.dia-concluido {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

.cronograma-table tr.dia-concluido td strong {
    color: #059669;
}

/* ==========================================================================
   ESTILOS: BÍBLIA CRONOLÓGICA PURA & LEITURA CONTÍNUA (CPAD)
   ========================================================================== */

/* Lista Discriminada de Passagens por Dia no Cronograma */
.cronograma-passagens-bloco {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
}

.cronograma-passagens-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cronograma-passagem-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    line-height: 1.35;
}

.cronograma-passagem-idx {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--secondary-color, #64748b);
    min-width: 16px;
}

.cronograma-passagem-ref {
    font-weight: 600;
    color: var(--accent-color, #0284c7);
}

.cronograma-passagem-versos {
    font-size: 0.75rem;
    color: var(--secondary-color, #64748b);
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .cronograma-passagem-versos {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.btn-toggle-extras-passagens {
    background: transparent;
    border: none;
    color: var(--accent-color, #0284c7);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    padding: 2px 0;
    margin-top: 2px;
}

.btn-toggle-extras-passagens:hover {
    text-decoration: underline;
}

/* Card de Leitura Cronológica Pura (Passo Isolado) */
.cronologia-passo-puro-card {
    border-radius: 12px;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    margin-bottom: 1.5rem;
}

.cronologia-subcapitulo-header {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-color, #0284c7);
    background: rgba(2, 132, 199, 0.08);
    padding: 6px 12px;
    border-radius: 6px;
    margin: 12px 0 8px 0;
    border-left: 3px solid var(--accent-color, #0284c7);
}

/* Leitura Contínua (Stream de Múltiplos Passos do Dia ou Era) */
.cronologia-stream-bloco {
    margin-bottom: 1.25rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #ffffff);
}

.cronologia-stream-header {
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.cronologia-stream-header:hover {
    background: var(--bg-hover, #f1f5f9);
}

[data-theme="dark"] .cronologia-stream-header {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .cronologia-stream-header:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Barra compacta do cabeçalho retrátil (visível sempre) */
.cronologia-stream-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
}

.cronologia-stream-header-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.cronologia-stream-bar-ref {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color, #1e293b);
    white-space: nowrap;
}

.cronologia-stream-bar-title {
    font-size: 0.85rem;
    color: var(--secondary-color, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cronologia-stream-header-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cronologia-stream-toggle-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--secondary-color, #64748b);
    transition: transform 0.2s ease;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .cronologia-stream-toggle-chevron {
    background: rgba(255, 255, 255, 0.06);
}

/* Quando expandido (não recolhido), chevron aponta para cima */
.cronologia-stream-header:not(.recolhido) .cronologia-stream-toggle-chevron {
    transform: rotate(180deg);
}

.cronologia-stream-header:not(.recolhido) .cronologia-stream-header-bar {
    border-bottom: 1px dashed var(--border-color, #e2e8f0);
}

/* Bloco de detalhes do cabeçalho */
.cronologia-stream-detalhes {
    padding: 12px 18px 14px 18px;
    cursor: default;
}

/* Quando recolhido, esconde detalhes e deixa a tela completamente limpa */
.cronologia-stream-header.recolhido .cronologia-stream-detalhes {
    display: none;
}

.cronologia-stream-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.cronologia-stream-passo-tag {
    background: var(--accent-color, #0284c7);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.76rem;
    white-space: nowrap;
}

.cronologia-stream-era-tag {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-color, #1e293b);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 500;
}

[data-theme="dark"] .cronologia-stream-era-tag {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.cronologia-stream-versos-tag {
    color: var(--secondary-color, #64748b);
    font-size: 0.78rem;
}

.cronologia-stream-cpad-tag {
    font-size: 0.74rem;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 500;
}

[data-theme="dark"] .cronologia-stream-cpad-tag {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.cronologia-stream-tempo-tag {
    color: var(--secondary-color, #64748b);
    font-size: 0.78rem;
    white-space: nowrap;
}

.cronologia-stream-titulo {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-color, #1e293b);
    margin: 4px 0;
}

.cronologia-stream-ref {
    font-size: 0.92rem;
    color: var(--secondary-color, #64748b);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.cronologia-stream-paralelos {
    margin-top: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.82rem;
}

.cronologia-stream-versos {
    padding: 16px 20px;
}

/* Botão de alternar todos os cabeçalhos no Sticky Reader */
.btn-toggle-todos-headers {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 6px;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1e293b);
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 600;
}

.btn-toggle-todos-headers:hover {
    background: var(--bg-hover, #f1f5f9);
    border-color: var(--accent-color, #0284c7);
    color: var(--accent-color, #0284c7);
}

[data-theme="dark"] .btn-toggle-todos-headers {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

/* Indicador de carregamento progressivo assíncrono da Era */
.cronologia-stream-loading-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 14px;
    margin: 16px 0;
    border-radius: 10px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px dashed var(--accent-color, #0284c7);
    color: var(--secondary-color, #64748b);
    font-size: 0.88rem;
    font-weight: 500;
}

[data-theme="dark"] .cronologia-stream-loading-sentinel {
    background: rgba(255, 255, 255, 0.04);
}

.cronologia-stream-loading-sentinel .spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(2, 132, 199, 0.2);
    border-top-color: var(--accent-color, #0284c7);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Divisor de Transição Histórica entre Passos */
.cronologia-stream-divisor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.cronologia-stream-linha {
    flex: 1;
    height: 1px;
    background: var(--border-color, #e2e8f0);
}

.cronologia-stream-divisor-tag {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--secondary-color, #64748b);
    background: var(--bg-secondary, #f1f5f9);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px dashed var(--border-color, #cbd5e1);
}

[data-theme="dark"] .cronologia-stream-divisor-tag {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Card de Conclusão ao Fim do Dia / Era */
.cronologia-conclusao-card {
    text-align: center;
    padding: 30px 24px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(2, 132, 199, 0.08) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    margin: 24px 0;
}

.cronologia-conclusao-icone {
    font-size: 2.8rem;
    margin-bottom: 8px;
}

.cronologia-conclusao-titulo {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-color, #0f172a);
    margin-bottom: 6px;
}

.cronologia-conclusao-desc {
    font-size: 0.95rem;
    color: var(--secondary-color, #64748b);
    max-width: 540px;
    margin: 0 auto 16px auto;
}

.cronologia-conclusao-botoes {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Botão de alternar o Banner Cronológico na leitura pura */
.btn-toggle-cronologia-banner {
    background: transparent;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-color, #1e293b);
    transition: all 0.2s ease;
    font-weight: 700;
}

.btn-toggle-cronologia-banner:hover {
    background: var(--bg-hover, #f1f5f9);
    border-color: var(--accent-color, #0284c7);
}

[data-theme="dark"] .btn-toggle-cronologia-banner {
    border-color: rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}

.leitura-cronologia-banner.recolhido {
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.leitura-cronologia-banner.recolhido .cronologia-banner-topo {
    border-bottom: none;
    padding-bottom: 0;
}

.leitura-cronologia-banner.recolhido .cronologia-banner-corpo {
    display: none;
}

/* Responsividade Aprimorada para Dispositivos Móveis e Tablets */
@media (max-width: 768px) {
    .cronologia-stream-header-bar {
        padding: 8px 12px;
        gap: 6px;
    }

    .cronologia-stream-bar-ref {
        font-size: 0.82rem;
    }

    .cronologia-stream-bar-title {
        font-size: 0.78rem;
    }

    .cronologia-stream-passo-tag {
        font-size: 0.7rem;
        padding: 1px 6px;
    }

    .cronologia-stream-tempo-tag {
        font-size: 0.72rem;
    }

    .cronologia-stream-titulo {
        font-size: 1.05rem;
    }

    .cronologia-stream-versos {
        padding: 12px 14px;
    }

    .btn-toggle-todos-headers {
        font-size: 0.72rem;
        padding: 2px 6px;
    }

    .select-era-leitura-sticky {
        max-width: 105px !important;
        font-size: 0.78rem !important;
        padding: 0.2rem 0.3rem !important;
    }

    .leitura-sticky-cronologia-badge {
        font-size: 0.74rem;
        max-width: 130px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 480px) {
    .cronologia-stream-header-bar {
        padding: 6px 10px;
        gap: 4px;
    }

    .cronologia-stream-bar-title {
        display: none; /* Em telas muito estreitas, oculta o título na barra recolhida para manter visual ultra-limpo */
    }

    .cronologia-stream-bar-ref {
        font-size: 0.8rem;
    }

    .select-era-leitura-sticky {
        max-width: 85px !important;
        font-size: 0.72rem !important;
    }

    .leitura-sticky-cronologia-badge {
        max-width: 85px;
        font-size: 0.68rem;
    }

    .btn-toggle-todos-headers {
        font-size: 0.68rem;
        padding: 2px 4px;
    }

    .cronologia-stream-loading-sentinel {
        padding: 12px 8px;
        font-size: 0.78rem;
    }
}

/* ==========================================================================
   HARPA CRISTÃ - ESTILOS OFICIAIS DE BUSCA E LEITURA (640 HINOS)
   ========================================================================== */

.harpa-header-painel {
    margin-bottom: 1.5rem;
}

.harpa-header-linha-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}

.harpa-header-titulo-box {
    display: flex;
    flex-direction: column;
}

.harpa-header-titulo {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color);
}

.harpa-header-subtitulo {
    font-size: 0.85rem;
    color: var(--secondary-color);
}

.harpa-header-acoes-topo {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.harpa-btn-clear {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--secondary-color);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    line-height: 1;
    transition: color 0.15s;
}

.harpa-btn-clear:hover {
    color: var(--text-color);
}

.harpa-autocomplete-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 150;
    max-height: 340px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    margin-top: 4px;
}

.harpa-autocomplete-item {
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

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

.harpa-autocomplete-item:hover,
.harpa-autocomplete-item.selected {
    background: var(--bg-color);
}

.harpa-auto-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.harpa-auto-hino {
    display: flex;
    align-items: center;
    gap: 8px;
}

.harpa-auto-pill {
    background: var(--accent-color);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.harpa-auto-titulo {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
}

.harpa-auto-badge-local {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--secondary-color);
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
}

[data-theme="dark"] .harpa-auto-badge-local {
    background: rgba(255, 255, 255, 0.08);
}

.harpa-auto-snippet {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.45;
}

.harpa-filtros-linha {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* Leitor do Hino */
.harpa-leitor-wrapper {
    margin-top: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.8rem;
    box-shadow: var(--shadow-sm);
}

.harpa-leitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1.8rem;
}

.harpa-leitor-info-bloco {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.harpa-badge-numero {
    background: var(--primary-color);
    color: var(--bg-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.harpa-titulo-hino {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-color);
}

.harpa-leitor-acoes-bloco {
    display: flex;
    gap: 8px;
    align-items: center;
}

#modal-harpa-conteudo,
.harpa-hino-corpo {
    font-size: var(--bible-font-size, 1.1rem) !important;
    line-height: 1.8;
    color: var(--text-color);
}

.harpa-estrofe-card {
    display: flex;
    gap: 14px;
    margin-bottom: 1.8rem;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.3s;
}

.harpa-estrofe-numero {
    font-weight: 700;
    color: var(--accent-color);
    min-width: 26px;
    text-align: right;
    font-size: calc(var(--bible-font-size, 1.1rem) * 0.9);
    padding-top: 2px;
}

.harpa-estrofe-texto {
    flex: 1;
    font-size: inherit;
}

.harpa-linha {
    display: block;
    margin-bottom: 0.18rem;
}

/* Card do Coro / Refrão */
.harpa-coro-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-left: 4px solid var(--accent-color);
    border-radius: 8px;
    padding: 1.2rem 1.4rem;
    margin: 1.8rem 0;
    transition: background 0.3s, border-color 0.3s;
}

[data-theme="dark"] .harpa-coro-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.03));
}

.harpa-coro-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--accent-color);
    letter-spacing: 1px;
    margin-bottom: 0.6rem;
}

.harpa-coro-texto {
    font-style: italic;
    padding-left: 4px;
    font-size: inherit;
}

.harpa-nav-rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.2rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.2rem;
    flex-wrap: wrap;
    gap: 10px;
}

/* Resultados da Busca */
.harpa-resultados-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
    gap: 8px;
}

.harpa-resultados-contagem {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-color);
}

.harpa-resultados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.harpa-card-resultado {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.1rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.harpa-card-resultado:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}

.harpa-card-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0.6rem;
}

.harpa-card-identificacao {
    display: flex;
    align-items: center;
    gap: 8px;
}

.harpa-pill-numero {
    background: var(--accent-color);
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.harpa-card-titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.harpa-card-meta {
    font-size: 0.75rem;
    color: var(--secondary-color);
    white-space: nowrap;
}

.harpa-card-snippets {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.harpa-snippet-item {
    font-size: 0.85rem;
    background: var(--bg-color);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    line-height: 1.45;
}

.harpa-badge-local {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-right: 6px;
    text-transform: uppercase;
}

.harpa-card-rodape {
    margin-top: 0.85rem;
    display: flex;
    justify-content: flex-end;
}

.harpa-sem-resultados {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

/* Toast de Notificação */
.harpa-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--primary-color);
    color: var(--bg-color);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
}

.harpa-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Efeito de Pulso ao Rolar para o Trecho do Autocomplete */
@keyframes harpaPulse {
    0% { background: rgba(16, 185, 129, 0.35); }
    50% { background: rgba(16, 185, 129, 0.15); }
    100% { background: transparent; }
}

.harpa-pulse-destaque {
    animation: harpaPulse 2.5s ease-out;
}

/* ================= MODAL HARPA CRISTÃ - LEITOR EM TELA CHEIA ================= */
#modal-harpa-leitor {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    z-index: 10001 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#modal-harpa-leitor[style*="block"],
#modal-harpa-leitor[style*="flex"] {
    display: flex !important;
}

.modal-harpa-fullscreen-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--card-bg) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: none !important;
}

/* Barra Superior Fixa do Modal */
.harpa-modal-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1.25rem;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 16px;
    z-index: 10;
}

.harpa-modal-top-esquerda {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.harpa-modal-logo {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--primary-color);
    letter-spacing: -0.2px;
}

.harpa-modal-top-centro {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.harpa-modal-top-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.modal-harpa-close-btn {
    font-size: 1.85rem;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--text-color);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.modal-harpa-close-btn:hover {
    color: var(--accent-color);
    background: var(--border-color, rgba(0, 0, 0, 0.08));
    transform: scale(1.08);
}

/* Gaveta Retrátil de Busca dentro do Modal */
.modal-harpa-busca-drawer {
    background: var(--card-bg);
    border-bottom: 2px solid var(--accent-color);
    padding: 14px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    animation: harpaSlideDown 0.22s ease-out;
    flex-shrink: 0;
    z-index: 9;
}

@keyframes harpaSlideDown {
    from { transform: translateY(-16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-harpa-busca-inner {
    max-width: 760px;
    margin: 0 auto;
}

/* Corpo de rolagem do Modal */
.modal-harpa-scroll-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1rem 3.5rem 1rem;
    -webkit-overflow-scrolling: touch;
}

.modal-harpa-container-leitura {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ================= BOTÕES ACIMA DO TÍTULO DO HINO ================= */
.harpa-botoes-acima-titulo {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 0.25rem;
}

.harpa-btn-topo-hino {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.5rem 1.15rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: var(--shadow-sm);
}

.harpa-btn-topo-hino:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.harpa-fullscreen-header {
    text-align: center;
    padding: 0.5rem 0 0.25rem 0;
}

.harpa-fullscreen-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: 0.75rem;
}

.harpa-pill-numero-lg {
    background: var(--accent-color);
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    padding: 4px 16px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.harpa-fullscreen-hino-titulo {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
}

/* ================= MODAL HC NÚMEROS (1 A 640) ================= */
#modal-harpa-numeros {
    z-index: 10005 !important;
}

.modal-harpa-numeros-content {
    max-width: 680px !important;
    width: 94% !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-lg) !important;
}

.modal-harpa-numeros-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.harpa-numeros-input-box {
    background: var(--bg-color);
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.harpa-centenas-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.harpa-tab-centena {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.harpa-tab-centena:hover,
.harpa-tab-centena.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.harpa-grid-numeros-wrapper {
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}

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

.harpa-btn-num-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.harpa-btn-num-item:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    transform: scale(1.08);
}

.harpa-btn-num-item.active-hino {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* ================= ELEMENTOS DA ABA HARPA CRISTÃ ================= */
.harpa-botoes-principais {
    display: flex;
    gap: 12px;
    margin: 1.25rem 0;
    flex-wrap: wrap;
}

.harpa-btn-grande {
    flex: 1;
    min-width: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0.85rem 1.2rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.harpa-btn-grande:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.harpa-seta-indicador {
    font-size: 0.8rem;
    transition: transform 0.25s ease;
    display: inline-block;
}

.harpa-caixa-busca-retratil {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
    animation: harpaSlideDown 0.25s ease-out;
}

.harpa-preview-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.harpa-preview-card:hover {
    box-shadow: var(--shadow-md);
}

.harpa-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Responsividade Mobile */
@media (max-width: 600px) {
    .harpa-botoes-principais {
        flex-direction: column;
    }

    .harpa-btn-grande {
        width: 100%;
        min-width: unset;
    }

    .harpa-fullscreen-hino-titulo {
        font-size: 1.45rem;
    }

    .harpa-botoes-acima-titulo {
        gap: 6px;
    }

    .harpa-btn-topo-hino {
        padding: 0.45rem 0.75rem;
        font-size: 0.85rem;
    }

    .harpa-grid-numeros {
        grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
        gap: 6px;
    }

    .modal-harpa-top-bar {
        padding: 0.5rem 0.85rem;
    }
}

/* ================= MODAL TEMAS BÍBLICO-TEOLÓGICOS ================= */
#modal-harpa-temas {
    z-index: 10006 !important;
}

.modal-harpa-temas-content {
    max-width: 820px !important;
    width: 95% !important;
    max-height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-lg) !important;
    background: var(--card-bg) !important;
}

.modal-harpa-temas-body {
    padding: 1.2rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.harpa-temas-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.harpa-temas-busca-box {
    position: relative;
    display: flex;
    align-items: center;
}

.harpa-temas-busca-icon {
    position: absolute;
    left: 12px;
    font-size: 0.95rem;
    pointer-events: none;
    opacity: 0.7;
}

.harpa-temas-busca-box input {
    padding-left: 36px !important;
    padding-right: 36px !important;
    font-size: 0.95rem;
}

.harpa-temas-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.harpa-temas-contador-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
}

.harpa-temas-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Card do Tema Individual */
.harpa-tema-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-color);
    overflow: hidden;
    transition: all 0.2s ease;
}

.harpa-tema-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.harpa-tema-card.expandido {
    border-color: var(--accent-color);
    background: var(--card-bg);
}

.harpa-tema-header {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
    gap: 12px;
}

.harpa-tema-header:hover {
    background: rgba(0, 0, 0, 0.03);
}

.theme-dark .harpa-tema-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

.harpa-tema-titulo-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.harpa-tema-icone {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.harpa-tema-titulo {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text-color);
    line-height: 1.3;
}

.harpa-tema-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.harpa-tema-qtd-badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.harpa-tema-card.expandido .harpa-tema-qtd-badge {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.harpa-tema-seta {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.harpa-tema-card.expandido .harpa-tema-seta {
    transform: rotate(180deg);
}

.harpa-tema-corpo {
    display: none;
    padding: 12px 16px 16px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-color);
}

.harpa-tema-card.expandido .harpa-tema-corpo {
    display: block;
}

/* Subtemas */
.harpa-subtema-secao {
    margin-bottom: 14px;
}

.harpa-subtema-secao:last-child {
    margin-bottom: 0;
}

.harpa-subtema-header {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.harpa-subtema-badge-qtd {
    font-size: 0.72rem;
    font-weight: normal;
    opacity: 0.8;
}

/* Grid de Hinos no Tema */
.harpa-temas-hinos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
}

.harpa-tema-hino-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    width: 100%;
    color: var(--text-color);
}

.harpa-tema-hino-btn:hover {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.harpa-tema-hino-btn:hover .harpa-pill-numero {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}

.harpa-tema-hino-btn .harpa-pill-numero {
    font-size: 0.78rem;
    padding: 2px 6px;
    flex-shrink: 0;
}

.harpa-tema-hino-titulo {
    font-size: 0.86rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

@media (max-width: 600px) {
    .modal-harpa-temas-content {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .harpa-temas-hinos-grid {
        grid-template-columns: 1fr;
    }
    .harpa-modal-top-bar {
        padding: 0.5rem 0.85rem;
        gap: 8px;
    }
    .harpa-modal-logo {
        font-size: 0.95rem;
    }
    .modal-harpa-close-btn {
        width: 32px;
        height: 32px;
        font-size: 1.6rem;
    }
}

/* ==========================================================================
   ANÁLISE EXEGÉTICA E LÉXICO STRONG (HEBRAICO & GREGO)
   ========================================================================== */

#modal-strong {
    z-index: 10500;
}

.modal-strong-fullscreen-content {
    width: 95vw;
    max-width: 1100px;
    height: 92vh;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    background: var(--card-bg, #ffffff);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-strong-top-bar {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg, #ffffff);
    flex-shrink: 0;
}

.modal-strong-title-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.strong-header-badge {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    background: var(--accent-color, #2563eb);
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
}

.strong-lang-pill {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.pill-grego {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    border: 1px solid rgba(37, 99, 235, 0.3);
}

.pill-hebraico {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.3);
}

[data-theme="dark"] .pill-grego {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .pill-hebraico {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.4);
}

.modal-strong-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Toolbar de busca do modal Strong */
.strong-toolbar {
    flex-shrink: 0;
}

.strong-search-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.strong-search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.strong-search-icon {
    position: absolute;
    left: 12px;
    pointer-events: none;
    opacity: 0.6;
    font-size: 0.95rem;
}

.strong-search-input-wrap input {
    width: 100%;
    padding: 0.65rem 2.2rem 0.65rem 2.4rem;
    font-size: 0.92rem;
    border-radius: 8px;
    background-color: var(--card-bg, #ffffff);
    color: var(--text-color, #1e293b);
    border: 1px solid var(--border-color, #cbd5e1);
}

[data-theme="dark"] .strong-search-input-wrap input {
    background-color: #121215 !important;
    color: #f4f4f5 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.strong-btn-submit {
    white-space: nowrap;
    padding: 0.65rem 1.2rem;
    font-weight: 600;
}

/* Banner de visualização do versículo */
.strong-verse-banner {
    background: var(--bg-hover, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 4px solid var(--accent-color, #2563eb);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

[data-theme="dark"] .strong-verse-banner {
    background: #18181b !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid var(--accent-color, #10b981) !important;
}

.strong-verse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.strong-verse-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--secondary-color, #64748b);
}

[data-theme="dark"] .strong-verse-label {
    color: #94a3b8;
}

.strong-verse-ref {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent-color, #2563eb);
}

[data-theme="dark"] .strong-verse-ref {
    color: #34d399;
}

.strong-verse-full-text {
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
    color: var(--text-color, #1e293b);
}

[data-theme="dark"] .strong-verse-full-text {
    color: #f4f4f5 !important;
}

/* Títulos de Seção e Contadores */
.strong-section-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    margin-bottom: 0.75rem;
}

[data-theme="dark"] .strong-section-title-wrap {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.strong-section-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color, #1e293b);
}

[data-theme="dark"] .strong-section-title {
    color: #f4f4f5;
}

.strong-count-badge {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    background: var(--bg-hover, #f1f5f9);
    color: var(--secondary-color, #64748b);
}

[data-theme="dark"] .strong-count-badge {
    background: #27272a !important;
    color: #e4e4e7 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Grid de Cards de Palavras */
.strong-palavras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.strong-palavra-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.strong-palavra-card:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    border-color: rgba(37, 99, 235, 0.4);
}

[data-theme="dark"] .strong-palavra-card {
    background: #18181b !important;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .strong-palavra-card:hover {
    border-color: var(--accent-color, #10b981);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
}

.strong-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--border-color, #e2e8f0);
    padding-bottom: 0.5rem;
}

[data-theme="dark"] .strong-card-top {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.strong-termo-pt {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-color, #1e293b);
}

[data-theme="dark"] .strong-termo-pt {
    color: #fafafa !important;
}

.strong-index-pill {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.6;
}

[data-theme="dark"] .strong-index-pill {
    color: #a1a1aa;
}

.strong-card-detalhes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.strong-sub-detalhe {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.strong-card-lemma-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.strong-lemma-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Tipografia Bíblica Hebraica e Grega */
.strong-original-word {
    display: inline-block;
    letter-spacing: 0.5px;
}

.strong-original-hebrew {
    font-family: 'SBL Hebrew', 'David', 'Taamey Frank CLM', 'Times New Roman', serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: #d97706;
    line-height: 1.3;
}

[data-theme="dark"] .strong-original-hebrew {
    color: #f59e0b;
}

.strong-original-greek {
    font-family: 'Gentium Plus', 'Cardo', 'Palatino Linotype', 'Times New Roman', serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #2563eb;
    line-height: 1.3;
}

[data-theme="dark"] .strong-original-greek {
    color: #60a5fa;
}

.strong-translit-text {
    font-size: 1.02rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text-color, #1e293b);
}

[data-theme="dark"] .strong-translit-text {
    color: #e4e4e7 !important;
}

.strong-pronuncia-text {
    font-size: 0.82rem;
    color: var(--secondary-color, #64748b);
    letter-spacing: 0.3px;
}

[data-theme="dark"] .strong-pronuncia-text {
    color: #a1a1aa !important;
}

.strong-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.strong-code-badge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.strong-idioma-tag {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.65;
}

/* Caixa de Definição Teológica */
.strong-def-box {
    background: var(--bg-hover, #f8fafc);
    border-left: 3px solid var(--accent-color, #2563eb);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
}

[data-theme="dark"] .strong-def-box {
    background: #202025 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--accent-color, #10b981) !important;
}

.strong-def-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.65;
    margin-bottom: 3px;
}

[data-theme="dark"] .strong-def-label {
    color: #94a3b8 !important;
    opacity: 0.9;
}

.strong-def-text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-color, #1e293b);
    word-break: break-word;
}

[data-theme="dark"] .strong-def-text {
    color: #f1f5f9 !important;
}

/* Botão e Lista de Ocorrências */
.strong-card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.btn-strong-ocorrencias {
    background: transparent;
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--text-color, #1e293b);
    padding: 0.38rem 0.75rem;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-strong-ocorrencias:hover {
    border-color: var(--accent-color, #2563eb);
    color: var(--accent-color, #2563eb);
    background: rgba(37, 99, 235, 0.06);
}

[data-theme="dark"] .btn-strong-ocorrencias {
    background: #202025;
    border-color: rgba(255, 255, 255, 0.14);
    color: #f4f4f5;
}

[data-theme="dark"] .btn-strong-ocorrencias:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--accent-color, #10b981);
    color: var(--accent-color, #10b981);
}

.strong-ocorrencias-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

[data-theme="dark"] .strong-ocorrencias-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.strong-ocorrencias-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.strong-ocorrencia-item {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.strong-ocorrencia-item:hover {
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .strong-ocorrencia-item {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .strong-ocorrencia-item:hover {
    border-color: var(--accent-color, #10b981);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.strong-ocorrencia-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.strong-ocorrencia-ref-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.strong-ocorrencia-ref {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--accent-color, #2563eb);
}

.strong-traducao-alvo-badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-color, #2563eb);
}

.strong-ocorrencia-texto {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    color: var(--text-color, #1e293b);
}

[data-theme="dark"] .strong-ocorrencia-texto {
    color: #e4e4e7;
}

.strong-highlight {
    background-color: #fef08a;
    color: #713f12;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-weight: 600;
}

[data-theme="dark"] .strong-highlight {
    background-color: #854d0e;
    color: #fef9c3;
}

.btn-strong-ler {
    padding: 0.25rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.strong-error-box {
    padding: 1.5rem;
    text-align: center;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #b91c1c;
}

[data-theme="dark"] .strong-error-box {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.strong-empty-msg {
    grid-column: 1 / -1;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--secondary-color, #64748b);
}

[data-theme="dark"] .strong-empty-msg {
    color: #a1a1aa;
}

/* Painel da aba principal (#form-strong) */
.strong-painel-principal {
    max-width: 900px;
    margin: 0 auto;
    padding: 0.5rem 0;
}

.strong-chip-btn {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--text-color, #1e293b);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.strong-chip-btn:hover {
    border-color: var(--accent-color, #2563eb);
    color: var(--accent-color, #2563eb);
    background: rgba(37, 99, 235, 0.06);
    transform: translateY(-1px);
}

[data-theme="dark"] .strong-chip-btn {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.14);
    color: #f4f4f5;
}

[data-theme="dark"] .strong-chip-btn:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--accent-color, #10b981);
    color: var(--accent-color, #10b981);
}

[data-theme="dark"] .modal-strong-fullscreen-content {
    background: #121215;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .modal-strong-top-bar {
    background: #18181b;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 650px) {
    .modal-strong-fullscreen-content {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    .modal-strong-body {
        padding: 1rem;
    }

    .strong-palavras-grid {
        grid-template-columns: 1fr;
    }

    .strong-search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .strong-btn-submit {
        width: 100%;
    }
}

/* ==========================================================================
   ESTILOS OFICIAIS DO DICIONÁRIO DA LÍNGUA PORTUGUESA (BÍBLICO & TEOLÓGICO)
   ========================================================================== */

.dicionario-chip-btn {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--text-color, #1e293b);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.dicionario-chip-btn:hover {
    border-color: var(--accent-color, #2563eb);
    color: var(--accent-color, #2563eb);
    background: rgba(37, 99, 235, 0.06);
    transform: translateY(-1px);
}

.dicionario-chip-btn.active {
    background: var(--accent-color, #2563eb) !important;
    border-color: var(--accent-color, #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.dicionario-chip-btn.chip-muted {
    opacity: 0.7;
    font-size: 0.78rem;
    padding: 0.25rem 0.6rem;
}

[data-theme="dark"] .dicionario-chip-btn {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.14);
    color: #f4f4f5;
}

[data-theme="dark"] .dicionario-chip-btn:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--accent-color, #10b981);
    color: var(--accent-color, #10b981);
}

[data-theme="dark"] .dicionario-chip-btn.active {
    background: var(--accent-color, #10b981) !important;
    border-color: var(--accent-color, #10b981) !important;
    color: #09090b !important;
    font-weight: 700;
}

/* Tokens de Palavras Clicáveis no Texto do Versículo */
.dict-word-token {
    display: inline-block;
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.dict-word-token.key-word {
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 2px solid rgba(37, 99, 235, 0.35);
}

.dict-word-token.key-word:hover {
    background: rgba(37, 99, 235, 0.12);
    border-bottom-color: var(--accent-color);
}

.dict-word-token.stopword {
    color: var(--secondary-color);
    opacity: 0.85;
}

.dict-word-token.stopword:hover {
    background: rgba(0, 0, 0, 0.05);
    opacity: 1;
}

.dict-word-token.active-word {
    background: #2563eb !important;
    color: #ffffff !important;
    border-bottom-color: transparent !important;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.4);
}

[data-theme="dark"] .dict-word-token.key-word {
    border-bottom-color: rgba(16, 185, 129, 0.45);
}

[data-theme="dark"] .dict-word-token.key-word:hover {
    background: rgba(16, 185, 129, 0.15);
    border-bottom-color: #10b981;
}

[data-theme="dark"] .dict-word-token.active-word {
    background: #10b981 !important;
    color: #09090b !important;
    box-shadow: 0 1px 6px rgba(16, 185, 129, 0.5);
}

/* Card do Dicionário */
.dict-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 1.25rem 1.4rem;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.03));
}

.dict-card:hover {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.05));
}

[data-theme="dark"] .dict-card {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .dict-card:hover {
    border-color: var(--accent-color, #10b981);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.dict-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.dict-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dict-term {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color);
}

[data-theme="dark"] .dict-term {
    color: #fafafa;
}

.dict-badge-classe {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--secondary-color);
    background: rgba(0, 0, 0, 0.04);
    padding: 2px 8px;
    border-radius: 6px;
}

[data-theme="dark"] .dict-badge-classe {
    background: rgba(255, 255, 255, 0.08);
    color: #a1a1aa;
}

.badge-escopo-global {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

[data-theme="dark"] .badge-escopo-global {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.dict-etimologia-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

.dict-badge-strong {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.25);
}

[data-theme="dark"] .dict-badge-strong {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

.dict-badge-lang {
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(100, 116, 139, 0.1);
    color: var(--secondary-color);
}

[data-theme="dark"] .dict-badge-lang {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

.dict-definition-curta {
    font-size: 1.02rem;
    line-height: 1.65;
    font-weight: 500;
    color: var(--text-color);
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

[data-theme="dark"] .dict-definition-curta {
    color: #f4f4f5;
}

.dict-definition-completa {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary, #475569);
    margin-bottom: 0.6rem;
}

[data-theme="dark"] .dict-definition-completa {
    color: #cbd5e1;
}

.dict-section {
    margin-top: 0.75rem;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    background: var(--bg-hover, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
}

[data-theme="dark"] .dict-section {
    background: #202025;
    border-color: rgba(255, 255, 255, 0.08);
}

.dict-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

[data-theme="dark"] .dict-section-title {
    color: #fafafa;
}

.dict-section-content {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-color);
}

[data-theme="dark"] .dict-section-content {
    color: #e4e4e7;
}

.dict-references-section {
    margin-top: 0.85rem;
}

.dict-references-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 0.4rem;
}

.dict-references-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dict-ref-chip {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--accent-color, #2563eb);
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dict-ref-chip:hover {
    background: rgba(37, 99, 235, 0.1);
    border-color: var(--accent-color, #2563eb);
    transform: translateY(-1px);
}

[data-theme="dark"] .dict-ref-chip {
    background: #202025;
    border-color: rgba(255, 255, 255, 0.14);
    color: #34d399;
}

[data-theme="dark"] .dict-ref-chip:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

@media (max-width: 650px) {
    .modal-dicionario-fullscreen-content {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
}

/* Container e Rolagem (Scrollbar) do Modal do Dicionário */
.modal-dicionario-fullscreen-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

.modal-dicionario-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1.25rem 1.5rem 4.5rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
}

/* Barra de rolagem visível e estilizada */
.modal-dicionario-body::-webkit-scrollbar {
    width: 8px;
}

.modal-dicionario-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

.modal-dicionario-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

.modal-dicionario-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .modal-dicionario-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .modal-dicionario-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .modal-dicionario-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}