/* SP500Hoy Stock Screener CSS */

.sp500hoy-screener { font-family: 'Inter', sans-serif; }

/* Filtros */
.screener-filters {
    background: var(--color-bg-card, #111827);
    border: 1px solid var(--color-border, #1e2d45);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.screener-filters__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #1e2d45);
}

.screener-filters__header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text, #e8edf5);
    margin: 0;
}

.screener-filters__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1024px) { .screener-filters__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .screener-filters__grid { grid-template-columns: 1fr; } }

.filter-group { display: flex; flex-direction: column; gap: 6px; }

.filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-text-muted, #8899aa);
}

.filter-select,
.filter-input {
    background: var(--color-bg, #0a0e1a);
    border: 1px solid var(--color-border, #1e2d45);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--color-text, #e8edf5);
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.2s;
}

.filter-select:focus,
.filter-input:focus {
    outline: none;
    border-color: var(--color-accent, #1d6fff);
}

.filter-range {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border, #1e2d45);
    outline: none;
    margin-top: 8px;
}
.filter-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--color-accent, #1d6fff);
    cursor: pointer;
}

/* Tabla de resultados */
.screener-results {
    background: var(--color-bg-card, #111827);
    border: 1px solid var(--color-border, #1e2d45);
    border-radius: 12px;
    overflow: hidden;
}

.screener-results__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border, #1e2d45);
}

.screener-results__count {
    font-size: 13px;
    color: var(--color-text-muted, #8899aa);
    font-weight: 500;
}

.screener-table-wrapper { overflow-x: auto; }

.screener-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.screener-table th {
    background: rgba(255,255,255,0.03);
    padding: 12px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-text-muted, #8899aa);
    border-bottom: 1px solid var(--color-border, #1e2d45);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.screener-table th:hover { color: var(--color-text, #e8edf5); }

.screener-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(30, 45, 69, 0.5);
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
    color: var(--color-text-muted, #8899aa);
}

.screener-table tr:hover td { background: rgba(255,255,255,0.02); }

.screener-table .col-name { font-family: 'Inter', sans-serif; }

.stock-symbol {
    font-weight: 700;
    color: var(--color-text, #e8edf5);
    font-size: 14px;
    display: block;
}

.stock-name {
    font-size: 11px;
    color: var(--color-text-dim, #4a5568);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.val-up   { color: var(--color-positive, #00d084); font-weight: 600; }
.val-down { color: var(--color-negative, #ff4757); font-weight: 600; }
.val-neutral { color: var(--color-text-muted, #8899aa); }

/* AI Score badge */
.ai-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
}
.ai-score.high   { background: var(--color-positive, #00d084); }
.ai-score.medium { background: var(--color-warning, #ffa502); }
.ai-score.low    { background: var(--color-negative, #ff4757); }

/* Signal badge */
.signal-badge {
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}
.signal-strong_buy  { background: rgba(0,208,132,0.15); color: #00d084; }
.signal-buy         { background: rgba(0,208,132,0.08); color: #00c470; }
.signal-neutral     { background: rgba(136,153,170,0.1); color: #8899aa; }
.signal-sell        { background: rgba(255,71,87,0.08); color: #ff4757; }
.signal-strong_sell { background: rgba(255,71,87,0.15); color: #ff4757; }

/* Gate */
.screener-gate {
    text-align: center;
    padding: 60px 40px;
    background: var(--color-bg-card, #111827);
    border: 1px solid var(--color-border, #1e2d45);
    border-radius: 12px;
}
.screener-gate__icon { font-size: 48px; margin-bottom: 16px; }
.screener-gate h3 { font-size: 22px; font-weight: 700; color: var(--color-text, #e8edf5); margin-bottom: 12px; }
.screener-gate p  { color: var(--color-text-muted, #8899aa); max-width: 480px; margin: 0 auto 24px; line-height: 1.6; }