/* CSS VARIABLES FOR THEMES */
:root, body[data-theme='default'] {
    --color-bg-primary: #111827; /* bg-gray-900 */
    --color-bg-secondary: #1f2937; /* bg-gray-800 */
    --color-bg-tertiary: #374151; /* bg-gray-700 */
    --color-border: #374151; /* border-gray-700 */
    --color-text-primary: #d1d5db; /* text-gray-300 */
    --color-text-secondary: #9ca3af; /* text-gray-400 */
    --color-text-light: #f3f4f6; /* text-gray-100 */
    --color-accent: #facc15; /* yellow-400 */
    --color-accent-hover: #fbbf24; /* yellow-500 */
    --color-accent-text: #111827; /* gray-900 */
    --color-highlight-border: #facc15;
}

body[data-theme='sunset'] {
    --color-bg-primary: #2c1b3e; --color-bg-secondary: #4a2a5b; --color-bg-tertiary: #6a3a7b; --color-border: #6a3a7b; --color-text-primary: #f5d0a9; --color-text-secondary: #e6a4b4; --color-text-light: #fef3c7; --color-accent: #f97316; --color-accent-hover: #fb923c; --color-accent-text: #ffffff; --color-highlight-border: #f97316;
}
body[data-theme='forest'] {
    --color-bg-primary: #2a2721; --color-bg-secondary: #3d3931; --color-bg-tertiary: #5a5349; --color-border: #5a5349; --color-text-primary: #d4d4d4; --color-text-secondary: #a3a3a3; --color-text-light: #f5f5f5; --color-accent: #22c55e; --color-accent-hover: #4ade80; --color-accent-text: #111827; --color-highlight-border: #22c55e;
}
html, body { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { font-family: 'Inter', sans-serif; display: flex; flex-direction: column; min-height: 100vh; background-color: var(--color-bg-primary); color: var(--color-text-primary); transition: background-color 0.3s ease, color 0.3s ease; }
.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: var(--color-bg-secondary); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--color-bg-tertiary); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #6b7280; }
.tooltip { position: absolute; background-color: var(--color-bg-secondary); color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 0.9rem; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; z-index: 1000; max-width: 300px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); line-height: 1.4; transform: translateY(5px); border: 1px solid var(--color-accent); }
.tooltip.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scripture-popover { position: absolute; background-color: var(--color-bg-primary); color: var(--color-text-primary); padding: 12px 16px; border-radius: 8px; font-size: 0.95rem; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; z-index: 1001; max-width: 350px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); line-height: 1.5; transform: translateY(5px); border: 1px solid var(--color-accent); }
.scripture-popover.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scripture-ref { color: var(--color-accent); cursor: pointer; border-bottom: 1px dashed var(--color-accent); transition: background-color 0.2s; }
.scripture-ref:hover { background-color: rgba(250, 204, 21, 0.1); }
.scripture-ref.external { opacity: 0.7; cursor: help; }
.highlighted-term { background-color: rgba(250, 204, 21, 0.1); cursor: help; border-bottom: 1px dotted var(--color-accent); padding: 1px 2px; border-radius: 3px; color: var(--color-text-light); transition: background-color 0.2s; }
.highlighted-term:hover { background-color: rgba(250, 204, 21, 0.25); }
.treemap-node rect { stroke: var(--color-bg-primary); transition: stroke 0.2s ease-in-out; }
.treemap-node.selected-category rect { stroke: var(--color-accent); stroke-width: 3px; }
.treemap-node text { font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); pointer-events: none; fill: white; }
.treemap-node tspan { font-size: 0.8em; }
#category-constellation-svg, #treemap-svg { overflow: visible; }
.spinner { border: 4px solid rgba(255, 255, 255, 0.1); border-left-color: var(--color-accent); border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.sidebar { position: fixed; top: 0; left: -280px; width: 280px; height: 100%; background-color: var(--color-bg-secondary); box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); transition: left 0.3s ease-in-out; z-index: 100; display: flex; flex-direction: column; padding: 1.5rem; border-right: 1px solid var(--color-border); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sidebar.open { left: 0; }
.sidebar-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 64; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }
.sidebar-backdrop.open { opacity: 1; visibility: visible; }
main { padding-top: 4rem; position: relative;
    z-index: 0; }
