/* --------- ESTILO GENERAL --------- */
body {
    background: #fff;
    color: #18181b;
    font-family: 'Inter', 'Segoe UI', 'Roboto', 'Arial', sans-serif;
    min-height: 100vh;
    transition: background 0.4s, color 0.3s;
}

/* Fuente profesional para todo el dashboard */
.dashboard-container,
.stats-card,
.table,
.modal-content,
.form-control,
.form-label,
.navbar,
#sidebar,
.card,
.card-header,
.card-body,
.btn,
.alert {
    font-family: 'Inter', 'Segoe UI', 'Roboto', 'Arial', sans-serif !important;
}

/* --------- SIDEBAR --------- */
#sidebar {
    background: #f8fafc;
    color: #18181b;
    border-right: 1.5px solid #e5e7eb;
    min-height: 100vh;
    transition: background 0.4s, color 0.3s, border-color 0.3s;
    width: 220px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100vh;
    /* Opcional: mejora la apariencia del scroll en navegadores modernos */
    /* Firefox */
}
/* WebKit browsers */
#sidebar::-webkit-scrollbar {
    width: 8px;
    background: #f8f9fa;
}
#sidebar::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 4px;
}
#sidebar .nav-link {
    color: #18181b;
    font-weight: 500;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}
#sidebar .nav-link.active, #sidebar .nav-link:hover {
    background: #222;
    color: #fff !important;
}
#sidebar .nav-link i {
    margin-right: 8px;
}
#sidebar hr {
    border-color: #e5e7eb;
}

/* --------- NAVBAR --------- */
.navbar {
    background: rgba(255,255,255,0.97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: background 0.4s, border-bottom 0.3s, box-shadow 0.3s;
    margin-left: 220px;
}
.navbar-brand {
    color: #18181b !important;
    font-weight: bold;
    font-size: 1.5rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s;
}
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.navbar-text {
    margin-right: 1rem;
    color: #555;
    font-size: 1rem;
    font-weight: 500;
}
.navbar-nav .btn {
    margin: 0 !important;
    border-radius: 50px;
    padding: 8px 18px;
    font-weight: 500;
    font-size: 1rem;
    transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    min-width: 100px;
}
.navbar-nav .btn-outline-dark {
    background: #fff;
    color: #18181b;
    border: 1.5px solid #18181b;
}
.navbar-nav .btn-outline-dark:hover,
.navbar-nav .btn-outline-dark:focus {
    background: #18181b;
    color: #fff;
    border-color: #18181b;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
#toggleThemeBtn i {
    font-size: 1.3rem;
    vertical-align: middle;
    transition: color 0.3s, transform 0.3s;
}
#toggleThemeBtn:hover i {
    color: #222;
    transform: rotate(-20deg) scale(1.15);
}

/* --------- DASHBOARD Y TARJETAS --------- */
.dashboard-container {
    padding: 2rem 0 2rem 0;
    background: transparent;
    min-height: 100vh;
    margin-left: 220px; /* igual al ancho del sidebar */
    width: calc(100vw - 220px); /* ocupa todo menos la barra lateral */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: background 0.4s, margin-left 0.3s, width 0.3s;
}
.stats-card {
    background: #fff;
    border-radius: 9rem;
    padding: 2rem;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    margin-bottom: 2rem;
    text-align: center;
    transition: background 0.4s, border 0.3s, color 0.3s, box-shadow 0.3s;
}
.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: #18181b;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}
.stat-label {
    color: #555;
    font-size: 1.1rem;
    margin-top: 0.5rem;
    transition: color 0.3s;
}
.profit-positive {
    color: #198754 !important; /* verde Bootstrap */
    font-weight: bold;
}
.profit-negative {
    color: #ef4444 !important; /* rojo */
    font-weight: bold;
}

/* --------- TABLAS --------- */
.table {
    background: #fff;
    color: #18181b;
    border-radius: 1rem;
    overflow: hidden;
    transition: background 0.4s, color 0.3s;
}
.table td, .table th {
    color: #18181b !important;
    background: #fff !important;
}
.table th, .table td {
    border-color: #e5e7eb !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f8fafc;
}
.table-striped > tbody > tr:hover {
    background-color: #222 !important;
    color: #fff !important;
}

