/* Estilos personalizados migrados */
* {
    box-sizing: border-box;
}

html.dark {
    background-color: #0a0a0a;
}
body {
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex-grow: 1;
}
.font-brand {
    font-family: 'Sora', sans-serif;
    color: #161650;
}
.dark .font-brand {
    color: #d5e5ff;
}
.h1-title { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; }
.h2-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; }
.h3-title { font-size: 1.5rem; line-height: 2rem; font-weight: 600; }
.h4-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
@media (min-width: 640px) {
    .sm\:h1-title { font-size: 3rem; line-height: 1; }
    .sm\:h2-title { font-size: 2.25rem; line-height: 2.5rem; }
}
.scroll-animate { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.scroll-animate.is-visible { opacity: 1; transform: translateY(0); }
.view-section { transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; }
.view-section.hidden { opacity: 0; transform: translateY(10px); pointer-events: none; display: none; }
.spinner { width: 48px; height: 48px; border: 5px solid #e0e0e0; border-bottom-color: #007bff; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.spinner-container { display: flex; justify-content: center; align-items: center; min-height: 200px; }
.sortable-header { cursor: pointer; user-select: none; }
.sortable-header:hover { color: #007bff; }
.change-pill { display: inline-block; padding: 0.25rem 0.6rem; border-radius: 9999px; color: white; font-weight: 600; font-size: 0.8rem; min-width: 70px; text-align: center; }
.favorite-star:hover, .add-to-portfolio:hover { transform: scale(1.2); }
.crypto-row { transition: background-color: 0.2s ease-in-out; }
.crypto-row:hover { background-color: rgba(0, 123, 255, 0.05); }
.dark .crypto-row:hover { background-color: rgba(0, 123, 255, 0.1); }
.modal-backdrop { transition: opacity 0.3s ease-in-out; }
.modal-panel { transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
.toast { opacity: 0; transform: translateX(100%); transition: all 0.3s ease-in-out; }
.toast.show { opacity: 1; transform: translateX(0); }
.toast.error { background-color: #dc3545; }
.toast.success { background-color: #28a745; }
.toast.info { background-color: #007bff; }
.live-dot { display: inline-block; width: 8px; height: 8px; background-color: #28a745; border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } }

.nav-link { position: relative; padding-bottom: 8px; transition: color 0.2s; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #161650; transform: scaleX(0); transform-origin: bottom right; transition: transform 0.3s ease-out; }
.dark .nav-link::after { background-color: #d5e5ff; }
.nav-link:hover::after, .nav-link-active::after { transform: scaleX(1); transform-origin: bottom left; }
.nav-link-active { color: #161650 !important; }
.dark .nav-link-active { color: #d5e5ff !important; }

.nav-icon.nav-icon-active { color: #161650; }
.dark .nav-icon.nav-icon-active { color: #d5e5ff; }

.user-icon-active {
    color: #28a745; /* positive color */
}

.dark .user-icon-active {
    color: #34d399; /* A lighter green for dark mode */
}

#starfield-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -10; }
.stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: -1; }
@keyframes animStar { from { transform: translateY(0px); } to { transform: translateY(-2000px); } }
.stars-small { animation: animStar 200s linear infinite; }
.stars-medium { animation: animStar 150s linear infinite; }
.stars-large { animation: animStar 100s linear infinite; }
.stars-small, .stars-medium, .stars-large { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: transparent; }
.stars-small { width: 1px; height: 1px; box-shadow: -100px 100px white, 100px 200px white, -250px 300px white, 150px 400px white, -150px 500px white, 200px 600px white, -200px 700px white, 250px 800px white, -300px 900px white, 100px 1000px white, -350px 1100px white, 400px 1200px white, -450px 1300px white, 500px 1400px white, -550px 1500px white, 600px 1600px white, -650px 1700px white, 700px 1800px white, -750px 1900px white, 800px 2000px white; }
.stars-medium { width: 2px; height: 2px; box-shadow: -150px 250px rgba(255, 255, 255, 0.7), 250px 350px rgba(255, 255, 255, 0.7), -350px 450px rgba(255, 255, 255, 0.7), 450px 550px rgba(255, 255, 255, 0.7), -550px 650px rgba(255, 255, 255, 0.7), 650px 750px rgba(255, 255, 255, 0.7), -750px 850px rgba(255, 255, 255, 0.7); }
.stars-large { width: 3px; height: 3px; box-shadow: -200px 300px rgba(255, 255, 255, 0.4), 300px 400px rgba(255, 255, 255, 0.4), -400px 500px rgba(255, 255, 255, 0.4), 500px 600px rgba(255, 255, 255, 0.4), -600px 700px rgba(255, 255, 255, 0.4); }
.dark-logo-glow { filter: drop-shadow(0 0 10px rgba(0, 123, 255, 0.5)); }
.crypto-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: contain; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); }
.edit-btn { background-color: transparent; border: none; color: #007bff; cursor: pointer; transition: color 0.2s; }
.edit-btn:hover { color: #0056b3; }
.delete-modal-btn { background-color: #dc3545; color: white; font-weight: 700; padding: 0.5rem 1rem; border-radius: 9999px; transition: transform 0.2s ease-in-out; }
.delete-modal-btn:hover { background-color: #c82333; transform: scale(1.05); }
.coin-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-radius: 0.75rem; margin-bottom: 0.75rem; }
.watchlist-coin-name { font-weight: 600; color: #fff; }
.dark .watchlist-coin-name { color: #e0e0e0; }
.watchlist-coin-symbol { color: #a0aec0; text-transform: uppercase; }
#qr-container { position: absolute; top: 100%; right: 0; z-index: 50; width: 250px; padding: 1rem; background-color: #F8F9FA; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transform: translateY(10px); opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; }
.dark #qr-container { background-color: #343a40; border: 1px solid rgba(255,255,255,0.1); }
#mobile-app-btn-container:hover #qr-container { opacity: 1; visibility: visible; transform: translateY(0); }
.transaction-row:hover { background-color: rgba(0,0,0,0.02); }
.dark .transaction-row:hover { background-color: rgba(255,255,255,0.02); }

/* --- AJUSTES PARA TABLA MÓVIL --- */
@media (max-width: 1023px) { /* Se aplica hasta la pantalla 'lg' */
    #crypto-list-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-table-grid {
        min-width: 800px; /* Ancho mínimo para forzar scroll */
    }
}
/* --- FIN AJUSTES TABLA MÓVIL --- */

/* --- NAVEGACIÓN INFERIOR MÓVIL --- */
@media (max-width: 767px) { /* Corresponde al breakpoint 'md' de Tailwind */
    #header-icons {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        justify-content: space-around;
        background-color: #f8f9fa; /* light-bg */
        border-top: 1px solid #e5e7eb; /* gray-200 */
        padding: 0.5rem 0;
        height: auto;
        z-index: 40;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }

    .dark #header-icons {
        background-color: #1a1a1a; /* dark-card */
        border-top-color: rgba(255, 255, 255, 0.1);
    }
    
    #header-icons #qr-container {
        display: none !important;
    }
}
/* --- FIN NAVEGACIÓN INFERIOR MÓVIL --- */


/* Estilos de la Cinta Dinámica */
.ticker-container {
    width: 100%;
    overflow: hidden;
    padding: 0.75rem 0;
    background-color: var(--light-card, #ffffff);
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.dark .ticker-container {
    background-color: rgba(26, 26, 26, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
}
.ticker-tape {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: scroll-left 60s linear infinite;
}
.ticker-container:hover .ticker-tape {
    animation-play-state: paused;
}
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-item {
    display: flex;
    align-items: center;
    margin: 0 1.5rem;
    font-size: 0.9rem;
}

/* Animación para íconos de tema */
@keyframes theme-icon-pop {
    from {
        transform: scale(0.7) rotate(-45deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}
.theme-icon-animate {
    animation: theme-icon-pop 0.4s ease-out;
}

/* --- Estilos para Filtros de Noticias --- */
#news-filters-container::-webkit-scrollbar {
    display: none;
}
#news-filters-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.news-filter-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease-in-out;
    border: 1px solid;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
}
/* Estado Activo */
.news-filter-btn.active {
    background-color: #007bff; /* accent-blue */
    color: white;
    border-color: #007bff;
    box-shadow: 0 4px 14px 0 rgba(0, 123, 255, 0.30);
    transform: translateY(-2px);
}

/* Estado Inactivo - Modo Claro */
.news-filter-btn:not(.active) {
    background-color: #ffffff; /* light-card */
    color: #4b587c;
    border-color: #e5e7eb; /* gray-200 */
}
.news-filter-btn:not(.active):hover {
    background-color: #f8f9fa; /* light-bg */
    border-color: #161650;
    color: #161650;
}

/* Estado Inactivo - Modo Oscuro */
.dark .news-filter-btn:not(.active) {
    background-color: #1a1a1a; /* dark-card */
    color: #9ca3af; /* gray-400 */
    border-color: #374151; /* gray-700 */
}
.dark .news-filter-btn:not(.active):hover {
    border-color: #161650;
    color: #d5e5ff; /* dark-brand-text */
}

/* --- ESTILOS COMUNIDAD --- */
.post-textarea:focus {
    outline: none;
}
emoji-picker { position: absolute; z-index: 10; bottom: 50px; left: 80px; }
.reaction-btn.reacted {
     background-color: #e0f2fe;
     border-color: #007bff;
}
.dark .reaction-btn.reacted {
     background-color: rgba(0, 123, 255, 0.2);
     border-color: #007bff;
}
.avatar-selection img {
    cursor: pointer;
    border: 4px solid transparent;
    transition: border-color 0.2s ease-in-out;
}
.avatar-selection img.selected {
    border-color: #007bff;
}
.logo-container {
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.logo-light {
    background-color: #161650;
    -webkit-mask-image: url('https://cdn.jsdelivr.net/gh/Jegoba90/mis-assets/Logo%20redise%C3%B1ado%20modo%20claro.svg');
    mask-image: url('https://cdn.jsdelivr.net/gh/Jegoba90/mis-assets/Logo%20redise%C3%B1ado%20modo%20claro.svg');
}
.logo-dark {
    background-color: #d5e5ff;
    -webkit-mask-image: url('https://cdn.jsdelivr.net/gh/Jegoba90/mis-assets/Logo%20redise%C3%B1ado%20modo%20oscuro.svg');
    mask-image: url('https://cdn.jsdelivr.net/gh/Jegoba90/mis-assets/Logo%20redise%C3%B1ado%20modo%20oscuro.svg');
}