.search-input-field { width: 0; opacity: 0; padding: 0; border: none; transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out, border 0.3s ease-in-out; background-color: var(--color-bg-tertiary); color: var(--color-text-primary); }
.search-input-field.open { width: 250px; opacity: 1; padding: 0.5rem 1rem; border: 1px solid #4b5563; }
.card { background-color: var(--color-bg-secondary); border-radius: 0.75rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); padding: 1.5rem; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--color-border); }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.card-title { font-size: 1.25rem; font-weight: 600; color: var(--color-text-light); margin-bottom: 0.75rem; }
.card-text { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.5; flex-grow: 1; }
.card-footer { margin-top: 1rem; display: flex; flex-wrap: gap: 0.5rem; }
.card-highlight { transition: box-shadow 0.3s ease-in-out; box-shadow: 0 0 0 3px var(--color-accent, #FBBF24); }
.detail-card { background-color: var(--color-bg-secondary); border-radius: 1.5rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); padding: 2.5rem; border: 1px solid var(--color-border); }
.favorite-btn { color: var(--color-text-secondary); cursor: pointer; transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; }
.favorite-btn:hover { color: var(--color-accent); transform: scale(1.2); }
.favorite-btn.fas { color: var(--color-accent); }
.fixed-header-bar { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(17, 24, 39, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 90; padding: 0.5rem 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); }
.hamburger-button, .search-icon-button, .fixed-home-button { padding: 0.5rem; border-radius: 0.5rem; }
.hamburger-button i, .search-icon-button i, .fixed-home-button i { color: var(--color-text-primary); }
.hamburger-button:hover, .search-icon-button:hover, .fixed-home-button:hover { background-color: var(--color-bg-tertiary); }
.glossary-filter-content { position: absolute; right: 0; margin-top: 0.5rem; width: 12rem; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); z-index: 20; visibility: hidden; opacity: 0; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; transform: translateY(-10px); }
.glossary-filter-content.open { visibility: visible; opacity: 1; transform: translateY(0); }
.embedded-iframe { width: 100%; height: 80vh; border: none; border-radius: 0.75rem; }
.article-iframe-container { padding: 0 !important; background-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.sidebar-nav-button { text-align: left; font-size: 1.125rem; padding: 0.5rem 1rem; border-radius: 0.5rem; color: var(--color-text-primary); font-weight: 600; transition: all 0.2s ease; }
.sidebar-nav-button:hover { background-color: var(--color-bg-tertiary); color: var(--color-text-light); }
.submenu-container { margin-top: 0.5rem; }
.submenu-title { font-size: 1.125rem; font-weight: 600; color: var(--color-text-primary); margin-bottom: 0.75rem; display: flex; align-items: center; cursor: pointer; padding: 0.5rem; border-radius: 0.5rem; }
.submenu-title:hover { background-color: var(--color-bg-tertiary); }
.submenu-title .arrow-icon { margin-left: auto; transition: transform 0.2s ease-in-out; }
.submenu-title.open .arrow-icon { transform: rotate(90deg); }
.submenu-items { display: none; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; padding-left: 1rem; }
.submenu-items.open { display: block; max-height: 500px; }
.submenu-item-button { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.95rem; color: var(--color-text-secondary); transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }
.submenu-item-button:hover { background-color: var(--color-bg-tertiary); color: var(--color-text-light); }
.submenu-item-highlight { font-size: 0.9rem !important; font-weight: 600; color: var(--color-accent) !important; background-color: rgba(250, 204, 21, 0.1); border-left: 3px solid var(--color-accent); }
.submenu-item-highlight:hover { background-color: rgba(250, 204, 21, 0.2) !important; color: var(--color-accent-hover) !important; }
.image-modal, .analysis-modal, .category-detail-modal, .constellation-fullscreen-modal, .treemap-fullscreen-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 110; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 1rem; }
.image-modal.open, .analysis-modal.open, .category-detail-modal.open, .constellation-fullscreen-modal.open, .treemap-fullscreen-modal.open { opacity: 1; visibility: visible; }
.analysis-modal-content, .category-detail-modal-content, .image-modal-content, .create-album-modal-content { position: relative; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 1.5rem; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); padding: 2rem; max-width: 90%; max-height: 90%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.create-album-modal-content { border-top: 4px solid var(--color-accent); }
.constellation-fullscreen-modal .constellation-fullscreen-container, .treemap-fullscreen-modal .treemap-fullscreen-container { background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 1rem; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); width: 95vw; height: 95vh; padding: 1rem; }
.constellation-fullscreen-container svg, .treemap-fullscreen-container svg { width: 100%; height: 100%; }
.analysis-modal-close-btn, .category-detail-modal-close-btn, .constellation-modal-close-btn, .treemap-modal-close-btn, .image-modal-close-btn { position: absolute; top: 1rem; right: 1rem; background-color: var(--color-bg-tertiary); color: var(--color-text-primary); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; z-index: 120; }
.analysis-modal-close-btn:hover, .category-detail-modal-close-btn:hover, .constellation-modal-close-btn:hover, .treemap-modal-close-btn:hover, .image-modal-close-btn:hover { background-color: #4b5563; transform: scale(1.08); }
.analysis-modal-title, .category-detail-modal-title { font-size: 2rem; font-weight: 700; color: var(--color-accent); margin-bottom: 1.5rem; text-align: center; display: flex; align-items: center; justify-content: center; }
.analysis-modal-text, .category-detail-modal-text { font-size: 1.1rem; color: var(--color-text-primary); line-height: 1.7; }
#page-home .home-header-content-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 3; background-color: transparent; }
#page-home .home-header-content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 2rem; }
#page-home .home-sticky-parent { position: relative; z-index: 1; }
#page-home .home-video-sticky-container { height: 100vh; width: 100%; position: sticky; top: 0; z-index: 1; }
#page-home #home-video-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.1); min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 1; object-fit: cover; }
video::-webkit-media-controls { display: none !important; }
video::-webkit-media-controls-enclosure { display: none !important; }
#page-home .home-video-sticky-container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(17, 24, 39, 0.6); z-index: 2; }
#page-home #home-animation-container { position: relative; z-index: 2; width: 100%; background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse"><circle fill="%23283242" cx="1" cy="1" r="1"></circle></pattern></defs><rect x="0" y="0" width="100%" height="100%" fill="url(%23dots)"></rect></svg>'); }
#page-home #home-animation-sticky-wrapper { height: 300vh; position: relative; }
#page-home #home-animation-canvas { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; }
#page-home #home-animation-overlay { position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 20%, rgba(17, 24, 39, 0.6) 60%, rgb(17, 24, 39) 95%); z-index: 2; pointer-events: none; }
#page-home #home-animation-text-container h2 { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
#page-home #background-animation-container { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity 0.5s ease-in-out; }
#page-home .home-particle { position: absolute; display: flex; justify-content: center; align-items: center; color: transparent; font-size: 0.8rem; font-weight: bold; transition: color 0.4s ease-out, transform 0.4s ease-out; will-change: color, transform; }
#page-home .home-particle::before { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background-color: var(--color-accent); box-shadow: 0 0 8px var(--color-accent), 0 0 12px var(--color-accent); transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; }
#page-home .home-particle.show-number::before { opacity: 0; transform: scale(0); }
#page-home .home-particle.show-number { width: auto; height: auto; background-color: rgba(17, 24, 39, 0.5); border: 1px solid rgba(251, 191, 36, 0.5); border-radius: 4px; box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); color: var(--color-accent); padding: 0.25rem 0.5rem; transform: scale(1.2); z-index: 10; }
#page-home .home-particle.highlight::before { width: 8px; height: 8px; box-shadow: 0 0 15px #fff, 0 0 25px var(--color-accent); }
#page-home .home-analysis-icon { position: absolute; font-size: 2.5rem; color: var(--color-accent); opacity: 0; transform: translateY(40px) scale(0.5); transition: opacity 0.8s ease-out, transform 0.8s ease-out; will-change: transform, opacity; }
#page-home #home-animation-text-container { color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 90%; max-width: 600px; z-index: 10; background: radial-gradient(circle, rgba(17, 24, 39, 0.4) 0%, rgba(17, 24, 39, 0) 80%); padding: 2rem; border-radius: 50%; }
#page-home .home-animation-text-content { opacity: 0; transition: opacity 0.5s ease-in-out; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
#page-home .home-animation-text-content.active { opacity: 1; }
#page-home #home-animation-panels { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
#page-home .home-animation-panel-trigger { width: 100%; height: 100vh; }
#page-home #home-final-cta { position: relative; z-index: 3; }
#page-home .home-tool-card { background: var(--color-bg-secondary); padding: 2rem; border-radius: 1rem; border: 1px solid var(--color-border); transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; cursor: default; }
#page-home .home-tool-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); border-color: var(--color-accent); }
#page-home .home-tool-card:active { transform: translateY(-5px) scale(0.98); box-shadow: 0 5px 10px rgba(0,0,0,0.2); }
#page-home .home-connector-line { stroke: rgba(251, 191, 36, 0.4); stroke-width: 1px; opacity: 0; animation: pulse-line 6s ease-in-out infinite; }
@keyframes pulse-line { 0%, 100% { opacity: 0; } 50% { opacity: 0.4; stroke-width: 1px; } }
#page-home .home-particle.pulse { background-color: rgba(55, 65, 81, 0.7); transform: scale(1.1); border-color: rgba(251, 191, 36, 0.5); }
@media (max-width: 767px) { #page-home .home-tool-card { padding: 1.5rem; text-align: center; } #page-home .home-tool-card h3 { font-size: 1.1rem; } #page-home .home-tool-card p { font-size: 0.9rem; } }
#gyro-toggle-btn.active { background-color: var(--color-accent); }
#gyro-toggle-btn.active i { color: var(--color-accent-text); }
.toggle-bg { transition: background-color 0.2s ease; }
input:checked ~ .toggle-bg { background-color: var(--color-accent); }
input:checked ~ .toggle-bg + .toggle-dot { background-color: var(--color-accent-text); }
input + .toggle-bg + .toggle-dot { transition: transform 0.2s ease; }
#toggle-analysis-switch:checked + .toggle-bg + .toggle-dot { transform: translateX(1rem); }
.category-description-card { background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.75rem; border: 1px solid var(--color-border); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.category-description-card:hover { background-color: var(--color-bg-tertiary); border-color: #4b5563; }
.constellation-link { stroke: #4b5563; }
.constellation-node circle { stroke: var(--color-bg-primary); }
.psalm-tag { background-color: var(--color-bg-tertiary); color: var(--color-text-light); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease-in-out; border: 1px solid #4b5563; }
.psalm-tag:hover { background-color: #4b5563; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
#page-article-view #article-view-content { background-color: transparent !important; padding: 0 !important; box-shadow: none !important; border: none !important; }
#glossary-search-container .glossary-search-input { width: 100%; background-color: var(--color-bg-tertiary); border: 1px solid #4b5563; color: var(--color-text-primary); border-radius: 0.5rem; padding: 0.5rem 1rem; padding-right: 2.5rem; transition: all 0.2s ease-in-out; }
#glossary-search-container .glossary-search-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5); outline: none; }
#glossary-alphabet-nav-horizontal { justify-content: space-between; -webkit-overflow-scrolling: touch; }
.glossary-pill-btn { width: 100%; text-align: left; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.9rem; color: var(--color-text-secondary); transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }
.glossary-pill-btn:hover { background-color: var(--color-bg-tertiary); color: var(--color-text-light); }
.glossary-pill-btn.active { background-color: var(--color-accent); color: var(--color-accent-text); font-weight: 600; }
.reflection-section, .quote-section { padding: 1rem; border-radius: 0.5rem; margin-top: 1rem; font-size: 0.9rem; line-height: 1.4; background-color: var(--color-bg-primary); border-left-width: 4px; }
.reflection-section { border-color: var(--color-accent); color: var(--color-text-primary); }
.quote-section { border-color: #60a5fa; color: var(--color-text-primary); }
.reflection-section .font-semibold, .quote-section .font-semibold { color: var(--color-text-light); }
.alphabet-filter-button { background-color: var(--color-bg-tertiary); color: var(--color-text-primary); padding: 0.4rem 0.7rem; border-radius: 0.3rem; font-weight: 600; transition: all 0.2s ease-in-out; cursor: pointer; border: 1px solid transparent; white-space: nowrap; min-width: 35px; text-align: center; }
.alphabet-filter-button:hover { background-color: #4b5563; transform: translateY(-1px); }
.alphabet-filter-button.active { background-color: var(--color-accent); color: var(--color-accent-text); border-color: var(--color-accent-hover); }
.explorer-pill-btn { padding: 0.5rem 1.5rem; border-radius: 9999px; font-weight: 600; font-size: 0.8rem; color: var(--color-text-secondary); background-color: transparent; transition: all 0.2s ease-in-out; border: none; }
.explorer-pill-btn.active { background-color: var(--color-accent); color: var(--color-accent-text); }
.explorer-pill-btn:hover:not(.active) { background-color: var(--color-bg-tertiary); color: var(--color-text-light); }
.auth-tab, .account-tab, .collection-tab { padding: 0.75rem 1.5rem; font-weight: 600; color: var(--color-text-secondary); border-bottom: 3px solid transparent; transition: all 0.2s ease-in-out; cursor: pointer; }
.auth-tab.active, .account-tab.active, .collection-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.auth-input { background-color: var(--color-bg-tertiary); border: 1px solid #4b5563; color: var(--color-text-primary); }
.auth-input:focus { border-color: var(--color-accent); ring: var(--color-accent); }
.tab-pane, .account-tab-pane { display: none; }
.tab-pane.active, .account-tab-pane.active { display: block; }
.collection-list-item { background-color: var(--color-bg-tertiary); padding: 0.75rem 1rem; border-radius: 0.5rem; cursor: pointer; transition: background-color 0.2s ease-in-out; border: 1px solid #4b5563; }
.collection-list-item:hover { background-color: #4b5563; }
.form-checkbox { background-color: var(--color-bg-tertiary); border-color: var(--color-border); color: var(--color-accent); height: 1.25rem; width: 1.25rem; border-radius: 0.25rem; }
.form-checkbox:checked { background-color: var(--color-accent); }
.theme-picker-button { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 8px; border-radius: 8px; border: 2px solid transparent; transition: all 0.2s ease-in-out; }
.theme-picker-button:hover { background-color: var(--color-bg-tertiary); }
.theme-picker-button.active { border-color: var(--color-accent); background-color: var(--color-bg-secondary); }
.theme-picker-button .theme-label { margin-top: 8px; font-weight: 600; font-size: 0.9rem; color: var(--color-text-primary); }
.theme-picker-button div[class^="theme-preview-"] { width: 60px; height: 40px; border-radius: 6px; border: 1px solid var(--color-border); display: flex; overflow: hidden; }
.theme-preview-default { background: linear-gradient(45deg, #1f2937 50%, #facc15 50%); }
.theme-preview-sunset { background: linear-gradient(45deg, #4a2a5b 50%, #f97316 50%); }
.theme-preview-forest { background: linear-gradient(45deg, #3d3931 50%, #22c55e 50%); }
.collection-card-grid { position: relative; width: 280px; height: 180px; background-color: var(--color-bg-secondary); border-radius: 0.75rem; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; justify-content: flex-end; }
.collection-card-grid:hover { transform: scale(1.03); }
.collection-card-grid .card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.85) 20%, rgba(0,0,0,0) 60%); transition: background 0.3s ease; }
.collection-card-grid:hover .card-overlay { background: linear-gradient(to top, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.1) 70%); }
.collection-card-grid .card-content { position: relative; z-index: 2; padding: 1.5rem; color: white; }
.collection-card-grid .card-title { color: white; }
.collection-card-grid .card-text { color: var(--color-text-primary); }
.collection-action-btn { background-color: rgba(17, 24, 39, 0.7); color: var(--color-text-primary); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); transition: all 0.2s ease; }
.collection-action-btn:hover { background-color: var(--color-bg-secondary); transform: scale(1.1); }
.collection-action-btn.delete:hover { color: #ef4444; }
.collection-card-list { display: flex; gap: 1rem; align-items: start; padding: 1rem; background-color: var(--color-bg-secondary); border-radius: 0.5rem; border: 1px solid var(--color-border); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; position: relative; }
.collection-card-list:hover { background-color: var(--color-bg-tertiary); border-color: var(--color-highlight-border); }
.collection-card-grid.locked::after, .collection-card-list.locked::after { content: '\f023'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.7); color: white; font-size: 3rem; z-index: 4; border-radius: 0.75rem; }
.collection-card-list.locked::after { border-radius: 0.5rem; }
.collection-card-grid.locked, .collection-card-list.locked { cursor: not-allowed; }
.guide-detail-header { height: 40vh; min-height: 300px; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; border-radius: 1.5rem; overflow: hidden; }
.guide-detail-header-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1; }
.guide-detail-header h2 { position: relative; z-index: 2; text-shadow: 2px 2px 8px rgba(0,0,0,0.7); }
.guide-detail-body { padding: 2rem 0; }
.guide-intro-card { background-color: var(--color-bg-secondary); border-radius: 1rem; border-left: 5px solid var(--color-accent); padding: 2rem; }
.guide-psalm-item { display: flex; align-items: center; gap: 1rem; background-color: var(--color-bg-secondary); border-radius: 0.5rem; padding: 1rem; cursor: pointer; transition: background-color 0.2s ease; }
.guide-psalm-item:hover { background-color: var(--color-bg-tertiary); }
.guide-editor-section { border-top: 1px solid var(--color-border); padding-top: 1.5rem; margin-top: 1.5rem; }
.guide-editor-label { display: block; font-size: 1.125rem; font-weight: 600; color: var(--color-text-light); margin-bottom: 0.75rem; }
.guide-editor-input, .guide-editor-textarea { width: 100%; background-color: var(--color-bg-primary); border: 1px solid var(--color-border); color: var(--color-text-primary); border-radius: 0.5rem; padding: 0.75rem 1rem; transition: border-color 0.2s; }
.guide-editor-input:focus, .guide-editor-textarea:focus { outline: none; border-color: var(--color-accent); }
.guide-editor-textarea { min-height: 120px; resize: vertical; }
.guide-editor-psalm-item, .guide-editor-plan-row { display: flex; align-items: center; gap: 1rem; background-color: var(--color-bg-primary); border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 0.5rem; }
.guide-editor-psalm-item .psalm-number { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg-tertiary); border-radius: 0.375rem; font-weight: bold; color: var(--color-accent); }
.guide-editor-remove-btn { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; margin-left: auto; padding: 0.5rem; border-radius: 50%; }
.guide-editor-remove-btn:hover { color: #ef4444; background-color: var(--color-bg-tertiary); }
.discipline-plan-card { background-color: var(--color-bg-secondary); border-top: 3px solid var(--color-accent); border-radius: 0.75rem; padding: 1.5rem; margin-top: 2rem; }
.start-plan-btn { background-color: var(--color-accent); color: var(--color-accent-text); padding: 0.75rem 1.5rem; border-radius: 9999px; font-weight: 600; transition: all 0.2s ease-in-out; display: inline-flex; align-items: center; gap: 0.5rem; }
.start-plan-btn:hover { background-color: var(--color-accent-hover); transform: scale(1.05); }
.plan-progress-bar-container { width: 100%; background-color: var(--color-bg-tertiary); border-radius: 9999px; height: 10px; overflow: hidden; }
.plan-progress-bar { height: 100%; background-color: var(--color-accent); border-radius: 9999px; transition: width 0.5s ease-in-out; }
.plan-day-card { background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: 0.75rem; margin-bottom: 0.5rem; overflow: hidden; transition: background-color 0.2s ease; }
.plan-day-card:hover { background-color: var(--color-bg-tertiary); }
.plan-day-header { padding: 0.75rem 1rem; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }
.plan-day-card.completed { opacity: 0.7; }
.plan-day-card.completed .plan-day-title-container { text-decoration: line-through; }
.plan-day-number-box { background-color: var(--color-bg-tertiary); color: var(--color-text-light); font-weight: bold; border-radius: 6px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.plan-day-title-container { min-width: 0; flex-grow: 1; }
.plan-day-title { color: var(--color-text-light); white-space: normal; }
.plan-day-verb { color: var(--color-accent); font-weight: 800; text-transform: uppercase; text-shadow: 0 0 5px var(--color-accent); }
.plan-day-psalm { color: var(--color-text-secondary); font-size: 0.85rem; margin-top: 0.25rem; }
.plan-day-psalm-link { cursor: pointer; text-decoration: underline; text-decoration-style: dashed; font-weight: 600; }
.plan-day-psalm-link:hover { color: var(--color-accent); }
.plan-day-expand-icon { transition: transform 0.3s ease; }
.plan-day-card.open .plan-day-expand-icon { transform: rotate(180deg); }
.plan-day-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; padding: 0 1rem; }
.plan-day-card.open .plan-day-content { max-height: 500px; padding: 1rem; padding-left: calc(40px + 1rem + 1rem); }
.plan-notes-textarea { width: 100%; background-color: var(--color-bg-tertiary); border: 1px solid var(--color-border); color: var(--color-text-primary); border-radius: 0.5rem; padding: 0.75rem 1rem; min-height: 100px; transition: border-color 0.2s; }
.plan-notes-textarea:focus { outline: none; border-color: var(--color-accent); }
#admin-module-container { background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.5rem; margin-bottom: 2rem; }
.admin-module-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.admin-guides-list-container { display: flex; flex-direction: column; gap: 0.75rem; }
.admin-guide-item { display: grid; grid-template-columns: minmax(120px, 1.5fr) minmax(120px, 1fr) auto; gap: 1rem; align-items: center; padding: 0.75rem 1rem; background-color: var(--color-bg-primary); border-radius: 0.5rem; }
.admin-guide-item .category-name { font-weight: 600; color: var(--color-text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-guide-item .status { font-size: 0.8rem; font-weight: 700; padding: 0.25rem 0.5rem; border-radius: 9999px; text-transform: uppercase; text-align: center; }
.status-generated { background-color: #166534; color: #dcfce7; }
.status-not-generated { background-color: #4b5563; color: #d1d5db; }
.admin-guide-item .actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.admin-button { padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; transition: all 0.2s ease; border: none; cursor: pointer; display: inline-flex; align-items: center; }
.admin-button.primary { background-color: var(--color-accent); color: var(--color-accent-text); }
.admin-button.primary:hover { opacity: 0.9; }
.admin-button.secondary { background-color: var(--color-bg-tertiary); color: var(--color-text-light); }
.admin-button.secondary:hover { background-color: #4b5563; }
.admin-button.danger { background-color: #991b1b; color: #fecaca; }
.admin-button.danger:hover { background-color: #b91c1c; }
.admin-button:disabled { opacity: 0.5; cursor: not-allowed; }
.horizontal-carousel { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1.5rem; scrollbar-width: thin; scrollbar-color: var(--color-bg-tertiary) transparent; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.horizontal-carousel::-webkit-scrollbar { height: 8px; }
.horizontal-carousel::-webkit-scrollbar-thumb { background-color: var(--color-bg-tertiary); border-radius: 10px; }
.horizontal-carousel > * { scroll-snap-align: start; flex-shrink: 0; }
.rich-card { position: relative; width: 280px; height: 180px; background-color: var(--color-bg-secondary); border-radius: 0.75rem; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; border: 1px solid var(--color-border); background-size: cover; background-position: center; }
.rich-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.rich-card[style*="background-image"] { color: white; }
.rich-card[style*="background-image"]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(17, 24, 39, 0.9) 20%, rgba(17, 24, 39, 0.2) 60%); z-index: 1; border-radius: 0.75rem; }
.rich-card-header, .rich-card-body, .rich-card-footer { position: relative; z-index: 2; }
.rich-card-header { padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.card-type-indicator { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); background-color: rgba(17, 24, 39, 0.5); padding: 0.25rem 0.5rem; border-radius: 99px; }
.rich-card[style*="background-image"] .card-type-indicator { color: rgba(255,255,255,0.8); text-shadow: 0 1px 3px rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); }
.card-actions-btn { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); color: var(--color-text-secondary); cursor: pointer; padding: 0.5rem; border-radius: 50%; transition: background-color 0.2s; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; z-index: 11; }
.card-actions-btn:hover { background-color: var(--color-bg-tertiary); color: var(--color-text-light); }
.rich-card-body { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 1rem; }
.rich-card-title { font-size: 1.1rem; font-weight: 700; color: var(--color-text-light); line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.rich-card-footer { padding: 0.75rem 1rem; }
.card-meta-info { font-size: 0.85rem; color: var(--color-text-secondary); font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.rich-card[style*="background-image"] .card-meta-info { color: rgba(255,255,255,0.8); }
.card-progress-bar-container { background-color: rgba(0,0,0,0.3); border-radius: 99px; height: 6px; overflow: hidden; margin-top: 4px; }
.card-progress-bar { height: 100%; background-color: var(--color-accent); border-radius: 99px; }
.card-actions-menu { position: absolute; top: 2.75rem; right: 0.5rem; background-color: var(--color-bg-tertiary); border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 20; overflow: hidden; min-width: 150px; }
.card-actions-menu button { display: flex; width: 100%; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: none; border: none; color: var(--color-text-primary); text-align: left; cursor: pointer; font-size: 0.9rem; }
.card-actions-menu button:hover { background-color: var(--color-accent); color: var(--color-accent-text); }
.card-actions-menu button .fa-trash { color: #ef4444; }
.card-actions-menu button:hover .fa-trash { color: var(--color-accent-text); }
.create-button-sm { display: inline-flex; justify-content: center; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); padding: 0.5rem 1rem; background-color: var(--color-accent); font-size: 0.875rem; font-weight: 700; color: var(--color-accent-text); }
.create-button-sm:hover { background-color: var(--color-accent-hover); }
.collection-action-button, .collection-action-button-delete { background-color: var(--color-bg-tertiary); color: var(--color-text-primary); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: background-color 0.2s ease; }
.collection-action-button:hover { background-color: var(--color-accent); color: var(--color-accent-text); }
.collection-action-button-delete { background-color: #581c1c; color: #fca5a5; }
.collection-action-button-delete:hover { background-color: #991b1b; color: white; }
.tab-pane.view-list .horizontal-carousel { flex-direction: column; gap: 0.5rem; padding-bottom: 0; overflow-x: hidden; }
.collection-list-item-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; background-color: var(--color-bg-secondary); border-radius: 0.5rem; border: 1px solid var(--color-border); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; position: relative; }
.collection-list-item-row:hover { background-color: var(--color-bg-tertiary); border-color: var(--color-highlight-border); }
#add-psalms-list .psalm-item { display: flex; align-items: center; padding: 0.75rem; border-radius: 0.5rem; transition: background-color 0.2s ease; }
#add-psalms-list .psalm-item:hover { background-color: var(--color-bg-tertiary); }
#add-psalms-list .psalm-item input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-right: 1rem; }
.psalm-card-wrapper { position: relative; overflow: hidden; border-radius: 0.75rem; }
.psalm-card-deletable { transition: transform 0.3s ease; position: relative; z-index: 2; background-color: var(--color-bg-secondary); }
.psalm-card-wrapper.is-swiped .psalm-card-deletable { transform: translateX(-80px); }
.delete-action-container { position: absolute; top: 0; right: 0; width: 80px; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #991b1b; z-index: 1; }
.delete-action-container button { background: none; border: none; color: white; cursor: pointer; font-size: 1.5rem; }
/* --- INICIO DE LA SOLUCIÓN: Ocultar el contenedor de "swipe" en desktop --- */
/* @media (hover: hover) significa que es un dispositivo con mouse (no-táctil) */
@media (hover: hover) and (pointer: fine) {
    .delete-action-container {
        display: none !important;
    }
}
/* --- FIN DE LA SOLUCIÓN --- */
body .bg-yellow-500 { background-color: var(--color-accent); color: var(--color-accent-text); }
body .bg-yellow-500:hover { background-color: var(--color-accent-hover); }
body .text-yellow-400 { color: var(--color-accent); }
body .text-yellow-300 { color: var(--color-accent); opacity: 0.9; }
@media (max-width: 767px) { .analysis-modal-content.max-w-lg, .create-album-modal-content { max-width: 95%; padding: 1.5rem; } #auth-modal .max-w-md { max-width: 95%; padding: 1rem; } #auth-modal #auth-content { padding: 1rem; } #auth-modal h3 { font-size: 1.25rem; } #account-modal .analysis-modal-content.max-w-2xl, #personalized-guide-wizard-modal .analysis-modal-content.max-w-2xl { max-width: 95%; padding: 1rem; } #account-modal .analysis-modal-title, #personalized-guide-wizard-modal .analysis-modal-title { font-size: 1.5rem; } .plan-day-header { padding: 0.5rem 0.75rem; gap: 0.75rem; } .plan-day-title { font-size: 0.9rem; } .plan-day-psalm { font-size: 0.8rem; } .plan-day-number-box { width: 35px; height: 35px; font-size: 1rem; } .plan-day-card.open .plan-day-content { padding-left: calc(35px + 0.75rem + 0.75rem); } .admin-guide-item { grid-template-columns: 1fr auto; grid-template-areas: "name actions" "status actions"; } .admin-guide-item .category-name { grid-area: name; } .admin-guide-item .status { grid-area: status; justify-self: start; } .admin-guide-item .actions { grid-area: actions; } .rich-card { width: 240px; height: 160px; } .rich-card-title { font-size: 1rem; } .card-meta-info { font-size: 0.75rem; } .card-type-indicator { font-size: 0.7rem; } .collection-action-button .btn-text, .collection-action-button-delete .btn-text { display: none; } .collection-action-button, .collection-action-button-delete { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; } }
#treemap-container, #category-constellation-container { flex-grow: 1; display: flex; align-items: center; justify-content: center; }

/* --- EXPLORER PAGE STYLES --- */

/* 1. Advanced Filters Container */
/* This is now a separate card, visibility is controlled by the 'hidden' class in JS */
#advanced-filters-container {
    /* Transition for smooth opening */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#treemap-view-container {
    transition: all 0.3s ease;
    /* It is controlled via the 'hidden' class in JS, 
       so we don't need complex media queries forcing it to hide/show 
       unless you specifically want it ALWAYS open on desktop regardless of pill state. 
       If you want it purely on demand (pill click), leave this blank. */
}

/* Optional: If you want the treemap ALWAYS visible on desktop regardless of pills: */
/* @media (min-width: 1024px) {
    #treemap-view-container {
        display: flex !important;
/* 4. Search Input (Simple Styling) */
.search-container i {
    pointer-events: none;
}
#psalm-search:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.2);
}


#categories-filters-panel { display: none; max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; margin-top: 0; border-width: 0; transition: all 0.5s ease-in-out; }
#explorer-layout-manager.filters-active #explorer-filters-panel, #categories-layout-manager.filters-active #categories-filters-panel { max-height: 600px; opacity: 1; padding-top: 1.5rem; padding-bottom: 1.5rem; margin-top: 2rem; border-width: 1px; }

/* 6. Desktop State Overrides (Fixing visibility on >= 1024px) */
@media (min-width: 1024px) { 
    /* 1. Filter Panel: Always visible on desktop */
    #explorer-filters-panel { 
        display: flex !important; 
        max-height: initial !important; 
        opacity: 1 !important; 
        padding: 1.5rem; 
        margin-top: 0; 
        border-width: 1px; 
        transition: none; 
        flex-direction: column; 
        min-height: 600px;
    } 

    /* 2. Hide Mobile Header */
    #filters-header-mobile {
        display: none !important;
    }
    
    /* 3. Advanced Filters Dropdown: Always visible on desktop */
    #advanced-filters-dropdown {
        display: block !important;
        max-height: initial !important; 
        opacity: 1 !important;
        padding: 0 0 1.5rem 0; 
    }

    /* 4. Treemap: Always visible on desktop */
    #explorer-filters-panel #treemap-container {
        display: flex !important;
    }
}

#treemap-placeholder, #category-constellation-placeholder { display: none; }
@media (max-width: 640px) { #glossary-card-grid .card .card-content { padding: 1rem; } #glossary-card-grid .card .card-title { font-size: 1.1rem; } #glossary-card-grid .card .card-text { font-size: 0.85rem; line-height: 1.4; } }
@media (max-width: 1023px) { #explorer-filters-panel { height: 350px; } }
#explorer-filter-pills .explorer-pill-btn { padding: 0.5rem 1rem; font-size: 0.75rem; }
body.loading-in-progress main { visibility: hidden; }
#user-initials-avatar { line-height: 1; }
#user-menu-dropdown, #create-new-menu-collections { background-color: var(--color-bg-tertiary); border: 1px solid var(--color-border); }
#user-menu-logout-btn:hover { background-color: #ef4444; color: white !important; }
#user-menu-logout-btn:hover i { color: white; }
.toast-notification { width: 100%; max-width: 384px; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); padding: 1rem; display: flex; align-items: flex-start; gap: 1rem; animation: slideInRight 0.3s ease-out forwards, fadeOut 0.5s ease-in forwards 4.5s; }
.toast-notification .toast-icon { font-size: 1.25rem; color: var(--color-accent); flex-shrink: 0; margin-top: 0.25rem; }
.toast-notification .toast-content .title { font-weight: 700; color: var(--color-accent); }
.toast-notification .toast-content .message { font-size: 0.875rem; color: var(--color-text-primary); }
.toast-notification .toast-close { font-size: 1.25rem; margin-left: auto; color: var(--color-text-secondary); }
.toast-notification .toast-close:hover { color: var(--color-text-light); }
@keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-20px); } }
.interactive-list-item { padding: 0.75rem; border-radius: 0.5rem; transition: background-color 0.2s ease-in-out; cursor: pointer; }
.interactive-list-item:hover { background-color: var(--color-bg-tertiary); }
.secondary-actions-btn { background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease-in-out; }
.secondary-actions-btn:hover { background-color: #4b5563; color: var(--color-text-light); }
.secondary-actions-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 260px; background-color: var(--color-bg-secondary); border-radius: 0.75rem; border: 1px solid var(--color-border); box-shadow: 0 10px 20px rgba(0,0,0,0.25); z-index: 50; padding: 0.5rem; opacity: 0; transform: translateY(-10px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s; visibility: hidden; }
.secondary-actions-menu.open { opacity: 1; transform: translateY(0); visibility: visible; transition: opacity 0.2s ease, transform 0.2s ease; }
.secondary-actions-menu .menu-header { display: block; padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.secondary-actions-menu .menu-item { display: flex; width: 100%; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: none; border: none; color: var(--color-text-primary); text-align: left; cursor: pointer; font-size: 0.9rem; border-radius: 0.5rem; transition: background-color 0.2s ease, color 0.2s ease; }
.secondary-actions-menu .menu-item i { width: 16px; text-align: center; color: var(--color-text-secondary); transition: color 0.2s ease; }
.secondary-actions-menu .menu-item:hover { background-color: var(--color-accent); color: var(--color-accent-text); }
.secondary-actions-menu .menu-item:hover i { color: var(--color-accent-text); }
.secondary-actions-menu .menu-divider { height: 1px; background-color: var(--color-border); margin: 0.5rem 0; }
.section-toggle-btn { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; padding: 0.5rem; }
.section-toggle-btn .arrow-icon { transition: transform 0.3s ease-in-out; }
.section-toggle-btn .arrow-icon.rotated { transform: rotate(-180deg); }
.collection-section.draggable { cursor: grab; }
.collection-section.draggable:active { cursor: grabbing; }
.calendar-view-container { padding: 0.5rem; }
@media (min-width: 640px) { .calendar-view-container { padding: 1.5rem; } }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); border-radius: 0.75rem; overflow: hidden; background-color: var(--color-bg-secondary); }
.calendar-header-cell { text-align: center; font-weight: 600; color: var(--color-text-secondary); padding: 0.75rem 0.25rem; border-bottom: 2px solid var(--color-border); text-transform: capitalize; }
.calendar-day-cell { position: relative; padding: 0.5rem; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background-color 0.2s ease; min-height: 120px; display: flex; flex-direction: column; }
.calendar-day-cell:hover { background-color: var(--color-bg-tertiary); }
.calendar-day-number { font-weight: 600; margin-bottom: 0.25rem; color: var(--color-text-primary); }
.calendar-day-number.today { background-color: var(--color-accent); color: var(--color-accent-text); border-radius: 9999px; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; }
.calendar-day-tasks { flex-grow: 1; display: flex; flex-direction: column; gap: 0.25rem; overflow: hidden; }
.day-task-indicator { width: 100%; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.day-task-indicator.completed { background-color: rgba(74, 222, 128, 0.2) !important; color: #a7f3d0 !important; text-decoration: line-through; opacity: 0.7; }
.practice-modal-item { display: flex; align-items: center; padding: 1rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease; background-color: var(--color-bg-primary); border: 1px solid var(--color-border); }
.practice-modal-item:hover { transform: scale(1.02); border-color: var(--color-accent); }
.practice-modal-item .checkbox-container { width: 1.5rem; height: 1.5rem; border-radius: 50%; border-width: 2px; border-color: var(--color-border); margin-right: 1rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.practice-modal-item.completed .checkbox-container { background-color: var(--color-accent); border-color: var(--color-accent); }
.practice-modal-item.completed .practice-name { text-decoration: line-through; opacity: 0.6; }
.day-toggle { width: 2.25rem; height: 2.25rem; border-radius: 9999px; font-weight: 700; transition: all 0.2s ease-in-out; background-color: var(--color-bg-tertiary); color: var(--color-text-primary); }
.day-toggle:hover { background-color: #4b5563; }
.day-toggle.active { background-color: var(--color-accent); color: var(--color-accent-text); transform: scale(1.1); }
.agenda-filter-btn { padding: 0.5rem 1.5rem; border-radius: 9999px; font-weight: 600; font-size: 0.8rem; color: var(--color-text-secondary); background-color: transparent; transition: all 0.2s ease-in-out; border: none; }
.agenda-filter-btn.active { background-color: var(--color-accent); color: var(--color-accent-text); }
.agenda-filter-btn:hover:not(.active) { background-color: var(--color-bg-tertiary); color: var(--color-text-light); }
.checkbox-container-agenda { width: 1.5rem; height: 1.5rem; border-radius: 50%; border-width: 2px; border-color: var(--color-border); margin-right: 1rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.practice-modal-item.completed .checkbox-container-agenda { background-color: var(--color-accent); border-color: var(--color-accent); }
.fab { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 3.5rem; height: 3.5rem; background-color: var(--color-accent); color: var(--color-accent-text); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 55; opacity: 0.6; transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease; }
.fab:hover, .fab.fab-open { opacity: 1; }
.fab.fab-open i { transform: rotate(45deg); }
.fab-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 50; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }
.fab-backdrop.open { opacity: 1; visibility: visible; }
.form-container { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; }
.form-container.open { max-height: 1000px; }
.time-view-container { height: 70vh; display: flex; flex-direction: column; }
.time-grid, .time-grid-week { flex-grow: 1; overflow-y: auto; }
.all-day-section { padding: 0.5rem; border-bottom: 2px solid var(--color-border); }
.time-grid-row { display: flex; border-bottom: 1px solid var(--color-border); }
.time-label { flex-shrink: 0; width: 60px; text-align: right; padding-right: 10px; font-size: 0.75rem; color: var(--color-text-secondary); padding-top: 4px; }
.time-slot { flex-grow: 1; border-left: 1px solid var(--color-border); min-height: 50px; padding: 4px; }
.week-grid-header { display: grid; grid-template-columns: 60px repeat(7, 1fr); }
.week-header-cell { text-align: center; padding: 4px; border-bottom: 2px solid var(--color-border); }
.week-header-cell .day-number { font-size: 1.25rem; font-weight: bold; }
.week-header-cell.today .day-number { background-color: var(--color-accent); color: var(--color-accent-text); border-radius: 50%; width: 32px; height: 32px; margin: auto; display: flex; align-items: center; justify-content: center; }
.all-day-section-week { display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 2px solid var(--color-border); }
.all-day-label { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--color-text-secondary); }
.all-day-week-slot { border-left: 1px solid var(--color-border); padding: 4px; min-height: 30px; }
.time-grid-row-week { display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid var(--color-border); }
.time-slot-week { border-left: 1px solid var(--color-border); min-height: 50px; padding: 4px; }
.mobile-view-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 180px; background-color: var(--color-bg-secondary); border-radius: 0.75rem; border: 1px solid var(--color-border); box-shadow: 0 10px 20px rgba(0,0,0,0.25); z-index: 50; padding: 0.5rem; opacity: 1; transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease; }
.mobile-view-dropdown.hidden { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.mobile-view-dropdown .menu-item { display: flex; width: 100%; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: none; border: none; color: var(--color-text-primary); text-align: left; cursor: pointer; font-size: 0.9rem; font-weight: 600; border-radius: 0.5rem; transition: background-color 0.2s ease, color 0.2s ease; }
.mobile-view-dropdown .menu-item:hover { background-color: var(--color-accent); color: var(--color-accent-text); }
.agenda-action-btn { background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease-in-out; }
.agenda-action-btn:hover { color: var(--color-text-light); }
.agenda-action-btn.edit:hover { background-color: var(--color-accent); color: var(--color-accent-text); }
.agenda-action-btn.delete:hover { background-color: #991b1b; }
.flip-card { background-color: transparent; perspective: 1000px; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 0.75rem; }
.flip-card-front { background-color: #374151; color: #d1d5db; }
.flip-card-back { background-color: #1f2937; transform: rotateY(180deg); overflow-y: auto; }
.glossary-card-animate { opacity: 0; transform: translateY(20px); animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
#glossary-focus-container.visible { opacity: 1; }
#glossary-focus-container.visible #glossary-focus-card-wrapper { transform: scale(1) translateY(0); opacity: 1; }
#glossary-focus-card-wrapper { opacity: 0; transform: scale(0.95) translateY(20px); }
.rotate-180 { transform: rotate(180deg); }
#highlight-popover button { width: 100%; padding: 0.5rem; margin-top: 0.75rem; border-radius: 0.375rem; font-weight: 600; transition: background-color 0.2s; border: none; }
#highlight-popover .save-btn { background-color: var(--color-accent); color: var(--color-accent-text); }
#highlight-popover .save-btn:hover { background-color: var(--color-accent-hover); }
#highlight-popover .login-btn { background-color: var(--color-bg-tertiary); color: var(--color-text-light); }
#highlight-popover .login-btn:hover { background-color: #4b5563; }
#highlight-popover .spinner { width: 20px; height: 20px; border-width: 2px; }
.desktop-delete-btn { position: absolute; top: 0.75rem; right: 0.75rem; width: 36px; height: 36px; background-color: rgba(17, 24, 39, 0.7); color: #fca5a5; border-radius: 50%; border: 1px solid #4b5563; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.2s ease, background-color 0.2s ease; z-index: 5; }
.psalm-card-wrapper:hover .desktop-delete-btn { opacity: 1; }
.desktop-delete-btn:hover { background-color: #991b1b; color: white; }
@media (hover: none) { .desktop-delete-btn { display: none; } }
#add-psalms-modal .analysis-modal-content { padding: 0; display: flex; flex-direction: column; }
#add-psalms-list { flex-grow: 1; }
.fade-out-and-shrink { transition: opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.3s ease-out, margin 0.3s ease-out, padding 0.3s ease-out; opacity: 0; transform: scale(0.95); max-height: 0; overflow: hidden; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border: none; }
.fade-in-and-grow { animation: fadeInGrow 0.4s ease-out forwards; }
@keyframes fadeInGrow { from { opacity: 0; transform: scale(0.9); max-height: 0; } to { opacity: 1; transform: scale(1); max-height: 500px; } }
.quick-nav-pill {
    flex-shrink: 0; /* Prevents buttons from shrinking */
    text-align: center;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    background-color: transparent;
    transition: all 0.2s ease-in-out;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
#collections-quick-nav {
    display: flex;
    justify-content: center; /* Centers the pills */
    overflow-x: auto; /* Allows scrolling on mobile if content overflows */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}
#collections-quick-nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, etc. */
}
.quick-nav-pill.active { background-color: var(--color-accent); color: var(--color-accent-text); }
.quick-nav-pill:hover:not(.active) { background-color: var(--color-bg-tertiary); color: var(--color-text-light); }
.accordion-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 0.5rem; border-bottom: 2px solid var(--color-border); margin-bottom: 1rem; }
.accordion-icon { transition: transform 0.3s ease-in-out; }
.accordion-header.collapsed .accordion-icon { transform: rotate(-90deg); }
.accordion-content { transition: max-height 0.5s ease-in-out; overflow: hidden; }
.plan-dashboard-header { background-color: var(--color-bg-secondary); border-radius: 1.5rem; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.progress-circle-container { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
.progress-circle-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-circle-bg { fill: none; stroke: var(--color-bg-tertiary); stroke-width: 10; }
.progress-circle-bar { fill: none; stroke: var(--color-accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 339.292; transition: stroke-dashoffset 1s ease-out; }
.progress-circle-text { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.progress-percentage { font-size: 2rem; font-weight: 800; color: var(--color-text-light); }
.progress-days { font-size: 0.9rem; font-weight: 600; color: var(--color-text-secondary); }
.kpi-container { display: flex; gap: 1rem; justify-content: center; width: 100%; }
.kpi-card { flex: 1; background-color: rgba(17, 24, 39, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem; border-radius: 0.75rem; text-align: center; }
.kpi-value { display: block; font-size: 1.75rem; font-weight: 700; color: var(--color-text-light); }
.kpi-label { display: block; font-size: 0.75rem; color: var(--color-text-secondary); font-weight: 600; }
.day-navigator-container { overflow-x: auto; padding-bottom: 1rem; margin-bottom: 1rem; }
.day-navigator-content { display: flex; gap: 0.75rem; padding: 0 0.5rem; }
.day-nav-circle { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; transition: all 0.2s ease-in-out; border: 2px solid var(--color-border); color: var(--color-text-secondary); }
.day-nav-circle.completed { background-color: var(--color-accent); color: var(--color-accent-text); border-color: var(--color-accent); }
.day-nav-circle.current { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); transform: scale(1.1); }
.day-nav-circle:not(.completed):not(.current):hover { background-color: var(--color-bg-tertiary); border-color: #6b7280; color: var(--color-text-light); }
@media (max-width: 640px) { .kpi-container { flex-direction: column; } .plan-dashboard-header { padding: 1rem; } }
.plan-day-psalm-link-static { font-weight: 600; text-decoration: underline; text-decoration-style: dashed; }
.plan-day-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; padding: 0 1rem; border-top: 1px solid transparent; }
.plan-day-card.open .plan-day-content { max-height: 1500px; padding: 1.5rem 1rem; border-top-color: var(--color-border); }
.plan-day-actions { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.plan-action-btn { padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; background-color: var(--color-bg-tertiary); color: var(--color-text-light); border: none; cursor: pointer; transition: background-color 0.2s; }
.plan-action-btn:hover { background-color: #4b5563; }
.psalm-text-container { background-color: var(--color-bg-primary); padding: 1rem; border-radius: 0.5rem; margin-top: 1rem; border: 1px solid var(--color-border); max-height: 400px; overflow-y: auto; }
.mark-complete-btn { width: 100%; margin-top: 1.5rem; padding: 0.75rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.9rem; background-color: var(--color-accent); color: var(--color-accent-text); border: none; cursor: pointer; transition: background-color 0.2s; }
.mark-complete-btn:hover { background-color: var(--color-accent-hover); }
.plan-day-card.completed .mark-complete-btn { background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.favorite-section-header { font-size: 1.125rem; font-weight: 600; color: var(--color-text-secondary); margin-top: 1rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); }
.list-item-progress-container { height: 6px; background-color: var(--color-bg-tertiary); border-radius: 9999px; margin-top: 0.25rem; overflow: hidden; }
.list-item-progress-bar { height: 100%; background-color: var(--color-accent); border-radius: 9999px; }
@media (max-width: 767px) { #my-collection-content .horizontal-carousel, #public-guides-content .horizontal-carousel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; overflow-x: visible; padding-bottom: 0; } #my-collection-content .horizontal-carousel > *, #public-guides-content .horizontal-carousel > * { scroll-snap-align: none; width: 100%; } }
.sub-accordion-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 0.5rem 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.sub-accordion-header h3 { font-size: 1.125rem; font-weight: 600; color: var(--color-text-secondary); }
.sub-accordion-header .accordion-icon { transition: transform 0.3s ease-in-out; }
.sub-accordion-header.collapsed .accordion-icon { transform: rotate(-90deg); }

/* --- Subtle Background for Plan Dashboard --- */
.plan-dashboard-header[style] {
  position: relative; /* Required for the overlay */
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease-in-out;
}

.plan-dashboard-header[style]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(31, 41, 55, 0.85); /* bg-gray-800 with opacity */
  border-radius: 1.5rem; /* Match parent border-radius */
  z-index: 1;
}

.plan-dashboard-header > * {
  position: relative; /* Ensures all content (KPIs, circle) appears on top of the overlay */
  z-index: 2;
}

/* --- Estilos para el botón de guardado con progreso circular --- */
#guide-editor-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.progress-spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-ring {
    transform: rotate(-90deg); /* Inicia el círculo en la parte superior */
}

.progress-ring-circle {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke: var(--color-accent-text);
}

/* --- Estilos para las tarjetas KPI transparentes --- */
.kpi-card {
    flex: 1;
    /* Fondo semi-transparente con efecto de desenfoque */
    background-color: rgba(17, 24, 39, 0.6); /* bg-gray-900 con opacidad */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 0.75rem;
    text-align: center;
}

/* --- Corrección para títulos de día que no se truncan --- */
.plan-day-title {
    color: var(--color-text-light);
    white-space: normal; /* Permite que el texto se divida en varias líneas */
    word-break: break-word; /* Rompe palabras largas si es necesario */
}

.plan-day-title-container {
    min-width: 0;
    flex-grow: 1;
}

/* --- Hide ONLY Main Accordion Title When Expanded --- */
.accordion-header:not(.collapsed) > h3 {
    display: none;
}


/* --- START: REFINEMENTS FOR COLLECTIONS PAGE --- */

/* 1. Quick-Nav Bar Styling for Mobile Scrolling */
#collections-quick-nav {
    display: flex;
    justify-content: center; /* Center on desktop */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}
#collections-quick-nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, etc. */
}
@media (max-width: 767px) {
    #collections-quick-nav {
        justify-content: flex-start; /* Allow scrolling from the left on mobile */
    }
}
.quick-nav-pill {
    flex-shrink: 0; /* Prevents buttons from shrinking */
    white-space: nowrap;
}

/* 2. Collections View Toggle Button Highlighting */
#collections-view-toggle-grid.active,
#collections-view-toggle-list.active {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
}

/* 3. Hide ONLY Main Accordion Title When Expanded */
.accordion-header:not(.collapsed) > h3 {
    display: none;
}

/* 4. Smaller Sub-section Titles */
.sub-accordion-header h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* 5. More Transparent KPI Cards */
.kpi-card {
    background-color: rgba(17, 24, 39, 0.5); /* More transparent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05); /* Softer border */
}
.kpi-container {
    max-width: 500px; /* Limits horizontal length */
    width: 100%;
}

/* 6. Consistent Favorite Card Styling */
.favorite-card {
    height: 180px; /* Consistent height */
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.favorite-card .card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow content to fill the card */
}
.favorite-card .card-title {
    font-size: 1rem;
}
.favorite-card .card-text {
    font-size: 0.85rem;
    line-height: 1.4;
    flex-grow: 1; /* Allow text to take available space */
    /* Add a subtle fade effect for long text instead of a hard cut-off */
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
    mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.favorite-card .card-footer {
    margin-top: auto; /* Push footer to the bottom */
    padding-top: 0.5rem;
    font-size: 0.75rem;
}

/* --- END: REFINEMENTS --- */

/* --- DEFINITIVE FIX FOR WRAPPING CARD CONTENT --- */

.plan-day-title-container {
    /* This allows the container to shrink and forces its content to wrap */
    min-width: 0; 
}

.plan-day-title {
    /* These properties ensure the text inside wraps correctly */
    white-space: normal;
    word-break: break-word;
}


/* --- Highlighting for Day Cards --- */
.plan-day-card.card-highlight {
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-shadow: 0 0 0 3px var(--color-accent), 0 10px 20px rgba(0,0,0,0.3);
    transform: scale(1.02);
}

/* --- START: REFINEMENTS FOR COLLECTIONS & PLAN DETAIL --- */

/* 1. Quick-Nav Bar Styling for Mobile Scrolling */
#collections-quick-nav {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#collections-quick-nav::-webkit-scrollbar {
    display: none;
}
@media (max-width: 767px) {
    #collections-quick-nav {
        justify-content: flex-start;
    }
}
.quick-nav-pill {
    flex-shrink: 0;
    white-space: nowrap;
}

/* 2. Collections View Toggle Button Highlighting */
#collections-view-toggle-grid.active,
#collections-view-toggle-list.active {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
}

/* 3. Hide ONLY Main Accordion Title When Expanded */
.accordion-header:not(.collapsed) > h3 {
    display: none;
}

/* 4. Smaller Sub-section Titles */
.sub-accordion-header h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* 5. More Transparent KPI Cards */
.kpi-card {
    background-color: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.kpi-container {
    max-width: 500px;
    width: 100%;
}

/* 6. Consistent Favorite Card Styling */
.favorite-card {
    height: 180px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.favorite-card .card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.favorite-card .card-title { font-size: 1rem; }
.favorite-card .card-text {
    font-size: 0.85rem;
    line-height: 1.4;
    flex-grow: 1;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
    mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.favorite-card .card-footer {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.75rem;
}

/* --- 7. START: PLAN DETAIL UX IMPROVEMENTS --- */

/* Modernized Day Card Design */
.plan-day-card {
    background-color: var(--color-bg-secondary); /* Darker background */
    border-radius: 1rem; /* More rounded */
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease;
}
.plan-day-header {
    border-bottom: none; /* Remove separator */
}
.plan-day-title-container {
    min-width: 0; /* Allows flex item to shrink and wrap */
}
.plan-day-title {
    white-space: normal; /* Allows text to wrap */
    word-break: break-word; /* Prevents overflow */
}

/* Focus & Dim Effect */
.plan-day-card.dimmed {
    opacity: 0.4;
    transform: scale(0.98);
}

/* Animated Ring for Current Day Navigator */
@keyframes spin-ring {
    to { transform: rotate(360deg); }
}
.day-nav-circle.current {
    position: relative; /* Needed for pseudo-element positioning */
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 0 10px var(--color-accent);
    transform: scale(1.1);
}
.day-nav-circle.current::before {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-accent);
    animation: spin-ring 1.5s linear infinite;
}

/* Highlighting for Scrolled-To Card */
.plan-day-card.card-highlight {
    box-shadow: 0 0 0 3px var(--color-accent), 0 10px 20px rgba(0,0,0,0.3);
    transform: scale(1.02);
}

/* --- END: PLAN DETAIL UX IMPROVEMENTS --- */

/* --- START: REFINEMENTS FOR PLAN DETAIL UX --- */

/* 1. More Prominent Day Navigator Circles */
.day-nav-circle {
    width: 44px; /* Larger circles */
    height: 44px;
    font-size: 1.1rem;
}
.day-nav-circle.current {
    position: relative;
    border-width: 3px; /* Thicker border */
    transform: scale(1.15); /* Larger scale */
}
@keyframes spin-ring {
    to { transform: rotate(360deg); }
}
.day-nav-circle.current::before {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-accent);
    animation: spin-ring 1.5s linear infinite;
}

/* 2. Smaller Day Card Title */
.plan-day-title {
    font-size: 1rem; /* Reduced from 1.125rem */
    font-weight: 500; /* Reduced from 600 */
}

/* 3. Modernized, Minimalist Card Design */
.plan-day-card {
    background-color: var(--color-bg-secondary);
    border-radius: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.plan-day-header {
    border-bottom: none; /* Remove separator line */
}

/* 4. Dimmed State for Inactive Cards (Focus Mode) */
.plan-day-card.dimmed {
    opacity: 0.3;
    transform: scale(0.98);
}
/* When a card is hidden for focus mode, it takes up no space */
.plan-day-card.hidden {
    display: none;
}

/* 5. Highlighting for Scrolled-To Card (retained from previous step) */
.plan-day-card.card-highlight {
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-shadow: 0 0 0 3px var(--color-accent), 0 10px 20px rgba(0,0,0,0.3);
    transform: scale(1.02);
}

/* --- END: PLAN DETAIL UX REFINEMENTS --- */


/* --- INICIO: MEJORAS DE UX PARA LA VISTA DEL PLAN --- */

/* 1. Navegador de Días Más Prominente */
.day-nav-circle {
    width: 60px; /* Círculos más grandes */
    height: 60px;
    font-size: 1.25rem;
    flex-direction: column; /* Apila "Día" y el número */
    line-height: 1.2;
}
.day-label-circle {
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
}
.day-nav-circle.current {
    position: relative;
    border-width: 3px;
    transform: scale(1.1);
}
@keyframes spin-ring { to { transform: rotate(360deg); } }
.day-nav-circle.current::before {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-accent);
    animation: spin-ring 2s linear infinite;
}

/* 2. Diseño de Tarjeta de Día Minimalista */
.plan-day-card {
    background-color: var(--color-bg-secondary);
    border-radius: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
}
.plan-day-header {
    border-bottom: none;
    grid-template-columns: auto 1fr auto; /* Ajusta para 3 columnas */
}
.plan-day-number-box {
    flex-direction: column; /* Apila "Día" y el número */
    line-height: 1;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
}
.day-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.plan-day-title {
    font-size: 0.95rem; /* Título más pequeño */
    font-weight: 500;
}

/* 3. Acciones del Encabezado de la Tarjeta */
.plan-day-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.plan-day-header-actions .plan-action-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- FIN: MEJORAS DE UX --- */

.start-plan-btn.smaller-cta {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* --- START: REFINEMENTS FOR COLLECTIONS & FAVORITES --- */

/* 1. Quick-Nav Bar Styling for Mobile */
#collections-quick-nav {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#collections-quick-nav::-webkit-scrollbar {
    display: none;
}
@media (max-width: 767px) {
    #collections-quick-nav {
        justify-content: flex-start;
    }
}
.quick-nav-pill {
    flex-shrink: 0;
    white-space: nowrap;
}

/* 2. Smaller KPI Cards */
.kpi-container {
    max-width: 500px;
    width: 100%;
}

/* 3. Consistent Favorite Card Styling */
.favorite-card {
    height: 180px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.favorite-card .card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.favorite-card .card-title {
    font-size: 1rem;
}
.favorite-card .card-text {
    font-size: 0.85rem;
    line-height: 1.4;
    flex-grow: 1;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
    mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.favorite-card .card-footer {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.75rem;
}

/* --- END: REFINEMENTS --- */

/* --- INICIO: Rediseño del Panel de Control y Navegador del Plan --- */

/* 1. Tarjetas KPI con estilo "Glassmorphism" */
.kpi-card {
    background-color: rgba(31, 41, 55, 0.6); /* bg-gray-800 con opacidad */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 1rem;
    border-radius: 1.25rem; /* Más redondeado */
    text-align: center;
}

.kpi-value {
    display: block;
    font-size: 2.5rem; /* Valor más grande */
    font-weight: 800;
    color: var(--color-text-light);
    line-height: 1.1;
}

.kpi-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-top: 0.25rem;
}

/* 2. Estilos para el Navegador de Días con Fechas */
.day-nav-circle {
    width: 60px;
    height: 60px;
    flex-direction: column; /* Apila la fecha y el número */
    line-height: 1.2;
    font-size: 1.25rem; /* Tamaño del número del día */
}
.day-label-circle {
    font-size: 0.6rem; /* Tamaño del texto de la fecha (ej: 'oct 29') */
    font-weight: 500;
    text-transform: uppercase;
}
.day-number-circle {
    font-size: 1.25rem;
    font-weight: 700;
}

/* 3. Estilos para la Tarjeta de Día Rediseñada */
.plan-day-psalm-link-static {
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    color: var(--color-text-light);
}

/* --- FIN: Rediseño --- */


/* --- INICIO: Corrección de Desbordamiento de Vista Semanal (Todo el Día) --- */

.all-day-week-slot {
    /* Establece una altura máxima para la celda de "todo el día" */
    max-height: 90px;
    
    /* Añade scroll vertical SI hay demasiados eventos */
    overflow-y: auto;
    
    /* Organiza los eventos internamente */
    display: flex;
    flex-direction: column;
    gap: 2px; /* Pequeño espacio entre eventos */
    
    /* Aplica el scrollbar personalizado */
    scrollbar-width: thin;
    scrollbar-color: var(--color-bg-tertiary) transparent;
}

.all-day-week-slot::-webkit-scrollbar {
    width: 5px;
}
.all-day-week-slot::-webkit-scrollbar-thumb {
    background-color: var(--color-bg-tertiary);
    border-radius: 10px;
}
.all-day-week-slot::-webkit-scrollbar-track {
    background: transparent;
}

/* Asegura que los indicadores no intenten ser más anchos que la celda */
.all-day-week-slot .day-task-indicator {
    width: auto; /* Permite que el padding de la celda controle el ancho */
    flex-shrink: 0; /* Evita que el indicador se encoja */
}
/* --- FIN: Corrección de Desbordamiento --- */


/* --- INICIO: Estilos para Submenú en Menú Desplegable --- */
.secondary-actions-menu .menu-item-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between; /* Alinea la flecha a la derecha */
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.secondary-actions-menu .menu-item-header:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
}
.secondary-actions-menu .menu-item-header:hover i {
    color: var(--color-accent-text);
}
.secondary-actions-menu .menu-item-header .arrow-icon {
    transition: transform 0.2s ease-in-out;
    font-size: 0.75rem;
    color: var(--color-text-secondary); /* Color por defecto de la flecha */
}
.secondary-actions-menu .menu-item-header .arrow-icon.rotate-90 {
    transform: rotate(90deg);
}

.secondary-actions-menu .submenu-list-content {
    padding-left: 1rem; /* Indentación para los sub-ítems */
    overflow: hidden;
    max-height: 200px; /* Altura máxima para el scroll */
    overflow-y: auto;
    background-color: rgba(0,0,0,0.1); /* Fondo ligeramente diferente */
    border-radius: 0.25rem;
    margin: 0 0.5rem 0.5rem 0.5rem; /* Margen para separarlo */
}
.secondary-actions-menu .submenu-list-content.hidden {
    display: none;
}
.secondary-actions-menu .submenu-item {
    font-size: 0.85rem !important; /* Ligeramente más pequeño */
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}
/* --- FIN: Estilos de Submenú --- */

/* --- INICIO: Animación de Plan Completado --- */
@keyframes pulse-and-spin {
  0% { transform: scale(0.8) rotate(0deg); opacity: 0.5; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
  100% { transform: scale(0.8) rotate(360deg); opacity: 0.5; }
}
.completion-animation {
  /* La animación se aplica a la estrella en el modal */
  animation: pulse-and-spin 2s ease-in-out infinite;
}
/* --- FIN: Animación de Plan Completado --- */

/* --- INICIO: Estilos para el Modal de Admin Options --- */
#admin-options-modal .account-tab-pane {
    min-height: 400px;
}
#admin-options-modal form {
    border: 1px solid var(--color-border);
}
#admin-options-modal .admin-button.secondary {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-light);
}
#admin-options-modal .admin-button.secondary:hover {
    background-color: #4b5563;
}
/* --- FIN: Estilos para el Modal de Admin Options --- */


/* --- INICIO: SOLUCIÓN Botón de Detalle en Modal de Salmo --- */
.psalm-modal-detail-btn {
    /* Posición (al lado del botón de cerrar) */
    position: absolute;
    top: 1rem;
    right: 4rem; /* 1rem (espacio) + 40px (botón cerrar) + 0.5rem (espacio) = ~64px = 4rem */

    /* Estilo (copiado de .analysis-modal-close-btn) */
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem; /* Icono un poco más pequeño que el 'X' */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    z-index: 120;
}
.psalm-modal-detail-btn:hover {
    background-color: #4b5563;
    transform: scale(1.08);
}
/* --- FIN: SOLUCIÓN Botón de Detalle --- */

/* --- INICIO: Estilos para el Dashboard de Compromisos --- */

/* Estilos para el calendario de actividad "GitHub" */
#commitments-activity-calendar {
    display: flex;
    flex-wrap: wrap; /* Permite que los meses pasen a la siguiente línea si no caben */
    gap: 4px; /* Espacio entre días */
}
.calendar-month-header {
    width: 100%; /* Ocupa toda la fila */
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 2px;
    flex-basis: 100%; /* Asegura que ocupe toda la fila */
}
.calendar-day-box {
    width: 12px;
    height: 12px;
    background-color: var(--color-bg-tertiary);
    border-radius: 2px;
    transition: background-color 0.2s;
}
.calendar-day-box:hover {
    background-color: var(--color-border);
}

/* Niveles de intensidad */
.calendar-day-box.intensity-1 {
    background-color: #facc1544; /* Amarillo (color-accent) con opacidad */
}
.calendar-day-box.intensity-2 {
    background-color: #facc1588;
}
.calendar-day-box.intensity-3 {
    background-color: #facc15FF;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 640px) {
    .calendar-day-box {
        width: 10px;
        height: 10px;
        gap: 3px;
    }
}
/* --- FIN: Estilos de Dashboard de Compromisos --- */



/* --- INICIO: REDISEÑO DE PSALM DETAIL --- */

/* 1. Navegación Fija (Idea 3) */
.fixed-psalm-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40; /* Debajo del sidebar (50) pero encima de la página */
    width: 44px;
    height: 44px;
    background-color: rgba(31, 41, 55, 0.7); /* bg-gray-800 semi-transparente */
    color: var(--color-text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--color-border);
}
.fixed-psalm-nav:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
    transform: translateY(-50%) scale(1.1);
}
.fixed-psalm-nav.prev {
    left: 1rem;
}
.fixed-psalm-nav.next {
    right: 1rem;
}

/* 2. Barra de Acciones (Idea 1, 4) */
.action-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.action-bar-btn:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
}
.action-bar-btn .fa-star { /* Estilo especial para el botón de favorito */
    color: var(--color-accent);
}
.action-bar-btn:hover .fa-star {
    color: var(--color-accent-text);
}
.action-bar-btn .fas.fa-star { /* Cuando está activo */
    color: var(--color-accent);
}

/* 3. Botón TTS (Text-to-Speech) (Idea 4) */
.tts-button {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.tts-button:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
}

/* 4. Pestañas (Tabs) Reutilizables para Centro de Estudio y Conexiones */
.study-tab,
.connection-tab {
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    white-space: nowrap; /* Evita que el texto de la pestaña se parta */
}
.study-tab.active,
.connection-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.study-tab-pane,
.connection-tab-pane {
    display: none;
}
.study-tab-pane.active,
.connection-tab-pane.active {
    display: block;
    animation: fadeIn 0.4s ease-out; /* Reutiliza animación existente */
}


/* 5. Estilo para la lista de Conexiones (Idea 1) */
.plan-connection-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-bg-secondary);
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.plan-connection-item:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-highlight-border);
}

/* --- FIN: REDISEÑO DE PSALM DETAIL --- */


/* --- INICIO: REDISEÑO PESTAÑAS DE ESTUDIO --- */
.study-tab {
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.study-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.study-tab-pane {
    display: none;
}
.study-tab-pane.active {
    display: block;
    animation: fadeIn 0.4s ease-out;
}

/* Botones de la Pestaña Multimedia (Idea 7) */
.multimedia-card-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem; /* CAMBIO: Reducido de 2rem */
    border-radius: 0.75rem;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    transition: all 0.2s ease;
}
.multimedia-card-btn:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
    transform: translateY(-5px);
}
.multimedia-card-btn i {
    font-size: 1.5rem; /* CAMBIO: Reducido de 2rem */
}
/* --- FIN: REDISEÑO PESTAÑAS DE ESTUDIO --- */

/* --- INICIO: REDISEÑO CÍRCULOS DE ÓPTICAS (Idea 4) --- */
/* Modificación de .analysis-circle para que se parezcan más a los diseños */
.analysis-circle {
    /* ... (estilos existentes de .analysis-circle) ... */
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.analysis-circle:hover {
    transform: scale(1.05);
    border-color: var(--color-accent);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}
.analysis-circle-content {
    /* ... (estilos existentes) ... */
    /* Iconos más inspirados en tus imágenes */
}
/* Iconos específicos (Idea 4) */
.analysis-circle.individual .analysis-circle-content i {
    font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f007"; /* fas fa-user */
}
.analysis-circle.historicalCritical .analysis-circle-content i {
    font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f19c"; /* fas fa-university (reemplaza landmark) */
}
.analysis-circle.biblical .analysis-circle-content i {
    font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f02d"; /* fas fa-book */
}
.analysis-circle.tradition .analysis-circle-content i {
    font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f66f"; /* fas fa-torii-gate (reemplaza church) */
}
.analysis-circle.mystical .analysis-circle-content i {
    font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f54e"; /* fas fa-dove (reemplaza cloud-sun) */
}
/* --- FIN: REDISEÑO CÍRCULOS DE ÓPTICAS --- */

/* --- INICIO: REDISEÑO CONEXIONES (Idea 3) --- */
.plan-connections-carousel > * { 
    scroll-snap-align: start; flex-shrink: 0; 
    width: 240px; /* CAMBIO: Reducido de 280px */
}
.plan-connection-card {
    height: 120px; /* CAMBIO: Reducido de 150px */
    border-radius: 0.75rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-secondary);
    padding: 0.75rem; /* CAMBIO: Reducido de 1rem */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
}
.plan-connection-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
}
.plan-connection-title {
    font-size: 0.9rem; /* CAMBIO: Reducido de 1rem */
    font-weight: 600;
    color: var(--color-text-light);
    line-height: 1.3;
}
.plan-connection-status {
    font-size: 0.85rem;
    font-weight: 500;
}
/* --- FIN: REDISEÑO CONEXIONES --- */


/* --- INICIO: BARRA DE ACCIONES RESPONSIVA (MÓVIL) --- */

/* En pantallas pequeñas (menos de 640px de ancho),
  ocultamos el texto de la barra de acciones.
*/
@media (max-width: 640px) {
    .action-bar-btn .action-bar-text {
        display: none; /* Oculta el texto */
    }

    /* Ajustamos el botón para que sea más cuadrado,
      ya que ahora solo contiene un icono.
    */
    .action-bar-btn {
        padding: 0.75rem; 
        width: 44px; /* Ancho fijo */
        height: 44px; /* Alto fijo */
        justify-content: center;
    }
}
/* --- FIN: BARRA DE ACCIONES RESPONSIVA --- */

/* --- INICIO: REDISEÑO DE ÓPTICAS (CORREGIDO) --- */
#analysis-circles-container {
    display: grid;
    gap: 1rem;
    
    /* Esta es la clave:
      Crea tantas columnas como quepan (auto-fit).
      Cada columna debe tener un MÍNIMO de 160px.
      Las columnas se repartirán el espacio sobrante (1fr).
    */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    /* (Opcional) Si prefieres que siempre sean 2 en móvil y 5 en escritorio: */
    /* grid-template-columns: repeat(2, 1fr); */
}

/* En pantallas más grandes, ajustamos el mínimo para que no se hagan 
   más de 5 columnas (a menos que la pantalla sea gigante) */
@media (min-width: 768px) {
    #analysis-circles-container {
        /* Con 5 items, esto creará una fila de 3 y una de 2, 
           o una fila de 5 si la pantalla es muy ancha */
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

/* La nueva tarjeta de óptica (sin cambios) */
.optic-card {
    position: relative;
    background-color: var(--color-bg-tertiary);
    border-radius: 1rem;
    padding: 1.5rem 1rem;
    text-align: center;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    /* Ya no necesita 'flex-basis' */
}

.optic-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* El contenido de la tarjeta (sin cambios) */
.optic-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.optic-card-content i {
    font-size: 1.75rem;
    color: var(--color-accent);
}

.optic-card-content span {
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    color: var(--color-text-light);
}

/* El botón de favorito (sin cambios) */
.optic-card .favorite-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: var(--color-text-secondary);
    padding: 0.25rem;
}
.optic-card .favorite-btn:hover {
    color: var(--color-accent);
}
.optic-card .favorite-btn.fas {
    color: var(--color-accent);
}
/* --- FIN: REDISEÑO DE ÓPTICAS --- */


/* --- INICIO: NAVEGACIÓN MODAL DE ÓPTICAS --- */
.analysis-nav-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 130; /* Encima del fondo del modal */
    width: 44px;
    height: 44px;
    background-color: rgba(31, 41, 55, 0.7);
    color: var(--color-text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--color-border);
}
.analysis-nav-btn:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
    transform: translateY(-50%) scale(1.1);
}
.analysis-nav-btn.prev {
    left: 1.5rem;
}
.analysis-nav-btn.next {
    right: 1.5rem;
}
@media (max-width: 767px) {
    .analysis-nav-btn.prev { left: 0.5rem; }
    .analysis-nav-btn.next { right: 0.5rem; }
}
/* --- FIN: NAVEGACIÓN MODAL DE ÓPTICAS --- */

/* --- INICIO: ESTILOS PARA COMMITMENTS DASHBOARD --- */

/* 1. Layout Principal (Estilo Apple Activity) */
.dashboard-grid-modern {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móvil */
    gap: 1rem; /* CAMBIO: Gap reducido ligeramente para móvil */
    width: 100%; /* Asegura que no exceda el ancho del padre */
}

@media (min-width: 1024px) {
    .dashboard-grid-modern {
        /* Dos columnas desiguales en desktop */
        grid-template-columns: 7fr 3fr; 
        gap: 1.5rem;
    }
    #list-card {
        grid-column: span 2 / span 2;
    }
}

/* 2. Tarjeta Base */
.dashboard-card {
    border-radius: 1rem;
    padding: 1rem; /* CAMBIO: Padding unificado para móvil */
    
    /* --- SOLUCIÓN CLAVE PARA EL DESBORDAMIENTO --- */
    min-width: 0; /* Permite que los hijos (gráficos/tablas) activen el scroll */
    overflow: hidden; /* Asegura que nada salga de la tarjeta */
    background-color: var(--color-bg-secondary); /* Asegurar fondo correcto */
}

@media (min-width: 640px) {
    .dashboard-card {
        padding: 1.5rem;
    }
}

/* 3. Título de la Tarjeta */
.dashboard-card-title {
    font-size: 1.25rem; /* CAMBIO: Un poco más pequeño en móvil */
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
@media (min-width: 640px) {
    .dashboard-card-title {
        font-size: 1.5rem;
    }
}



/* 4. Estilos de KPIs (Tus iconos SVG) */
.kpi-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    opacity: 0.7;
}
.kpi-value {
    display: flex;
    align-items: center;
}
.kpi-card .kpi-label {
    margin-top: 0.25rem;
}
.kpi-card .kpi-value {
    font-size: 1.75rem;
}

/* 5. Tarjeta de Actividad (Gráfico de Barras) */
.activity-total-completions {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-light);
    line-height: 1;
}
.activity-filter-pills {
    display: flex;
    padding: 0.25rem;
    background-color: var(--color-bg-tertiary);
    border-radius: 9999px;
}
.activity-filter-btn {
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.activity-filter-btn.active {
    background-color: var(--color-bg-primary);
    color: var(--color-text-light);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.activity-bar-chart-container {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    width: 100%;
    height: 150px; /* Altura fija para el gráfico */
    margin-top: 1.5rem;
}
.activity-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.activity-bar {
    width: 100%;
    background-color: var(--color-accent);
    border-radius: 4px;
    transition: height 0.5s ease-out;
    min-height: 2px; /* Altura mínima para días con 0 */
}
.activity-bar-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* 6. Tarjeta de Lista (Todos mis Compromisos) */
.commitment-list-item-clickable {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--color-bg-tertiary);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.commitment-list-item-clickable:hover {
    background-color: #4b5563; /* bg-gray-600 */
}
.commitment-list-color-bar {
    width: 6px;
    height: 36px;
    border-radius: 3px;
    flex-shrink: 0;
}
.commitment-list-title {
    font-weight: 600;
    color: var(--color-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.commitment-list-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 7. Estilos para el Menú de Filtros (que no se usa pero estaba en tu JS) */
.filter-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-light);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.filter-btn:hover {
    background-color: #4b5563;
}
.filter-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
    z-index: 20;
    padding: 0.5rem;
    width: 200px;
}
.filter-menu-group {
    margin-bottom: 0.5rem;
}
.filter-menu-header {
    display: block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}
.filter-menu-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    background: none;
    border: none;
    cursor: pointer;
}
.filter-menu-option:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
}

/* 8. Estilos para el Modal de Resumen (de calendar.js) */
.summary-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .summary-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.summary-detail-item {
    padding: 0.75rem;
    background-color: var(--color-bg-primary);
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
}
.summary-detail-label {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.summary-detail-label i {
    margin-right: 0.5rem;
    width: 16px;
    text-align: center;
}
.summary-detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-light);
}
/* --- FIN: ESTILOS PARA COMMITMENTS DASHBOARD --- */

/* --- INICIO: REDISEÑO MODAL RESUMEN (TIPO APPLE) --- */

/* Oculta los estilos antiguos de cuadrícula */
.summary-detail-grid {
    display: none;
}
.summary-detail-item {
    display: none;
}

/* Estilos para las nuevas tarjetas (inspiradas en IMG_7432.jpg) */
.summary-card-apple {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Usamos un fondo más oscuro, como en la imagen de Apple */
    background-color: var(--color-bg-primary); 
    border-radius: 0.75rem; /* 12px */
    padding: 1rem;
}

.summary-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* El color se establece en línea en el HTML */
    font-size: 1.25rem;
}