/* --------- MODALES --------- */
.modal-content {
    background: #fff;
    color: #18181b;
    border-radius: 1rem;
    border: 1.5px solid #e5e7eb;
    transition: background 0.4s, color 0.3s, border 0.3s;
}
.modal-header, .modal-footer {
    border-color: #e5e7eb;
}

/* --------- FORMULARIOS --------- */
.form-control {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    color: #18181b;
    padding: 12px 16px;
    border-radius: 8px;
    transition: background 0.3s, border 0.3s, color 0.3s;
}
.form-control:focus {
    background: #f8fafc;
    border-color: #222;
    box-shadow: 0 0 0 0.2rem rgba(34,34,34,0.15);
    color: #18181b;
}
.form-control::placeholder {
    color: #888;
    transition: color 0.3s;
}
.form-label {
    color: #000000;
    font-weight: 500;
    transition: color 0.3s;
}

/* En modo oscuro, las .form-label serán blancas */
body.dark-mode .form-label {
    color: #040404 !important;
}

/* --------- ALERTAS --------- */
.alert {
    background: rgba(0,0,0,0.05);
    border: 1.5px solid #e5e7eb;
    color: #18181b;
    border-radius: 8px;
    transition: background 0.3s, border 0.3s, color 0.3s;
}
.alert-success {
    background: rgba(34,34,34,0.08);
    border: 1.5px solid #222;
    color: #18181b;
}
.alert-danger {
    background: rgba(239,68,68,0.08);
    border: 1.5px solid #ef4444;
    color: #18181b;
}

/* --------- MODO OSCURO PROFESIONAL --------- */
body.dark-mode {
    background: #18181b !important;
    color: #f3f4f6 !important;
}
body.dark-mode #sidebar {
    background: #23232a !important;
    color: #f3f4f6 !important;
    border-right: 1.5px solid #444 !important;
}
body.dark-mode #sidebar .nav-link {
    color: #f3f4f6 !important;
}
body.dark-mode #sidebar .nav-link.active,
body.dark-mode #sidebar .nav-link:hover {
    background: #fff !important;
    color: #18181b !important;
}
body.dark-mode #sidebar hr {
    border-color: #444 !important;
}
body.dark-mode .navbar {
    background: #23232a !important;
    border-bottom: 1px solid #444 !important;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.15);
    margin-left: 220px;
}
body.dark-mode .navbar-brand {
    color: #fff !important;
    text-shadow: 0 2px 8px #23232a;
}
body.dark-mode .navbar-text {
    color: #e5e7eb !important;
}
body.dark-mode .navbar-nav .btn-outline-dark {
    background: #18181b !important;
    color: #fff !important;
    border: 1.5px solid #fff !important;
}
body.dark-mode .navbar-nav .btn-outline-dark:hover,
body.dark-mode .navbar-nav .btn-outline-dark:focus {
    background: #fff !important;
    color: #18181b !important;
    border-color: #fff !important;
}
body.dark-mode #toggleThemeBtn i {
    color: #fff !important;
    filter: drop-shadow(0 0 6px #fff);
}
body.dark-mode #toggleThemeBtn:hover i {
    color: #18181b !important;
    filter: drop-shadow(0 0 10px #fff);
    transform: rotate(20deg) scale(1.25);
}
body.dark-mode .dashboard-container,
body.dark-mode .stats-card,
body.dark-mode .modal-content {
    background: #23232a !important;
    border: 1.5px solid #444 !important;
    color: #f3f4f6 !important;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.07);
}
body.dark-mode .stat-value,
body.dark-mode .stat-label {
    color: #fff !important;
}
body.dark-mode .table,
body.dark-mode .table-striped,
body.dark_mode .table-responsive {
    background: #23232a !important;
    color: #fff !important;
}
body.dark-mode .table th,
body.dark-mode .table td {
    background: #23232a !important;
    color: #fff !important;
    border-color: #444 !important;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #1a1a22 !important;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #23232a !important;
}
body.dark-mode .table-striped > tbody > tr:hover {
    background-color: #33334d !important;
    color: #fff !important;
}
body.dark-mode .profit-positive {
    color: #4ade80 !important; /* verde claro */
    font-weight: bold;
}
body.dark-mode .profit-negative {
    color: #ef4444 !important;
    font-weight: bold;
}

