/* ============================================
   STYLES.CSS - GENERAL PARA TODO EL SITIO.
   ============================================ */

/* IMPORTACIÓN DE FUENTES */
@import url('https://api.fontshare.com/css?f[]=satoshi@700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&display=swap');

/* ============================================
   PALETA DE COLORES — Variables globales.
   Para cambiar marca: editar solo este bloque.
   (Preparado para cambio a verde u otro color)
   ============================================ */
:root {
    /* Azul principal — light mode */
    --brand-primary:            #1a56db;
    --brand-primary-hover:      #1340b0;
    --brand-primary-subtle:     #dbeafe;
    --brand-heading:            #1a56db;

    /* Bootstrap overrides */
    --bs-primary:               #1a56db;
    --bs-primary-rgb:           26, 86, 219;
    --bs-link-color:            var(--brand-primary);
    --bs-link-color-rgb:        26, 86, 219;
    --bs-link-hover-color:      var(--brand-primary-hover);
    --bs-link-hover-color-rgb:  19, 64, 176;
}

/* Links — azul, sin subrayado */
a {
    text-decoration: none;
    color: var(--brand-primary);
}
a:hover:not(.btn):not(.nav-link):not(.navbar-brand) {
    color: var(--brand-primary-hover);
    text-decoration: underline;
}


/* BODY - Inter */
body {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 400;
}

/* TÍTULOS - Satoshi */
h1, h2, h3, h4, h5, h6, .h2,
#navbarSupportedContent,
#navbarSupportedLogEnd {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
}

h1 {
    font-size: 2.25rem !important;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

/* GLOBAL SITE STYLES */
#logo {
    width: 64px;
    margin-right: 4px;
}

/* Shadow global — todas las cards y accordions */
.card,
.accordion {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

/* Link-card — la card ES el link */
.custom-card-hover {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.custom-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
}

.tool-page {
    padding: 2rem 0;
}

.page-title {
    margin-bottom: 1rem;
}

.page-intro {
    margin-bottom: 2rem;
    color: var(--bs-secondary-color);
}

.content-card {
    margin-bottom: 1.5rem;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

    .content-card .card-body {
        padding: 1.5rem;
    }

.content-card--muted {
    background: var(--bs-tertiary-bg);
}

.home-hero {
    margin-bottom: 2rem !important;
}

.home-market-panel {
    border: 1px solid var(--bs-border-color-translucent);
}

.home-market-section + .home-market-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.home-market-link {
    color: var(--bs-emphasis-color);
    white-space: nowrap;
}

.home-market-link:hover {
    color: var(--bs-primary);
}

.card-title-section {
    margin-bottom: 1.5rem;
}

.submit-row {
    display: grid;
    margin-top: 1.5rem;
}

.submit-row--start {
    justify-content: start;
}

.submit-btn {
    min-width: 12rem;
    font-weight: 600;
}

.metric-card {
    height: 100%;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-body-bg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.metric-card--primary {
    border-color: var(--bs-primary-border-subtle);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.metric-card--success {
    border-color: var(--bs-success-border-subtle);
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.metric-card--info {
    border-color: var(--bs-info-border-subtle);
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
}

.metric-label {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.metric-card--primary .metric-label,
.metric-card--success .metric-label,
.metric-card--info .metric-label {
    color: inherit;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.metric-value--sm {
    font-size: 1.125rem;
}

.link-card {
    position: relative;
}

.metric-link {
    margin-top: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.note-card {
    margin-bottom: 1.5rem;
    border: 0;
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    box-shadow: var(--bs-box-shadow-sm);
}

    .note-card .card-body {
        padding: 1.5rem;
    }

.tool-sidebar-sticky {
    position: sticky;
    top: 80px;
    z-index: 1;
}

.calc-table {
    margin-bottom: 0;
}

    .calc-table thead th {
        background: var(--bs-light-bg-subtle, #f8f9fa);
    }



.theme-toggle-btn {
    width: 40px;
    height: 40px;
}

.theme-toggle-icon {
    font-size: 1.2rem;
}

.icon-sun {
    display: none;
}

.stock-cancel-hidden {
    display: none;
}

.ticker-score-box,
.ticker-score-chip {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.75rem;
    background: rgba(13, 110, 253, 0.08);
    color: var(--bs-emphasis-color);
}

.ticker-score-box {
    min-width: 96px;
    padding: 0.75rem 1rem;
    text-align: center;
}

.ticker-score-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.ticker-score-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ticker-score-chip {
    min-width: 72px;
    padding: 0.5rem 0.75rem;
    text-align: center;
    font-weight: 600;
}

.ticker-metric {
    height: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
}

.ticker-metric-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}


/* Nav active indicator */
.navbar .nav-link.active {
    color: var(--brand-primary) !important;
    position: relative;
}

.navbar .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background: var(--brand-primary);
    border-radius: 1px;
}

@media (max-width: 991.98px) {
    .tool-sidebar-sticky {
        position: static;
    }

    .submit-row--start {
        justify-content: stretch;
    }
}