.summary-card-content {
    display: flex;
    flex-direction: column;
}

.summary-card-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.summary-card-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-light);
}
/* --- FIN: REDISEÑO MODAL RESUMEN --- */

/* --- INICIO: ESTILOS PARA EL GRÁFICO DE ACTIVIDAD --- */

.activity-filter-pills {
    display: flex;
    padding: 0.25rem;
    background-color: var(--color-bg-tertiary);
    border-radius: 9999px;
}
.activity-filter-btn {
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.activity-filter-btn.active {
    background-color: var(--color-bg-primary);
    color: var(--color-text-light);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.activity-total-completions {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-light);
    line-height: 1;
}
.activity-bar-chart-container {
    display: flex;
    gap: 0.5rem;
    /* align-items: flex-end; -- ESTA LÍNEA SE ELIMINÓ */
    width: 100%;
    height: 150px; 
    margin-top: 1.5rem;
}
.activity-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* <-- AÑADIDO: Alinea las barras abajo */
    height: 100%; /* <-- AÑADIDO: Permite que la barra crezca */
    gap: 0.25rem;
}
.activity-bar {
    width: 100%;
    background-color: var(--color-accent);
    border-radius: 4px;
    transition: height 0.5s ease-out;
    min-height: 2px; /* Altura mínima para días con 0 */
}
.activity-bar-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* --- FIN: ESTILOS PARA EL GRÁFICO DE ACTIVIDAD --- */