/* Mejor contraste para botones dentro de la tabla en modo oscuro */
body.dark-mode .table .btn,
body.dark_mode .table .btn-sm {
    background: #18181b !important;
    color: #fff !important;
    border-color: #444 !important;
}
body.dark-mode .table .btn:hover,
body.dark-mode .table .btn-sm:hover {
    background: #fff !important;
    color: #18181b !important;
    border-color: #fff !important;
}

/* --------- SCROLLBAR PERSONALIZADO --------- */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    background: #23232a;
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 8px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

/* --------- ENLACES --------- */
body.dark-mode a {
    color: #fff !important;
    text-decoration: none;
}
body.dark-mode a:hover {
    color: #ccc !important;
    text-decoration: underline;
}

/* --------- RESPONSIVE --------- */
@media (max-width: 991px) {
    #sidebar {
        position: static !important;
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1.5px solid #e5e7eb;
        height: auto !important;
    }
    .navbar, body.dark-mode .navbar {
        margin-left: 0 !important;
    }
    .dashboard-container {
        padding: 1rem 0 1rem 0;
        margin-left: 0 !important;
        align-items: stretch;
    }
    .dashboard-container > .container {
        max-width: 100%;
    }
    .navbar-nav {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .navbar-nav .btn {
        min-width: 90px;
        font-size: 0.95rem;
        padding: 7px 12px;
    }
    #sidebar .nav-link {
        font-size: 1rem;
        justify-content: flex-start;
    }
}

/* Centra la tabla del portafolio y su contenido */
.dashboard-container > .table-responsive,
.dashboard-container > .table,
.dashboard-container table {
    margin-left: auto;
    margin-right: auto;
}

.dashboard-container {
    align-items: center;
    justify-content: center;
}

.dashboard-container .table {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 2rem auto;
    text-align: center;
}

.dashboard-container .table th,
.dashboard-container .table td {
    text-align: center;
    vertical-align: middle;
}

/* En responsive, que la tabla ocupe todo el ancho */
@media (max-width: 991px) {
    .dashboard-container .table {
        width: 100%;
        min-width: 320px;
    }
}

/* Letras y números blancos en modo oscuro, excepto ganancias/pérdidas */
body.dark-mode .table td,
body.dark-mode .table th,
body.dark-mode .stat-value,
body.dark-mode .stat-label {
    color: #fff !important;
}

/* Ganancia en verde y pérdida en rojo en modo oscuro */
body.dark-mode .profit-positive {
    color: #4ade80 !important;   /* verde claro */
    font-weight: bold;
}
body.dark-mode .profit-negative {
    color: #ef4444 !important;   /* rojo */
    font-weight: bold;
}

/* Si quieres que los inputs y formularios también tengan texto blanco en modo oscuro */
body.dark-mode .form-control,
body.dark-mode .form-label {
    color: #fff !important;
}

/* Tabla de agregar activo adaptada a modo oscuro */
body.dark-mode .add-asset-table,
body.dark-mode .add-asset-table th,
body.dark-mode .add-asset-table td {
    background: #23232a !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* Adaptación completa de campos y etiquetas del formulario de agregar asset/cripto al modo oscuro */

/* Etiquetas (labels) */
body.dark-mode label,
body.dark-mode .form-label,
body.dark-mode .add-asset-table th {
    color: #fff !important;
}

/* Inputs, selects y textareas */
body.dark-mode .add-asset-table input,
body.dark-mode .add-asset-table select,
body.dark-mode .add-asset-table textarea,
body.dark-mode .form-control {
    background: #18181b !important;
    color: #fff !important;
    border: 1.5px solid #444 !important;
}

/* Placeholders */
body.dark-mode .add-asset-table input::placeholder,
body.dark-mode .add-asset-table textarea::placeholder,
body.dark-mode .form-control::placeholder {
    color: #ccc !important;
    opacity: 0.7;
}

/* Celdas de la tabla */
body.dark-mode .add-asset-table td {
    background: #23232a !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* Solo las etiquetas label.form-label serán blancas en modo oscuro */
body.dark-mode label.form-label {
    color: #fff !important;
}

/* Fondo negro para el formulario de agregar asset en modo oscuro */
body.dark-mode #assetFormContainer {
    background: #18181b !important;
    color: #fff !important;
    border-radius: 1rem;
    border: 1.5px solid #444 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Fondo negro para todas las tarjetas (card) dentro del dashboard en modo oscuro */
body.dark-mode .dashboard-container .container .card {
    background: #18181b !important;
    color: #fff !important;
    border-radius: 1rem;
    border: 1.5px solid #444 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Letras blancas para el botón de detalles en modo oscuro dentro del formulario de agregar asset */
body.dark-mode #assetFormContainer #addAssetForm #toggleDetailsAsset.btn.btn-outline-dark {
    color: #fff !important;
    border-color: #fff !important;
}

/* Letras blancas para el botón de detalles en modo oscuro dentro del formulario de agregar cripto */
body.dark-mode #cryptoFormContainer #addCryptoForm #toggleDetailsCrypto.btn.btn-outline-dark {
    color: #fff !important;
    border-color: #fff !important;
}

/* Letras blancas para el botón personalizado dentro del formulario en modo oscuro */
body.dark-mode #assetFormContainer #addAssetForm .btn.btn-custom.w-100 {
    color: #fff !important;
    border-color: #fff !important;
    background: #23232a !important;
}

/* Opcional: al pasar el mouse, invertir colores para mejor feedback */
body.dark-mode #assetFormContainer #addAssetForm .btn.btn-custom.w-100:hover {
    background: #fff !important;
    color: #18181b !important;
    border-color: #fff !important;
}

/* Opcional: al pasar el mouse, invertir colores para mejor feedback */
body.dark-mode #cryptoFormContainer #addCryptoForm #toggleDetailsCrypto.btn.btn-outline-dark:hover {
    background: #fff !important;
    color: #18181b !important;
    border-color: #fff !important;
}

/* Ajusta el ancho de .card-body al ancho de su .container en el dashboard */
.dashboard-container .container .card .card-body {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Adapta #portfolioContent al ancho de la tarjeta y con buen espaciado en modo oscuro */
body.dark-mode .dashboard-container .container .card .card-body #portfolioContent {
    width: 100%;
    max-width: 100%;
    background: transparent;
    color: #fff !important;
    padding: 1.5rem 0;
    box-sizing: border-box;
    border-radius: 0.7rem;
}