/* --- INICIO: ESTILOS PARA EL COMPAÑERO DE LECTURA --- */

.tts-speed-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    transition: all 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
}
.tts-speed-btn:hover:not(.active) {
    background-color: var(--color-bg-tertiary);
}
.tts-speed-btn.active {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
}

#detail-psalm-text p {
    transition: background-color 0.3s ease-in-out;
    border-radius: 4px;
}
#detail-psalm-text p.verse-highlight {
    background-color: rgba(250, 204, 21, 0.2);
}

/* --- FIN: ESTILOS PARA EL COMPAÑERO DE LECTURA --- */


/* --- Phase 2: Explorer Enhancements --- */

.meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
}

/* Ensure dropdowns in explorer look consistent */
#explorer-filters-panel select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    appearance: none;
}

/* Sentiment Arc Indicator Styles */
.sentiment-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: rgba(31, 41, 55, 0.5); /* Semi-transparent bg */
    padding: 2px 6px;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
}

.sentiment-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sentiment-arrow {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
}

/* Mobile adjustments for filter pills */
@media (max-width: 640px) {
    #explorer-filter-pills {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        overflow-x: auto; /* Allow scrolling if they don't fit */
        -webkit-overflow-scrolling: touch;
    }

    #explorer-filter-pills .explorer-pill-btn {
        flex: 1 1 auto; /* Grow and shrink */
        text-align: center;
        padding: 0.5rem;
        min-width: 80px; /* Ensure a minimum touch target */
        margin: 2px;
    }
}

/* --- Phase 2: X-Ray Mode Visualization --- */

.xray-container {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.xray-section {
    transition: all 0.3s ease-in-out;
    margin-bottom: 0.75rem;
}

.xray-section:hover {
    background-color: rgba(31, 41, 55, 0.8); /* Darker gray on hover */
    transform: translateX(5px);
}

/* Chiastic Indentation Levels for Mobile Responsiveness */
@media (max-width: 640px) {
    .xray-section.ml-8, .xray-section.ml-12 {
        margin-left: 1rem !important; /* Reduce deep nesting on mobile */
    }
}

/* --- Phase 3: Compass & Chat --- */

/* Compass Widget */
.compass-btn {
    background-color: rgba(31, 41, 55, 0.6);
    border: 1px solid rgba(75, 85, 99, 0.5);
    color: #e5e7eb;
    padding: 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.compass-btn:hover {
    background-color: rgba(55, 65, 81, 0.8);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Global Chat */
.chat-message {
    display: flex;
    margin-bottom: 1rem;
}

.chat-message.user {
    justify-content: flex-end;
}

.chat-message.bot {
    justify-content: flex-start;
}

.chat-bubble {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.chat-message.user .chat-bubble {
    border-bottom-right-radius: 0.25rem;
}

.chat-message.bot .chat-bubble {
    border-bottom-left-radius: 0.25rem;
}

/* Hide FAB when chat is open handled via JS utility classes */

/* --- Spiritual Guide Neon Button --- */
.neon-spirit-btn {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6); /* Blue to Purple gradient */
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.6), 
                0 0 30px rgba(59, 130, 246, 0.4), 
                inset 0 0 10px rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    animation: spirit-pulse 3s infinite ease-in-out;
}

.neon-spirit-btn i {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

@keyframes spirit-pulse {
    0% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 25px rgba(139, 92, 246, 0.9), 0 0 50px rgba(59, 130, 246, 0.6); }
    100% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.4); }
}