/* En responsive, reduce el padding */
@media (max-width: 991px) {
    .dashboard-container .container .card .card-body {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Botón dorado para Trackerfolio Premium en el sidebar */
.btn-premium {
    background: linear-gradient(90deg, #978105 60%, #8b6f0b 100%);
    color: #18181b !important;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15);
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1rem;
    padding: 10px 18px;
}

.btn-premium:hover, .btn-premium:focus {
    background: linear-gradient(90deg, #816404 60%, #6c5d08 100%);
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.25);
    text-shadow: 0 1px 8px #bfa100;
}

/* Estilo profesional para la gráfica de rendimiento ponderado */
#weightedPerformanceChart {
    background: transparent;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 2px 12px 0 rgba(37,99,235,0.07);
    transition: background 0.3s;
}
body.dark-mode #weightedPerformanceChart {
    background: #23232a;
    box-shadow: 0 2px 12px 0 rgba(16,185,129,0.07);
}
.card-header .btn-outline-primary,
.card-header .btn-outline-success {
    min-width: 110px;
    font-weight: 500;
}
.card-header .btn-primary,
.card-header .btn-success {
    color: #fff !important;
}

/* Modo oscuro para la tarjeta de capital total */
body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .card-body {
    background: #181a1b !important;
    color: #f3f3f3 !important;
    border-color: #23272b !important;
}

body.dark-mode .card-header svg,
body.dark-mode .card-header .fw-semibold,
body.dark-mode .card-header .badge {
    color: #f3f3f3 !important;
    background: transparent !important;
}

body.dark-mode .bg-light,
body.dark-mode .p-3.rounded.bg-light,
body.dark-mode .min-height-340 {
    background: #23272b !important;
    color: #f3f3f3 !important;
}

body.dark-mode .bg-white,
body.dark-mode .border,
body.dark-mode .shadow-sm {
    background: #23272b !important;
    color: #f3f3f3 !important;
    border-color: #23272b !important;
}

body.dark-mode .text-muted,
body.dark-mode .font-size-105 {
    color: #b0b3b8 !important;
}

body.dark-mode .fw-bold.text-primary {
    color: #7abaff !important;
}
body.dark-mode .fw-bold.text-success {
    color: #6ee7b7 !important;
}
body.dark-mode .fw-bold.text-warning {
    color: #fbbf24 !important;
}

body.dark-mode .badge.bg-light.text-secondary {
    background: #23272b !important;
    color: #b0b3b8 !important;
    border: 1px solid #23272b;
}

/* Letras blancas dentro del área de la gráfica en modo oscuro */
body.dark-mode #capitalLineChart,
body.dark-mode .p-3.rounded.bg-light,
body.dark-mode .min-height-340 {
    color: #fff !important;
}

/* Si usas Chart.js, fuerza los tooltips y leyendas a blanco en modo oscuro */
body.dark-mode .chartjs-tooltip,
body.dark-mode .chartjs-legend,
body.dark-mode .chartjs-size-monitor,
body.dark-mode .chartjs-title,
body.dark-mode .chartjs-label,
body.dark-mode .chartjs-axis,
body.dark-mode .chartjs-tick {
    color: #fff !important;
}

/* Si tienes textos personalizados cerca del canvas */
body.dark-mode #capitalLineChart + * {
    color: #fff !important;
}

/* Forzar ancho completo y ajuste de caja para el gráfico y su contenedor en modo oscuro */
.p-3.rounded.bg-light.min-height-340,
#capitalLineChart {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* --------- PORTFOLIO CONTENT --------- */
#portfolioContent {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#portfolioContent .table-responsive {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border-radius: 0.7rem;
    background: transparent;
    overflow-x: auto;
    box-sizing: border-box;
}

#portfolioContent .table {
    width: 100% !important;
    min-width: 600px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 0.7rem;
    background: #fff;
    color: #18181b;
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.04);
    font-size: 0.93rem;
    table-layout: auto;
    transition: background 0.4s, color 0.3s;
}

#portfolioContent .table th,
#portfolioContent .table td {
    text-align: center;
    vertical-align: middle;
    padding: 0.45rem 0.5rem;
    border-color: #e5e7eb !important;
    font-size: 0.93rem;
    font-weight: 500;
}

#portfolioContent .table th {
    background: #f8fafc !important;
    color: #18181b !important;
    font-weight: 700;
    border-bottom: 2px solid #e5e7eb !important;
}

#portfolioContent .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f8fafc;
}
#portfolioContent .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #fff;
}
#portfolioContent .table-striped > tbody > tr:hover {
    background-color: #222 !important;
    color: #fff !important;
    transition: background 0.2s, color 0.2s;
}

/* Responsive: tabla ocupa todo el ancho en móviles */
@media (max-width: 800px) {
    #portfolioContent .table-responsive,
    #portfolioContent .table {
        max-width: 100vw;
        min-width: 320px;
        font-size: 0.89rem;
    }
}

/* --------- GRAFICA DE GANANCIAS Y PERDIDAS --------- */
#profitLossChart {
    width: 100% !important;
    max-width: 100%;
    min-height: 340px;
    margin: 0 auto;
    display: block;
    background: transparent;
    border-radius: 1rem;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
    padding: 0.5rem;
}