/* --- Phase 2 Refined: X-Ray Deep Analysis Dashboard --- */

/* Highlighted Keywords (Lexical) */
.xray-keyword {
    color: #fef08a; /* yellow-200 */
    font-weight: 700;
    text-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
    border-bottom: 1px dotted #eab308;
}

/* Badges for Analysis Types */
.xray-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
}

.xray-badge.theology {
    background-color: rgba(16, 185, 129, 0.15); /* Emerald */
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

.xray-badge.phonetics {
    background-color: rgba(139, 92, 246, 0.15); /* Purple */
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.3);
}

.xray-badge.mood {
    background-color: rgba(236, 72, 153, 0.15); /* Pink */
    color: #f9a8d4;
    border-color: rgba(236, 72, 153, 0.3);
}

/* Animations */
.fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile Responsive Adjustments for X-Ray */
@media (max-width: 768px) {
    .xray-card {
        margin-left: 0 !important;
        padding: 1rem !important;
    }
    .xray-legend {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Mobile Optimization for Spiritual Guide FAB --- */
@media (max-width: 768px) {
    #global-chat-fab {
        width: 3.5rem !important;  /* Reduced from w-16 (4rem) to w-14 */
        height: 3.5rem !important;
        bottom: 1rem !important;   /* Move slightly closer to corner */
        right: 1rem !important;
    }
    
    #global-chat-fab i {
        font-size: 1.25rem !important; /* Reduced from text-2xl to text-xl */
    }
}

/* --- Phase 2 Enhanced: X-Ray Deep Analysis Dashboard --- */

/* Keyword Neon Glow */
.xray-keyword {
    color: #fef08a; /* yellow-200 */
    font-weight: 700;
    background-color: rgba(234, 179, 8, 0.1);
    border-bottom: 1px solid rgba(234, 179, 8, 0.5);
    padding: 0 2px;
    border-radius: 2px;
    text-shadow: 0 0 12px rgba(234, 179, 8, 0.6);
    transition: all 0.3s ease;
}

.xray-keyword:hover {
    background-color: rgba(234, 179, 8, 0.2);
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.4);
}

/* Dashboard Layout */
.xray-dashboard {
    font-family: 'Inter', sans-serif;
}

/* Animations */
.fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Mobile Adjustments */
@media (max-width: 768px) {
    /* Reduce nesting on mobile for readability */
    .xray-card {
        margin-left: 1rem !important; 
    }
    /* Adjust connector line position */
    .xray-content > div.absolute {
        left: 6px !important;
    }
    /* Adjust connector dots */
    .xray-card .absolute.rounded-full {
        left: -23px !important;
        width: 12px !important;
        height: 12px !important;
        top: 1.5rem !important;
    }
}

/* --- EXPLORER PAGE STYLES --- */

/* 1. Filter Panel Container */
#explorer-filters-panel {
    display: none; /* Mobile: Hidden by default */
    flex-direction: column;
    padding: 0;
    border-width: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

/* Mobile: Show Panel when Active */
#explorer-layout-manager.filters-active #explorer-filters-panel {
    display: flex;
    max-height: 800px; /* Enough space for both treemap and filters */
    opacity: 1;
    padding: 1.5rem;
    margin-top: 1rem;
    border-width: 1px;
}

/* 2. Advanced Filters Dropdown */
#advanced-filters-dropdown {
    display: none; /* Hidden by default */
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

#advanced-filters-dropdown.open {
    display: block;
    max-height: 600px;
    opacity: 1;
    padding: 1rem 0.5rem;
}

/* 3. Mobile Filters Header */
#filters-header-mobile {
    display: none; /* Hidden unless active */
}
#explorer-layout-manager.filters-active #filters-header-mobile {
    display: flex;
}

/* 4. Treemap Visibility on Mobile */
/* Only show treemap if panel is active AND NOT hiding it explicitly (managed by JS) */
#explorer-filters-panel #treemap-container {
    display: none; 
}
#explorer-layout-manager.filters-active #treemap-container {
    display: flex;
}

/* 5. Psalm List Container */
/* Ensure it's always visible and takes appropriate width */
#psalm-list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: width 0.3s ease;
}

/* 6. Desktop Overrides (min-width: 1024px) */
@media (min-width: 1024px) {
    #explorer-filters-panel {
        display: flex !important;
        max-height: initial !important;
        opacity: 1 !important;
        padding: 1.5rem;
        margin-top: 0;
        border-width: 1px;
        min-height: 600px;
    }

    #advanced-filters-dropdown {
        display: block !important; /* Always show filters on desktop */
        max-height: initial !important;
        opacity: 1 !important;
        padding: 0 0 1.5rem 0;
    }

    #filters-header-mobile {
        display: none !important;
    }

    #explorer-filters-panel #treemap-container {
        display: flex !important;
    }

    /* List container widths handled by classes (lg:w-2/3 vs lg:w-full) */
}

/* 6. Search Bar (New Expandable Logic inside List Header) */
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

#search-input-container {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 40px; /* Initial width = button width */
    opacity: 1; /* Always visible now */
    overflow: hidden;
}

#search-input-container.open {
    width: 100%; /* Mobile: take available space */
    max-width: 240px; /* Desktop limit */
    border-color: var(--color-accent);
}

#search-trigger-btn {
    cursor: pointer;
    background: transparent;
    border: none;
}

#psalm-search {
    opacity: 0; /* Hidden initially */
    transition: opacity 0.2s;
    pointer-events: none;
}

#search-input-container.open #psalm-search {
    opacity: 1;
    pointer-events: auto;
}

/* --- EXPLORER LAYOUT & VISIBILITY (CRITICAL FIX) --- */

/* 1. Mobile Default: Filter Panel is HIDDEN */
#explorer-filters-panel {
    display: none; 
}

/* 2. Mobile Active: Show Panel when class is added by JS */
#explorer-filters-panel.mobile-visible {
    display: flex !important;
    margin-bottom: 1.5rem;
    animation: slideDown 0.3s ease-out;
}

/* 3. Desktop Override: Always Show Panel */
@media (min-width: 1024px) {
    #explorer-filters-panel {
        display: flex !important; /* Force flex on desktop */
    }
}

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

/* --- LIST VIEW OPTIMIZATIONS --- */

/* Mobile List View: Title big, tags small/limited */
.list-view-title {
    font-size: 1rem; /* 16px */
    line-height: 1.4;
    white-space: normal; /* Allow wrap */
}
.list-view-tags-container {
    height: 1.5rem; /* Limit height to one line of tags */
    overflow: hidden;
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
/* Desktop List View: More space */
@media (min-width: 640px) {
    .list-view-title {
        font-size: 1.125rem; /* 18px */
    }
    .list-view-tags-container {
        height: auto; /* Show all tags */
        max-height: 3rem;
    }
}

/* --- EXPLORER PAGE FIXES --- */

/* 1. Filter Panel Visibility Logic */
/* Default: Hidden on mobile, Flex on Desktop */
#explorer-filters-panel {
    display: none; 
}

@media (min-width: 1024px) {
    #explorer-filters-panel {
        display: flex !important;
    }
}

/* Toggle Class: When JS adds this class, show it on mobile */
#explorer-filters-panel.mobile-visible {
    display: flex !important;
    width: 100%;
    margin-bottom: 1.5rem;
    animation: slideDown 0.3s ease-out;
}


/* 3. List View Overrides */
.list-view-title {
    font-size: 1rem;
    line-height: 1.4;
    white-space: normal;
}

.list-view-tags-container {
    height: auto;
    max-height: 1.5rem; /* 1 line approx */
    overflow: hidden;
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

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


/* --- FINAL EXPLORER FIXES --- */

/* 1. Filter Panel Visibility */
/* Default: Hidden on mobile */
#explorer-filters-panel {
    display: none;
}

/* Desktop Override: Always flex */
@media (min-width: 1024px) {
    #explorer-filters-panel {
        display: flex !important;
    }
}

/* Mobile Toggle: Show when class added */
#explorer-filters-panel.mobile-visible {
    display: flex !important;
    margin-bottom: 1.5rem;
    animation: slideDown 0.3s ease-out;
}

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


/* 3. List View Optimizations */
.list-view-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: 0.25rem;
}

.list-view-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}