* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
    --bg:          #F6F5F1;
    --surface:     #FFFFFF;
    --surface2:    #FAF6EE;
    --border:      #D9D3C7;
    --border2:     #C7C0B2;
    --accent:      #3A3A3A;
    --accent-dim:  #6B6B6B;
    --accent-glow: rgba(58,58,58,0.10);
    --text:        #33291B;
    --text2:       #6E6656;
    --text3:       #938B7C;
    --up:          #0F9D6B;
    --down:        #C33B34;
    --warn:        #B5651D;
    --neutral:     #6E6656;
    --yellow:      #9A6B24;
    --mono:        'Consolas', 'Courier New', monospace;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--f-ui);
    font-size: 13px;
    line-height: 1.4;
}

/* ── HEADER ────────────────────────────────────────────────── */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* El trazo usa currentColor, asi el logo sigue al tema en vez de quedarse
   clavado en un gris que se pierde sobre fondo oscuro. La sombra era azul y
   el logo no tiene azul: se cambia al verde de la ruptura, tenue. */
.logo-svg {
    flex-shrink: 0; color: #4a3728;
}
@media (prefers-color-scheme: dark) { .logo-svg { color: #e8e0d4; } }
body.tema-oscuro .logo-svg, .tema-oscuro .logo-svg { color: #e8e0d4; }

.logo-text-wrap { display: flex; flex-direction: column; gap: 1px; }

@font-face {
    font-family: "Archivo";
    src: url("/static/fonts/Archivo-VariableFont.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-display: swap;
}

/* Logotipo (MANUAL_DE_IDENTIDAD §2): ABM + Trading sin espacio, Archivo ExtraBold,
   tracking -0.016em; el cambio de color hace la separacion. */
.logo-title {
    font-family: var(--f-ui);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.016em;
    color: #33291B;
}
@media (prefers-color-scheme: dark) { .logo-title { color: #EDE9E0; } }
body.tema-oscuro .logo-title, .tema-oscuro .logo-title { color: #EDE9E0; }

.logo-hub {
    color: #7ECB20;
    letter-spacing: -0.016em;
}

.logo-update {
    font-size: 10px;
    color: var(--text3);
    font-family: var(--mono);
    letter-spacing: 0.5px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--text2);
}

.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot.live        { background: var(--up); box-shadow: 0 0 7px var(--up); }
.status-dot.connecting  { background: var(--yellow); }
.status-dot.error       { background: var(--down); }

/* ── MARKET SUMMARY PANEL ──────────────────────────────────── */
.market-summary {
    background: var(--surface);
    border-bottom: 2px solid var(--border);
    padding: 14px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ms-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.summary-mood {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.summary-mood.up      { color: var(--up); }
.summary-mood.down    { color: var(--down); }
.summary-mood.neutral { color: var(--yellow); }

.summary-hora {
    font-size: 10px;
    color: var(--text3);
    font-family: var(--mono);
}

.summary-desc {
    font-size: 11px;
    color: var(--text2);
    line-height: 1.5;
}

/* ── GRID DE 2 COLUMNAS ────────────────────────────────────── */
.ms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
    align-items: start;
}

@media (max-width: 900px) { .ms-grid { grid-template-columns: 1fr; } }

.ms-panel-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text2);
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

/* ── RISK PANEL (izquierda) ────────────────────────────────── */
.ms-risk-panel {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}

.risk-indicator { padding: 6px 0; }

.ri-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}

.ri-name {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: var(--text2);
    text-transform: uppercase;
    min-width: 80px;
}

.ri-price {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    color: #33291B;
}

.ri-of100 {
    font-size: 11px;
    color: var(--text2);
    font-family: var(--mono);
}

.ri-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--surface);
    color: var(--text2);
    letter-spacing: 0.5px;
}
.ri-badge.up      { color: var(--up);   background: rgba(0,200,150,0.12); }
.ri-badge.down    { color: var(--down); background: rgba(230,48,85,0.12); }
.ri-badge.neutral { color: var(--yellow); background: rgba(200,160,0,0.12); }

.ri-arrow {
    font-size: 13px;
    font-weight: 800;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.ri-arrow.up   { color: var(--up); }
.ri-arrow.down { color: var(--down); }
.ri-arrow.flat { color: var(--neutral); }

/* ── GAUGE ─────────────────────────────────────────────────── */
.ri-gauge-wrap { margin-bottom: 4px; }

.ri-gauge-track {
    position: relative;
    height: 10px;
    border-radius: 5px;
    overflow: visible;
    background: var(--border);
    margin-bottom: 4px;
}

.ri-gauge-zones {
    display: flex;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.rgz { height: 100%; }

.ri-marker {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 18px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(255,255,255,0.6);
    transform: translateX(-50%);
    transition: left 0.6s ease;
    z-index: 2;
}

/* Marcador "fantasma" del cierre anterior: tenue y punteado, detrás del marcador actual.
   Muestra de dónde venía el indicador → se ve la dirección del movimiento del día. */
.ri-marker-prev {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 14px;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.5) 0 2px, transparent 2px 4px);
    transform: translateX(-50%);
    transition: left 0.6s ease;
    z-index: 1;
    opacity: 0.55;
}

.ri-zone-labels {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: var(--text2);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.ri-sub-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 3px;
}

.ri-warn {
    font-size: 9px;
    font-weight: 700;
    color: var(--warn);
    letter-spacing: 0.5px;
}

.ri-corr {
    font-size: 9px;
    color: var(--text2);
    margin-top: 3px;
    letter-spacing: 0.3px;
}

.ri-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

/* VIX term mini */
.vix-term-mini {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 9px;
    color: var(--text2);
    font-family: var(--mono);
    flex-wrap: wrap;
}

/* ── SESSIONS PANEL (derecha) ──────────────────────────────── */
.ms-sessions-panel {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ms-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

.ms-status-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ms-status-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text2);
    text-transform: uppercase;
}

.ms-countdown-val {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    color: #33291B;
}

.ms-status-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
}

/* ── BADGES / VALS REUTILIZABLES ───────────────────────────── */
.srow-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--surface);
    color: var(--text2);
}
.srow-badge.up      { color: var(--up);   background: rgba(0,200,150,0.12); }
.srow-badge.down    { color: var(--down); background: rgba(230,48,85,0.12); }
.srow-badge.neutral { color: var(--yellow); background: rgba(200,160,0,0.12); }

/* DASHBOARD CONTAINER */
.dashboard-container {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.loading {
    text-align: center;
    padding: 60px;
    color: var(--text3);
    font-size: 15px;
}

/* CATEGORY BLOCK */
.category-block {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.category-title {
    background: var(--surface2);
    padding: 9px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #3A3A3A;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
}

/* Categorías colapsables */
.category-title.cat-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.category-title.cat-toggle:hover { color: #3A3A3A; }
.category-title .cat-caret { font-size: 10px; color: #3A3A3A; transition: transform .15s ease; display: inline-block; }
.category-block.collapsed .cat-caret { transform: rotate(-90deg); }
.category-block.collapsed table { display: none; }
.wl-empty-row { text-align: center; color: #3A3A3A; font-size: 11px; padding: 12px !important; font-style: italic; }

/* TABLE */
table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    padding: 8px 14px;
    text-align: right;
    font-size: 10px;
    font-weight: 600;
    color: var(--text3);
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid #F6F5F1;
    background: #F6F5F1;
}
thead th:first-child  { text-align: left; }
thead th:nth-child(2) { text-align: left; }

tbody tr {
    border-bottom: 1px solid #F6F5F1;
    transition: background 0.15s;
}
tbody tr:hover       { background: #F6F5F1; }
tbody tr:last-child  { border-bottom: none; }

td {
    padding: 10px 14px;
    text-align: right;
    font-family: var(--mono);
    font-size: 13px;
}
td:first-child {
    text-align: left;
    font-weight: 700;
    color: #33291B;
    font-size: 13px;
    font-family: var(--f-ui);
}
td:nth-child(2) {
    text-align: left;
    color: var(--text3);
    font-size: 11px;
    font-family: var(--f-ui);
}

.price-cell   { font-weight: 700; font-size: 14px; color: #33291B; }
.change-cell.up      { color: var(--up); }
.change-cell.down    { color: var(--down); }
.change-cell.neutral { color: var(--text3); }

.trend-cell {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-block;
}
.trend-cell.up      { color: var(--up); background: var(--up)12; }
.trend-cell.down    { color: var(--down); background: var(--down)12; }
.trend-cell.neutral { color: var(--yellow); background: var(--yellow)12; }

.hl-cell     { color: var(--text3); font-size: 12px; }
.volume-cell { color: var(--text3); font-size: 11px; }
.na          { color: #FFFFFF; }

/* TABS */
.tabs-bar {
    display: flex;
    background: var(--bg);
    border-bottom: 2px solid var(--border);
    padding: 0 24px;
    gap: 4px;
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text3);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 20px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -2px;
}
.tab-btn:hover  { color: #5E5949; }
.tab-btn.active { color: #3A3A3A; border-bottom-color: #3A3A3A; }

.tab-content        { display: block; }
.tab-content.hidden { display: none; }

/* CALENDARIO — TOOLBAR (filtros + acciones) */
.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px 0;
    flex-wrap: wrap;
    gap: 10px;
}
.cal-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cal-action-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: #5E5949;
    font-size: 12px;
    padding: 5px 14px;
    cursor: pointer;
    letter-spacing: 0.4px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cal-action-btn:hover {
    border-color: #3A3A3A;
    color: #3A3A3A;
    background: #4fc3f710;
}
.cal-action-btn.active,
.cal-notif-btn.active {
    border-color: #0F9D6B;
    color: #0F9D6B;
    background: #26d96818;
}

.cal-filter-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: #5E5949;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    cursor: pointer;
    letter-spacing: 0.4px;
    transition: all 0.15s;
}
.cal-filter-btn:hover            { border-color: #3A3A3A; color: #3A3A3A; }
.cal-filter-btn.active           { border-color: #3A3A3A; color: #3A3A3A; background: #4fc3f710; }
.cal-filter-btn.roja.active      { border-color: var(--down); color: var(--down); background: var(--down)15; }
.cal-filter-btn.amarilla.active  { border-color: var(--yellow); color: var(--yellow); background: var(--yellow)15; }
.cal-filter-btn.earnings.active  { border-color: #3A3A3A; color: #3A3A3A; background: #7c4dff15; }

/* CALENDARIO ECONÓMICO */
.calendar-container {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cal-day-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #3A3A3A;
    text-transform: uppercase;
    padding: 14px 0 6px 4px;
    border-bottom: 1px solid var(--border);
    margin-top: 8px;
}

.cal-event {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-left: 4px solid #CFC8BA;
    border-radius: 6px;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 12px;
    align-items: start;
    transition: background 0.15s;
}
.cal-event:hover { background: var(--surface2); }
.cal-event.roja     { border-left-color: var(--down); }
.cal-event.amarilla { border-left-color: var(--yellow); }
.cal-event.earnings { border-left-color: #3A3A3A; }

.cal-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 90px;
}

.cal-hora {
    font-size: 14px;
    font-weight: 700;
    color: #33291B;
    font-family: var(--mono);
}

.cal-pais {
    font-size: 11px;
    color: var(--text3);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cal-flag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: fit-content;
}
.cal-flag.roja     { background: var(--down)20; color: var(--down); }
.cal-flag.amarilla { background: var(--yellow)20; color: var(--yellow); }
.cal-flag.earnings { background: #7c4dff20; color: #3A3A3A; }

.cal-center { display: flex; flex-direction: column; gap: 5px; }

.cal-titulo {
    font-size: 14px;
    font-weight: 700;
    color: #33291B;
}

.cal-desc {
    font-size: 12px;
    color: #5E5949;
    line-height: 1.5;
}

.cal-mercados {
    font-size: 11px;
    color: var(--text3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.mercado-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid;
    letter-spacing: 0.3px;
}

.cal-causa {
    font-size: 11px;
    color: var(--text3);
    font-style: italic;
    line-height: 1.4;
}

.cal-link {
    font-size: 11px;
    color: #3A3A3A;
    text-decoration: none;
    opacity: 0.7;
}
.cal-link:hover { opacity: 1; text-decoration: underline; }

.cal-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    min-width: 100px;
}

.cal-dato {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cal-dato-label {
    font-size: 9px;
    color: var(--text3);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cal-dato-val {
    font-size: 13px;
    font-weight: 700;
    font-family: var(--mono);
    color: #33291B;
}
.cal-dato-val.actual { color: var(--up); }

.cal-empty {
    text-align: center;
    padding: 60px;
    color: var(--text3);
    font-size: 14px;
}

/* ── NOTICIAS ─────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   S/R ANALYSIS — Pre-Mercado Bloque 2
═══════════════════════════════════════════════════════════ */
.pm-sr-refresh {
    background: #F6F5F1; border: 1px solid #FFFFFF; color: #3A3A3A;
    border-radius: 5px; padding: 3px 10px; font-size: 13px; cursor: pointer;
}
.pm-sr-refresh:disabled { opacity: 0.4; cursor: default; }
.sr-table { display: flex; flex-direction: column; gap: 4px; }
.sr-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 6px;
    background: #F6F5F1; border: 1px solid #F6F5F1;
    transition: border-color 0.2s;
}
.sr-row:hover { border-color: #FFFFFF; }
.sr-row-alert { border-color: #B5651D !important; background: #F6ECDD; }
.sr-row-err { opacity: 0.4; }
.sr-left { display: flex; align-items: center; gap: 10px; min-width: 200px; flex-shrink: 0; }
.sr-name { font-size: 11px; font-weight: 700; color: #33291B; min-width: 62px; }
.sr-price { font-size: 11px; color: #3A3A3A; font-family: var(--mono); min-width: 72px; }
.sr-trend { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.sr-up  { color: #0F9D6B; background: #E3F3EC; }
.sr-dn  { color: #C33B34; background: #F6E4E2; }
.sr-lat { color: #B5651D; background: #F6ECDD; }
.sr-alert { font-size: 9px; color: #B5651D; margin-left: 4px; }
.sr-right { display: flex; gap: 16px; flex: 1; }
.sr-col { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sr-col-label { font-size: 8px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 2px; }
.sr-level { font-size: 11px; font-family: var(--mono); color: #5E5949; }
.sr-level.sr-r { color: #C33B34; font-weight: 600; }
.sr-level.sr-r2 { color: #F6E4E2; font-weight: 400; }
.sr-level.sr-s { color: #0F9D6B; font-weight: 600; }
.sr-level.sr-s2 { color: #0F9D6B; font-weight: 400; }
.sr-dist { font-size: 9px; color: var(--text3); margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════
   AI MARKET SUMMARY CARD — Noticias tab
═══════════════════════════════════════════════════════════ */
.nai-card {
    margin: 12px 24px 6px;
    background: linear-gradient(135deg, #F6F5F1 0%, #F6F5F1 100%);
    border: 1px solid #FFFFFF;
    border-top: 3px solid #3A3A3A;
    border-radius: 8px;
    overflow: hidden;
}
.nai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #FFFFFF;
    gap: 8px;
}
.nai-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nai-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nai-icon { font-size: 16px; }
.nai-title {
    font-size: 13px;
    font-weight: 600;
    color: #33291B;
    letter-spacing: 0.3px;
}
.nai-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #3A3A3A;
    background: #4fc3f718;
    border: 1px solid #4fc3f740;
    border-radius: 4px;
    padding: 1px 6px;
}
/* Briefing escrito por el motor de RESPALDO (Llama 3.3, corte dic-2023): sus hechos
   y cargos pueden estar caducados. Ámbar para que no se lea como un briefing bueno. */
.nai-badge-degradado {
    color: #7A4A00;
    background: #ffb30020;
    border-color: #ffb30066;
    cursor: help;
}
.nai-ts {
    font-size: 10px;
    color: #3A3A3A;
    font-style: italic;
}
.nai-refresh-btn {
    background: transparent;
    border: 1px solid #FFFFFF;
    color: #3A3A3A;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.nai-refresh-btn:hover:not(:disabled) {
    border-color: #3A3A3A;
    background: #4fc3f710;
}
.nai-refresh-btn:disabled { opacity: 0.4; cursor: default; }

.nai-body {
    padding: 10px 14px 14px;
}
.nai-loading {
    color: #3A3A3A;
    font-size: 13px;
    font-style: italic;
    padding: 10px 0;
    text-align: center;
}

/* Layout: grid 2 columnas iguales, sin huecos */
.nai-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    gap: 10px;
    align-items: start;
}
.nai-section {
    background: #F6F5F1;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    padding: 10px 13px;
    display: flex;
    flex-direction: column;
    gap: 0;
    break-inside: avoid;
}
/* Narrativa y Noticias ocupan ancho completo */
.nai-section.nai-full,
.nai-section.nai-news { grid-column: 1 / -1; }

/* En móvil: una columna */
@media (max-width: 800px) {
    .nai-sections { grid-template-columns: 1fr; }
    .nai-section, .nai-section.nai-news, .nai-section.nai-full { grid-column: 1; }
}

.nai-section-title {
    font-size: 10px;
    font-weight: 700;
    color: #3A3A3A;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding-bottom: 7px;
    margin-bottom: 6px;
    border-bottom: 1px solid #FFFFFF;
}
.nai-section-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nai-bullet {
    display: flex;
    gap: 6px;
    font-size: 12px;
    color: #33291B;
    line-height: 1.5;
    align-items: flex-start;
    padding: 2px 0;
    border-bottom: 1px solid #F6F5F1;
}
.nai-bullet:last-child { border-bottom: none; }
.nai-dot {
    color: #3A3A3A;
    flex-shrink: 0;
    font-size: 10px;
    margin-top: 4px;
}
.nai-text {
    font-size: 12px;
    color: #33291B;
    line-height: 1.55;
    padding: 1px 0;
}
.nai-spacer { height: 2px; }
.nai-code {
    font-family: var(--mono);
    font-size: 11px;
    background: #FFFFFF;
    padding: 1px 4px;
    border-radius: 3px;
    color: #3A3A3A;
}
.nai-subhead {
    font-size: 11px;
    font-weight: 700;
    color: #3A3A3A;
    margin: 6px 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.nai-section strong { color: #33291B; font-weight: 600; }
.nai-up  { color: #0F9D6B; font-weight: 600; }
.nai-dn  { color: #C33B34; font-weight: 600; }
.nai-risk-on      { color: #0F9D6B; font-weight: 700; }
.nai-risk-off     { color: #C33B34; font-weight: 700; }
.nai-risk-neutral { color: #B5651D; font-weight: 700; }

/* Flash animation cuando llega actualización */
@keyframes nai-flash {
    0%   { border-top-color: #3A3A3A; box-shadow: 0 0 12px #4fc3f730; }
    50%  { border-top-color: #3A3A3A; box-shadow: 0 0 22px #00e5ff50; }
    100% { border-top-color: #3A3A3A; box-shadow: none; }
}
.nai-updated { animation: nai-flash 1.2s ease; }

.news-container {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.news-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-left: 4px solid #FFFFFF;
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: background 0.15s;
}
.news-card:hover     { background: var(--surface2); }
.news-card.critico   { border-left-color: #C33B34; background: #F6E4E2; animation: pulse-critico 2s infinite; }
.news-card.alta      { border-left-color: var(--down); }
.news-card.media     { border-left-color: var(--yellow); }

@keyframes pulse-critico {
    0%, 100% { border-left-color: #C33B34; }
    50%       { border-left-color: #C33B34; }
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.news-time   { font-size: 10px; color: var(--text3); font-family: var(--mono); }
.news-source { font-size: 10px; color: #3A3A3A; font-weight: 600; letter-spacing: 0.5px; }
.news-extra-sources {
    font-size: 9px;
    color: var(--text2);
    background: var(--border2);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
}
.news-imp {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.news-imp.critico { background: #ff174420; color: #C33B34; animation: pulse-critico 2s infinite; }
.news-imp.alta    { background: var(--down)20; color: var(--down); }
.news-imp.media   { background: var(--yellow)20; color: var(--yellow); }

.news-title {
    font-size: 13px;
    font-weight: 600;
    color: #33291B;
    text-decoration: none;
    line-height: 1.4;
}
.news-title:hover { color: #3A3A3A; text-decoration: underline; }

/* Badge en el tab */
.news-badge {
    display: inline-block;
    background: var(--down);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
    min-width: 18px;
    text-align: center;
}
.news-badge.hidden { display: none; }

/* Toggle sonido */
.news-sound-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #5E5949;
    cursor: pointer;
    user-select: none;
}
.toggle-label input { cursor: pointer; accent-color: #3A3A3A; }

/* ── TOASTS ───────────────────────────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}

.news-toast {
    background: #F6F5F1;
    border: 1px solid var(--border);
    border-left: 4px solid #CFC8BA;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 24px #00000060;
    animation: toastIn 0.3s ease;
    transition: opacity 0.4s ease;
}
.news-toast.critico { border-left-color: #C33B34; background: #F6E4E2; }
.news-toast.alta    { border-left-color: var(--down); }
.news-toast.media   { border-left-color: var(--yellow); }

@keyframes toastIn {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.toast-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.toast-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.toast-badge.critico { background: #ff174420; color: #C33B34; }
.toast-badge.alta    { background: var(--down)20; color: var(--down); }
.toast-badge.media   { background: var(--yellow)20; color: var(--yellow); }
.toast-source { font-size: 10px; color: #3A3A3A; font-weight: 600; flex: 1; }
.toast-close  {
    background: none; border: none; color: var(--text3);
    cursor: pointer; font-size: 13px; padding: 0;
    line-height: 1;
}
.toast-close:hover { color: #33291B; }
.toast-title { font-size: 12px; color: #33291B; line-height: 1.4; font-weight: 500; }
.toast-link  { font-size: 11px; color: #3A3A3A; text-decoration: none; opacity: 0.8; }
.toast-link:hover { opacity: 1; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   PRE-MERCADO
   ═══════════════════════════════════════════════════════════════════ */
.pm-container {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 1080px;
}

/* Barra fecha */
.pm-date-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
}
.pm-date-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--up);
    box-shadow: 0 0 6px var(--up);
    animation: pm-pulse 2s infinite;
    flex-shrink: 0;
}
@keyframes pm-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
#pm-today-date { font-family: var(--mono); font-size: 12px; color: #5E5949; }
#pm-load-status { font-size: 11px; color: var(--text3); }
.pm-refresh-btn {
    margin-left: auto;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #3A3A3A;
    font-size: 11px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all .15s;
}
.pm-refresh-btn:hover { background: #4fc3f715; border-color: #3A3A3A; }

/* Card */
.pm-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
}
.pm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.pm-card-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #3A3A3A;
}
.pm-card-timer {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text3);
    background: var(--surface2);
    padding: 3px 8px;
    border-radius: 4px;
}
.pm-divider { height: 1px; background: var(--border); margin: 14px 0; }
.pm-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
}

/* Asset table */
.pm-table-head {
    display: grid;
    grid-template-columns: 110px 110px 90px 145px 1fr;
    gap: 8px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}
.pm-table-head > div {
    font-size: 9px; font-weight: 700;
    color: #FFFFFF; text-transform: uppercase; letter-spacing: 1px;
}
.pm-asset-row {
    display: grid;
    grid-template-columns: 110px 110px 90px 145px 1fr;
    gap: 8px;
    align-items: center;
    padding: 6px 2px;
    border-bottom: 1px solid #F6F5F1;
}
.pm-asset-row:last-child { border-bottom: none; }
.pm-asset-name { font-size: 12px; font-weight: 600; color: #33291B; }
.pm-asset-price { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #33291B; }
.pm-asset-change { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.pm-asset-change.up      { color: var(--up); }
.pm-asset-change.down    { color: var(--down); }
.pm-asset-change.neutral { color: var(--text3); }
.pm-asset-select {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
    color: #5E5949; font-size: 11px; padding: 5px 8px;
    outline: none; width: 100%; cursor: pointer;
}
.pm-asset-select:focus { border-color: #3A3A3A; color: #33291B; }
.pm-asset-select option { background: var(--surface2); }
.pm-asset-nota {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
    color: #33291B; font-size: 11px; padding: 5px 8px; outline: none; width: 100%;
}
.pm-asset-nota:focus { border-color: #3A3A3A; }
.pm-asset-nota::placeholder { color: #FFFFFF; }
.pm-fg-badge {
    font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: 4px;
    background: #F6F5F1; color: #33291B; white-space: nowrap;
}
.pm-fg-badge.up      { color: var(--up); background: var(--up)18; }
.pm-fg-badge.down    { color: var(--down); background: var(--down)18; }
.pm-fg-badge.neutral { color: var(--yellow); background: var(--yellow)18; }

/* Pills */
.pm-pills-row { display: flex; gap: 18px; flex-wrap: wrap; }
.pm-field { flex: 1; min-width: 150px; }
.pm-label {
    display: block; font-size: 10px; color: var(--text3);
    letter-spacing: 1px; text-transform: uppercase; margin-bottom: 7px;
}
.pm-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.pm-pill {
    font-size: 11px; padding: 5px 11px; border-radius: 14px;
    border: 1px solid var(--border); color: var(--text3);
    cursor: pointer; transition: all .15s; background: var(--surface2); user-select: none;
}
.pm-pill:hover { border-color: #CFC8BA; color: #5E5949; }
.pm-pill.green  { background: var(--up)14; color: var(--up); border-color: rgba(0,230,118,.28); }
.pm-pill.red    { background: var(--down)14; color: var(--down); border-color: rgba(255,82,82,.28); }
.pm-pill.amber  { background: var(--yellow)14; color: var(--yellow); border-color: rgba(255,214,0,.28); }
.pm-pill.purple { background: #7c4dff14; color: #3A3A3A; border-color: rgba(124,77,255,.28); }

/* Conditions + Fund grids */
.pm-cond-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pm-fund-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Textarea / Input */
.pm-textarea {
    width: 100%; background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; color: #33291B; font-family: var(--f-ui);
    font-size: 12px; padding: 9px 12px; outline: none; resize: none; line-height: 1.5;
}
.pm-textarea:focus { border-color: #3A3A3A; }
.pm-textarea::placeholder { color: #FFFFFF; }
.pm-input {
    width: 100%; background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; color: #33291B; font-size: 12px;
    padding: 9px 12px; outline: none; transition: border .15s;
}
.pm-input:focus { border-color: #3A3A3A; }
.pm-input::placeholder { color: #FFFFFF; }

/* Today's events */
.pm-events-loading { font-size: 12px; color: var(--text3); padding: 8px 0; }
.pm-events-empty {
    text-align: center; padding: 14px; color: var(--up);
    background: var(--up)10; border-radius: 8px;
    border: 1px solid rgba(0,230,118,.15); font-size: 13px;
}
.pm-events-list { display: flex; flex-direction: column; gap: 6px; }
.pm-event-card {
    background: var(--surface2); border: 1px solid var(--border);
    border-left: 3px solid var(--down); border-radius: 6px;
    padding: 10px 14px; display: flex; align-items: flex-start; gap: 12px;
}
.pm-event-time { font-family: var(--mono); font-size: 12px; font-weight: 700; color: #33291B; white-space: nowrap; min-width: 80px; }
.pm-event-body { flex: 1; }
.pm-event-title { font-size: 13px; font-weight: 600; color: #33291B; margin-bottom: 3px; }
.pm-event-mkt   { font-size: 10px; color: var(--text3); }

/* Elder test */
.pm-elder-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; border-bottom: 1px solid #F6F5F1;
}
.pm-elder-row:last-child { border-bottom: none; }
.pm-elder-q { font-size: 12px; color: #33291B; flex: 1; padding-right: 16px; line-height: 1.4; }
.pm-elder-opts { display: flex; gap: 4px; flex-shrink: 0; }
.pm-elder-opt {
    font-size: 10px; padding: 4px 9px; border-radius: 5px;
    border: 1px solid var(--border); cursor: pointer; color: var(--text3);
    background: var(--surface2); transition: all .15s; white-space: nowrap;
}
.pm-elder-opt:hover { color: #5E5949; border-color: #FFFFFF; }
.pm-elder-opt.sel { background: #7c4dff18; color: #3A3A3A; border-color: rgba(124,77,255,.35); font-weight: 600; }
.pm-elder-score {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 18px; display: flex; align-items: center;
    justify-content: space-between; margin-top: 14px;
}
.pm-elder-score-label { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
.pm-elder-score-num   { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--text3); }
.pm-elder-score-right { text-align: right; }
.pm-elder-score-class { font-size: 13px; font-weight: 600; color: var(--text3); margin-top: 3px; }

/* Synthesis */
.pm-synth-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 4px; }
.pm-synth-item { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.pm-synth-label { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.pm-synth-val   { font-size: 12px; color: #5E5949; font-family: var(--mono); }

/* Commitments */
.pm-commit-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px; border-radius: 8px; border: 1px solid var(--border);
    margin-bottom: 8px; cursor: pointer; transition: all .15s;
}
.pm-commit-item:hover { border-color: #FFFFFF; background: #F6F5F1; }
.pm-commit-item.checked { background: var(--up)10; border-color: rgba(0,230,118,.2); }
.pm-commit-box {
    width: 20px; height: 20px; border-radius: 5px;
    border: 1px solid #FFFFFF; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; transition: all .15s; margin-top: 1px;
}
.pm-commit-item.checked .pm-commit-box { background: var(--up); border-color: var(--up); color: #F6F5F1; font-size: 12px; }
.pm-commit-item.checked .pm-commit-box::after { content: '✓'; }
.pm-commit-text { font-size: 12px; color: #5E5949; line-height: 1.5; }
.pm-commit-item.checked .pm-commit-text { color: var(--up); }

/* Decision */
.pm-decision {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 20px; margin-top: 16px; text-align: center;
}
.pm-decision-label { font-size: 9px; font-weight: 700; color: var(--text3); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.pm-decision-val   { font-size: 15px; font-weight: 700; color: var(--text3); }
.pm-decision-val.up      { color: var(--up); }
.pm-decision-val.down    { color: var(--down); }
.pm-decision-val.neutral { color: var(--yellow); }

/* Buttons */
.pm-btn-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.pm-btn {
    display: inline-flex; align-items: center; padding: 9px 18px;
    border-radius: 8px; border: 1px solid #FFFFFF; background: transparent;
    color: #5E5949; font-size: 13px; cursor: pointer; transition: all .15s;
}
.pm-btn:hover { background: #F6F5F1; color: #33291B; }
.pm-btn-primary { background: #7c4dff18; border-color: rgba(124,77,255,.35); color: #3A3A3A; }
.pm-btn-primary:hover { background: rgba(124,77,255,.18); }

/* Historial pre-mercado */
.pm-hist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px solid var(--border);
    margin-bottom: 6px;
    background: var(--surface2);
    flex-wrap: wrap;
}
.pm-hist-row:last-child { margin-bottom: 0; }
.pm-hist-date  { font-family: var(--mono); font-size: 11px; color: #5E5949; min-width: 95px; flex-shrink: 0; }
.pm-hist-cell  { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 70px; }
.pm-hist-label { font-size: 9px; color: #FFFFFF; text-transform: uppercase; letter-spacing: 1px; }

/* ── NOTICIAS — category & score badges ──────────────────────────────────── */
.news-cat-badge {
    font-size: 9px; font-weight: 700; padding: 2px 6px;
    border-radius: 10px; letter-spacing: 0.5px; white-space: nowrap;
}
.news-score-badge {
    font-size: 9px; font-weight: 800; padding: 1px 5px;
    border-radius: 4px; font-family: var(--mono); white-space: nowrap;
}

/* ── PANEL DE IMPACTO DE NOTICIAS ─────────────────────────────────────────── */
.ni-panel {
    margin: 14px 16px 6px;
    background: #F6F5F1;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
}
.ni-loading { font-size: 12px; color: var(--text3); text-align: center; padding: 10px; }

.ni-row {
    display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
    margin-bottom: 10px;
}
.ni-stat {
    display: flex; gap: 10px; align-items: center;
    background: #F6F5F1; border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 14px; flex: 1; min-width: 110px;
}
.ni-stat-icon { font-size: 22px; line-height: 1; }
.ni-stat-body { display: flex; flex-direction: column; gap: 2px; }
.ni-stat-label { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }
.ni-stat-value { font-size: 16px; font-weight: 700; color: #33291B; }
.ni-stat-sub   { font-size: 10px; color: #5E5949; }

.ni-intensity-bar {
    width: 80px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 2px;
}
.ni-intensity-fill { height: 100%; border-radius: 3px; transition: width 0.6s; }

.ni-cats-row {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    margin-bottom: 8px;
}
.ni-cats-label { font-size: 10px; color: var(--text3); }
.ni-cat-chip {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
    white-space: nowrap;
}
.ni-footer { font-size: 10px; color: var(--text3); text-align: right; margin-top: 2px; }
.ni-footer a { color: #3A3A3A; text-decoration: none; }
.ni-footer a:hover { text-decoration: underline; }

/* ── MARKETAUX — Noticias con sentimiento ─────────────────────────────────── */
.mktx-section {
    padding: 16px 20px 8px;
    background: #F6F5F1;
}
.mktx-header {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.mktx-title    { font-size: 13px; font-weight: 700; color: #33291B; letter-spacing: 1px; }
.mktx-subtitle { font-size: 11px; color: var(--text3); flex: 1; }
.mktx-legend   { display: flex; gap: 6px; }

.mktx-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: 10px; letter-spacing: 0.5px;
    white-space: nowrap;
}
.sent-positive { background: #E3F3EC; color: var(--up); border: 1px solid var(--up)40; }
.sent-negative { background: #F6E4E2; color: var(--down); border: 1px solid var(--down)40; }
.sent-neutral  { background: #F6F5F1; color: #33291B; border: 1px solid #33445540; }

.mktx-container {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 420px; overflow-y: auto;
    padding-right: 4px;
}
.mktx-container::-webkit-scrollbar       { width: 4px; }
.mktx-container::-webkit-scrollbar-track { background: transparent; }
.mktx-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.mktx-card {
    background: #F6F5F1; border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 14px; transition: border-color .2s;
}
.mktx-card:hover { border-color: #CFC8BA; }

.mktx-card-top {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.mktx-source { font-size: 10px; color: var(--text3); flex: 1; }
.mktx-time   { font-size: 10px; color: #FFFFFF; font-family: var(--mono); }

.mktx-card-title { font-size: 12px; line-height: 1.5; margin-bottom: 4px; }
.mktx-card-title a {
    color: #33291B; text-decoration: none; transition: color .2s;
}
.mktx-card-title a:hover { color: #3A3A3A; }

.mktx-card-desc  { font-size: 11px; color: var(--text3); line-height: 1.4; margin-bottom: 6px; }
.mktx-symbols    { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.mktx-sym {
    font-size: 9px; font-weight: 700; font-family: var(--mono);
    background: #F6F5F1; color: #3A3A3A; padding: 1px 6px;
    border-radius: 4px; border: 1px solid #FFFFFF;
}

.mktx-divider {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; color: var(--text3); font-size: 11px;
    font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.mktx-divider::before, .mktx-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── SPARKLINES ─────────────────────────────────────────── */
.spark-th  { width: 80px; text-align: center; }
.spark-td  { text-align: center; padding: 4px 6px; }
.spark-svg { display: block; margin: 0 auto; overflow: visible; }
.spark-wait { color: #FFFFFF; font-size: 12px; letter-spacing: 2px; }

/* ── TABS BAR — botón alertas ───────────────────────────── */
.tabs-bar { position: relative; display: flex; align-items: center; }
.tabs-right { margin-left: auto; display: flex; align-items: center; padding-right: 12px; }

.alert-bell-btn {
    background: none; border: 1px solid #FFFFFF; color: #5E5949;
    border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 13px;
    position: relative; transition: all .2s; white-space: nowrap;
}
.alert-bell-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.alert-count-badge {
    background: var(--yellow); color: #F6F5F1; border-radius: 9px;
    padding: 0 5px; font-size: 10px; font-weight: 800; min-width: 16px;
    display: inline-block; text-align: center; vertical-align: middle;
}
.alert-count-badge.hidden { display: none; }

/* ── PANEL ALERTAS ──────────────────────────────────────── */
.alert-overlay {
    position: fixed; inset: 0; background: #00000060; z-index: 998;
}
.alert-panel {
    position: fixed; right: 0; top: 0; bottom: 0; width: 340px;
    background: var(--surface2); border-left: 1px solid #FFFFFF;
    z-index: 999; display: flex; flex-direction: column;
    box-shadow: -8px 0 32px #00000080;
    transition: transform .25s ease;
}
.alert-panel.hidden  { display: none; }
.alert-overlay.hidden { display: none; }
.alert-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 18px; border-bottom: 1px solid #FFFFFF;
    font-size: 14px; font-weight: 700; color: #33291B;
}
.alert-panel-close {
    background: none; border: none; color: var(--text3); font-size: 16px;
    cursor: pointer; padding: 4px;
}
.alert-panel-close:hover { color: var(--down); }

.alert-add-row {
    display: flex; gap: 6px; padding: 12px 14px;
    border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.alert-select {
    background: var(--bg); border: 1px solid #FFFFFF; color: #33291B;
    border-radius: 6px; padding: 6px 8px; font-size: 12px; flex: 1; min-width: 100px;
}
.alert-select-sm { flex: 0 0 auto; min-width: 110px; }
.alert-input {
    background: var(--bg); border: 1px solid #FFFFFF; color: #33291B;
    border-radius: 6px; padding: 6px 8px; font-size: 12px; width: 80px;
}
.alert-add-btn {
    background: var(--yellow); border: none; color: #F6F5F1;
    border-radius: 6px; padding: 6px 12px; font-size: 16px; font-weight: 800;
    cursor: pointer; transition: opacity .2s;
}
.alert-add-btn:hover { opacity: .8; }

.alert-list { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.alert-empty { color: var(--text3); font-size: 12px; text-align: center; padding: 24px 0; }

.alert-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface);
}
.alert-item-active    { border-left: 3px solid var(--up); }
.alert-item-off       { border-left: 3px solid #CFC8BA; opacity: .6; }
.alert-item-triggered { border-left: 3px solid #3A3A3A; background: #F6F5F1; }
.alert-item-info { display: flex; flex-direction: column; gap: 3px; }
.alert-item-asset { font-weight: 700; font-size: 13px; color: #33291B; }
.alert-item-cond  { font-size: 11px; color: #5E5949; }
.alert-item-actions { display: flex; align-items: center; gap: 6px; }
.alert-item-state { font-size: 14px; }
.alert-item-btn {
    background: #F6F5F1; border: 1px solid #FFFFFF; color: #33291B;
    border-radius: 5px; padding: 3px 8px; cursor: pointer; font-size: 12px;
}
.alert-item-btn:hover { border-color: #3A3A3A; color: #3A3A3A; }
.alert-item-btn.danger:hover { border-color: var(--down); color: var(--down); }
.alert-tip {
    padding: 10px 14px; font-size: 10px; color: #FFFFFF;
    border-top: 1px solid var(--border); line-height: 1.5;
}

/* ── OPERACIONES — Diario de trading ────────────────────── */
.ops-container { max-width: 1300px; margin: 0 auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 16px; }

.ops-stats-bar {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ops-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 60px; }
.ops-stat-num { font-size: 20px; font-weight: 800; font-family: var(--mono); color: #33291B; }
.ops-stat-num.up   { color: var(--up); }
.ops-stat-num.down { color: var(--down); }
.ops-stat-lbl  { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.ops-stat-sep  { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; }

.ops-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px;
}
.ops-card-title { font-size: 13px; font-weight: 700; color: #3A3A3A; margin-bottom: 14px; letter-spacing: .5px; }
.ops-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

.ops-form { display: flex; flex-direction: column; gap: 10px; }
.ops-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ops-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 120px; }
.ops-field-sm { flex: 0 0 auto; min-width: 100px; }
.ops-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.ops-input {
    background: var(--surface); border: 1px solid var(--border); color: #33291B;
    border-radius: 6px; padding: 7px 10px; font-size: 13px; width: 100%;
}
.ops-input:focus { outline: none; border-color: #3A3A3A; }
.ops-input::placeholder { color: #FFFFFF; }

.ops-dir-pills { display: flex; gap: 6px; }
.ops-dir-pill {
    flex: 1; text-align: center; padding: 7px 6px; border-radius: 6px;
    border: 1px solid var(--border); color: var(--text3); cursor: pointer; font-size: 12px;
    font-weight: 700; transition: all .2s;
}
.ops-dir-pill:hover { border-color: #5E5949; }
.ops-dir-pill.active-long  { background: #E3F3EC; border-color: var(--up); color: var(--up); }
.ops-dir-pill.active-short { background: #F6E4E2; border-color: var(--down); color: var(--down); }

.ops-btn {
    background: #F6F5F1; border: 1px solid #FFFFFF; color: #33291B;
    border-radius: 7px; padding: 7px 14px; cursor: pointer; font-size: 12px;
    transition: all .2s; white-space: nowrap;
}
.ops-btn:hover { border-color: #3A3A3A; color: #3A3A3A; }
.ops-btn-primary { background: #3A3A3A; color: #F6F5F1; border-color: #3A3A3A; font-weight: 700; }
.ops-btn-primary:hover { background: #3A3A3A; border-color: #3A3A3A; color: #F6F5F1; }

.ops-filter-sel {
    background: var(--bg); border: 1px solid var(--border); color: #33291B;
    border-radius: 6px; padding: 5px 8px; font-size: 12px; cursor: pointer;
}

.ops-table-wrap { overflow-x: auto; }
.ops-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
.ops-table th {
    background: var(--surface2); color: var(--text3); font-size: 10px; text-transform: uppercase;
    letter-spacing: .5px; padding: 8px 10px; text-align: left;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ops-table td {
    padding: 9px 10px; border-bottom: 1px solid var(--surface2); color: #33291B;
    vertical-align: middle;
}
.ops-table tr:hover td { background: #F6F5F1; }
.ops-table td.num { font-family: var(--mono); text-align: right; font-size: 12px; }
.ops-td-fecha { color: var(--text3); font-size: 11px; white-space: nowrap; }
.ops-td-notas { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5E5949; font-size: 11px; }

.ops-long  { color: var(--up); font-weight: 700; }
.ops-short { color: var(--down); font-weight: 700; }
.ops-st-open { color: var(--yellow); font-size: 11px; }
.ops-st-win  { color: var(--up); font-size: 11px; }
.ops-st-loss { color: var(--down); font-size: 11px; }
.ops-st-be   { color: #5E5949; font-size: 11px; }

.ops-row-btn {
    background: none; border: 1px solid var(--border); color: var(--text3);
    border-radius: 5px; padding: 3px 8px; cursor: pointer; font-size: 11px; margin-left: 3px;
}
.ops-row-btn:hover { border-color: var(--down); color: var(--down); }
.ops-row-close { color: var(--up); border-color: var(--up)40; }
.ops-row-close:hover { background: #E3F3EC; border-color: var(--up); }
.ops-row-ib-btn { color: #3A3A3A; border-color: #FFFFFF; font-weight: 700; letter-spacing: .4px; font-size: 10px; }
.ops-row-ib-btn:hover { color: #33291B; border-color: #3A3A3A; background: #F6F5F1; }

.ops-empty { color: var(--text3); font-size: 13px; text-align: center; padding: 32px 0; }

/* ── IA PRE-MERCADO ─────────────────────────────────────────────── */
.pm-ai-btn {
    background: linear-gradient(135deg, #F6F5F1, #F6F5F1);
    border: 1px solid #4fc3f740; color: #3A3A3A;
    border-radius: 7px; padding: 5px 12px; cursor: pointer;
    font-size: 12px; font-weight: 600; transition: all .2s;
    margin-left: 6px;
}
.pm-ai-btn:hover:not(:disabled) { border-color: #3A3A3A; background: #F6F5F1; }
.pm-ai-btn:disabled { opacity: .5; cursor: default; }
.pm-ai-tg-btn { border-color: #26d96840; color: #0F9D6B; }
.pm-ai-tg-btn:hover:not(:disabled) { border-color: #0F9D6B; }

.pm-ai-card { border-left: 3px solid #3A3A3A !important; margin-bottom: 0; }
.pm-ai-card-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
}
.pm-ai-badge {
    font-size: 10px; background: #F6F5F1; border: 1px solid #4fc3f730;
    color: #3A3A3A; border-radius: 5px; padding: 2px 8px; letter-spacing: .5px;
}
.pm-ai-body { min-height: 60px; }
.pm-ai-loading { color: var(--text3); font-size: 13px; padding: 12px 0; font-style: italic; }
.pm-ai-text {
    font-size: 13px; line-height: 1.8; color: #33291B;
    white-space: pre-wrap;
}
.pm-ai-cached { font-size: 10px; color: #FFFFFF; margin-top: 10px; }

/* ── MODAL CIERRE DE OPERACIÓN ────────────────────────────────────── */
.ops-modal-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,.65); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
}
.ops-modal-overlay.hidden { display: none; }

.ops-modal {
    background: #F6F5F1; border: 1px solid #FFFFFF;
    border-radius: 12px; padding: 28px 28px 22px;
    width: 100%; max-width: 460px; box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.ops-modal-title {
    font-size: 16px; font-weight: 700; color: #33291B;
    margin-bottom: 16px; letter-spacing: .3px;
}
.ops-modal-info {
    font-size: 12px; color: #3A3A3A;
    background: #F6F5F1; border-radius: 7px; padding: 10px 14px;
    margin-bottom: 18px; line-height: 1.7;
}
.ops-close-pills {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.ops-close-pill {
    font-size: 12px; padding: 6px 14px; border-radius: 20px;
    border: 1px solid #FFFFFF; color: #3A3A3A;
    cursor: pointer; transition: all .15s; user-select: none;
}
.ops-close-pill:hover { border-color: #3A3A3A; color: #33291B; }
.ops-close-pill.active-tp      { border-color: #0F9D6B; background: #E3F3EC; color: #0F9D6B; }
.ops-close-pill.active-sl      { border-color: var(--down); background: #F6E4E2; color: var(--down); }
.ops-close-pill.active-be      { border-color: #5E5949; background: #F6F5F1; color: #33291B; }
.ops-close-pill.active-manual  { border-color: #B5651D; background: #F6ECDD; color: #B5651D; }
.ops-close-pill.active-yes     { border-color: #0F9D6B; background: #E3F3EC; color: #0F9D6B; }
.ops-close-pill.active-partial { border-color: #B5651D; background: #F6ECDD; color: #B5651D; }
.ops-close-pill.active-no      { border-color: var(--down); background: #F6E4E2; color: var(--down); }

.ops-modal-btns {
    display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px;
}

/* compliance / close-reason icons in table */
.ops-reason-icon { font-size: 13px; margin-right: 2px; }
.ops-compliance-badge {
    font-size: 10px; padding: 1px 7px; border-radius: 10px;
    font-weight: 600; letter-spacing: .3px;
}
.ops-compliance-yes     { background: #E3F3EC; color: #0F9D6B; border: 1px solid #26d96850; }
.ops-compliance-partial { background: #F6ECDD; color: #B5651D; border: 1px solid #ffa72650; }
.ops-compliance-no      { background: #F6E4E2; color: var(--down); border: 1px solid var(--down)50; }

/* ── SESSIONS INLINE (en la fila ACCIONES/FOREX/CRYPTO) ────────────── */
.summary-row-sessions { flex-wrap: wrap; gap: 8px; }
.sessions-inline { display: flex; gap: 5px; align-items: stretch; flex-wrap: wrap; }
.sess-chip {
    display: flex; flex-direction: column; align-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 7px; padding: 4px 8px; min-width: 68px; flex: 1;
    cursor: default;
}
.sess-chip.active  { border-color: #26d96860; background: #E3F3EC; }
.sess-chip.overlap { border-color: var(--yellow)60; background: #F6ECDD; }
.sess-chip-top { display: flex; align-items: center; gap: 5px; }
.sess-chip-flag { font-size: 11px; }
.sess-chip-name { font-size: 9px; font-weight: 700; color: #3A3A3A; text-transform: uppercase; letter-spacing: .3px; }
.sess-chip.active  .sess-chip-name { color: #0F9D6B; }
.sess-chip.overlap .sess-chip-name { color: var(--yellow); }
.sess-chip-time { font-size: 11px; font-weight: 800; font-family: var(--mono); color: #3A3A3A; margin-top: 2px; }
.sess-chip.active  .sess-chip-time { color: #33291B; }
.sess-chip.overlap .sess-chip-time { color: var(--yellow); }
.sess-chip-sub { font-size: 9px; color: #FFFFFF; margin-top: 1px; white-space: nowrap; }
.sess-chip.active  .sess-chip-sub { color: #E3F3EC; }
.sess-chip.overlap .sess-chip-sub { color: #F6ECDD; }
.sess-prog { height: 2px; width: 100%; background: var(--border); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.sess-prog-bar { height: 100%; border-radius: 2px; transition: width .5s; }
.sess-chip.active  .sess-prog-bar { background: #0F9D6B; }
.sess-chip.overlap .sess-prog-bar { background: var(--yellow); }
.sess-chip:not(.active):not(.overlap) .sess-prog-bar { background: #FFFFFF; width: 0 !important; }

/* ── SECTOR HEAT MAP ─────────────────────────────────────────────── */
.sector-heatmap-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}
.sector-hm-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--text3);
    letter-spacing: .5px;
    text-transform: uppercase;
}
.sector-hm-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
}
.sector-hm-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 4px 2px 3px;
    cursor: default;
    transition: filter .15s;
    min-height: 38px;
}
.sector-hm-cell:hover { filter: brightness(1.25); }
.sector-hm-sym {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1;
}
.sector-hm-name {
    font-size: 7px;
    opacity: .75;
    line-height: 1.2;
    text-align: center;
    margin-top: 1px;
}
.sector-hm-pct {
    font-size: 10px;
    font-weight: 800;
    font-family: var(--mono);
    margin-top: 2px;
    line-height: 1;
}
.sector-hm-loading {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 10px;
    color: #FFFFFF;
    padding: 8px 0;
}
/* Retornos 5D y 1M */
.sector-hm-rets {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-top: 2px;
    flex-wrap: wrap;
}
/* Señal compuesta */
.sector-hm-signal {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2px;
    gap: 1px;
}
.sector-hm-sig-icon {
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}
.sector-hm-sig-label {
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: center;
    line-height: 1.1;
    text-transform: uppercase;
}
/* Celdas más altas para acomodar el análisis */
.sector-hm-cell {
    min-height: 72px !important;
}

/* ── WATCHLIST MARKET EXTRAS separator ───────────────────────────── */
#watchlist-mkt-extras {
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* ── MACRO TAB ──────────────────────────────────────────────────────── */
.macro-container {
    max-width: 1300px; margin: 0 auto; padding: 20px 18px;
    display: flex; flex-direction: column; gap: 16px;
}
.macro-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.macro-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px;
}
.macro-card-header {
    display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;
}
.macro-card-title {
    font-size: 13px; font-weight: 700; color: #3A3A3A; letter-spacing: .3px;
}
.macro-card-sub { font-size: 10px; color: var(--text3); margin-top: 3px; }
.macro-refresh-btn {
    background: var(--surface); border: 1px solid #FFFFFF; color: #3A3A3A;
    border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer;
    white-space: nowrap; transition: all .15s;
}
.macro-refresh-btn:hover { border-color: #3A3A3A; color: #3A3A3A; }
.macro-loading { color: var(--text3); font-size: 12px; padding: 16px 0; font-style: italic; }

/* FedWatch */
.fw-rate-big { font-size: 36px; font-weight: 800; font-family: var(--mono); color: #33291B; }
.fw-rate-lbl { font-size: 11px; color: var(--text3); margin-top: 2px; }
.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 10px; margin-top: 14px; }
.fw-meeting {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
}
.fw-meeting.next { border-color: #4fc3f740; background: #F6F5F1; }
.fw-meeting-date { font-size: 12px; font-weight: 700; color: #3A3A3A; margin-bottom: 6px; }
.fw-meeting.next .fw-meeting-date { color: #3A3A3A; }
.fw-prob-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 4px 0; }
.fw-prob-fill-cut  { height: 100%; background: #0F9D6B; border-radius: 3px; }
.fw-prob-fill-hike { height: 100%; background: var(--down); border-radius: 3px; }
.fw-prob-fill-hold { height: 100%; background: var(--yellow); border-radius: 3px; }
.fw-prob-lbl { font-size: 10px; color: #3A3A3A; display: flex; justify-content: space-between; }

/* COT */
.cot-grid { display: flex; flex-direction: column; gap: 10px; }
.cot-row {
    display: grid; grid-template-columns: 90px 1fr 80px; gap: 10px;
    align-items: center; padding: 8px 10px;
    background: var(--surface); border-radius: 7px; border: 1px solid var(--border);
}
.cot-name { font-size: 12px; font-weight: 700; color: #33291B; }
.cot-bars { display: flex; flex-direction: column; gap: 3px; }
.cot-bar-row { display: flex; align-items: center; gap: 6px; }
.cot-bar-lbl { font-size: 9px; color: var(--text3); width: 22px; text-align: right; }
.cot-bar-track { flex: 1; height: 8px; background: var(--border); border-radius: 4px; position: relative; overflow: visible; }
.cot-bar-fill  { height: 100%; border-radius: 4px; transition: width .4s; }
.cot-nc-fill { background: #3A3A3A; }
.cot-c-fill  { background: #B5651D; }
.cot-net { font-size: 11px; font-family: var(--mono); font-weight: 700; text-align: right; }
.cot-date { font-size: 9px; color: #FFFFFF; margin-top: 2px; text-align: right; }

/* Reddit */
.wsb-tickers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wsb-ticker {
    background: var(--surface); border: 1px solid #FFFFFF; border-radius: 6px;
    padding: 4px 10px; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; gap: 6px;
}
.wsb-ticker-rank { font-size: 9px; color: var(--text3); }
.wsb-ticker-name { color: #33291B; }
.wsb-ticker-count { font-size: 10px; color: #3A3A3A; }
.wsb-posts { display: flex; flex-direction: column; gap: 6px; }
.wsb-post {
    padding: 8px 10px; background: var(--surface); border-radius: 7px;
    border: 1px solid var(--border); font-size: 11px;
}
.wsb-post-title { color: #33291B; margin-bottom: 4px; line-height: 1.4; }
.wsb-post-meta  { color: var(--text3); font-size: 10px; }
.wsb-post a     { color: inherit; text-decoration: none; }
.wsb-post a:hover .wsb-post-title { color: #3A3A3A; }

/* SEC */
.sec-list { display: flex; flex-direction: column; gap: 8px; }
.sec-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; background: var(--surface); border-radius: 8px;
    border: 1px solid var(--border);
}
.sec-fund { font-size: 13px; font-weight: 700; color: #33291B; }
.sec-date { font-size: 11px; color: var(--text3); margin-top: 3px; }
.sec-link {
    font-size: 11px; color: #3A3A3A; text-decoration: none;
    border: 1px solid #4fc3f730; border-radius: 5px; padding: 3px 9px;
}
.sec-link:hover { background: #F6F5F1; }

/* ── INDICADORES AVANZADOS ──────────────────────────────────────────── */
.adv-stat-box {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 10px; text-align: center;
}
.adv-stat-val { font-size: 14px; font-weight: 700; color: #33291B; }
.adv-stat-lbl { font-size: 9px; color: var(--text3); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; }

/* Crypto */
.crypto-grid { display: flex; flex-direction: column; gap: 4px; }
.crypto-row {
    display: grid; grid-template-columns: 48px 1fr 80px 50px;
    align-items: center; padding: 6px 8px; border-radius: 6px;
    border-bottom: 1px solid #F6F5F1;
}
.crypto-sym   { font-size: 11px; font-weight: 800; color: #3A3A3A; }
.crypto-price { font-size: 12px; font-weight: 700; color: #33291B; font-family: var(--mono); }

/* Insider */
.insider-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.insider-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 10px; background: var(--surface); border-radius: 6px;
    text-decoration: none; border-bottom: 1px solid #F6F5F1; transition: background .15s;
}
.insider-row:hover { background: #F6F5F1; }
.insider-company { font-size: 12px; color: #33291B; }

/* ForexFactory */
.ffcal-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.ffcal-row {
    display: grid; grid-template-columns: 120px 1fr 100px;
    align-items: center; gap: 8px; padding: 7px 8px;
    border-bottom: 1px solid #F6F5F1; font-size: 11px;
}
.ffcal-left  { display: flex; flex-direction: column; gap: 2px; }
.ffcal-title { color: #33291B; font-size: 11px; }
.ffcal-nums  { display: flex; flex-direction: column; gap: 2px; text-align: right; }

/* Multi-News */
.mnews-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.mnews-row {
    display: block; text-decoration: none; padding: 8px 10px;
    border-bottom: 1px solid #F6F5F1; transition: background .15s;
}
.mnews-row:hover { background: var(--surface); }
.mnews-source { font-size: 9px; font-weight: 700; color: #3A3A3A; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.mnews-title  { font-size: 12px; color: #33291B; line-height: 1.4; margin-bottom: 3px; }
.mnews-desc   { font-size: 10px; color: var(--text3); line-height: 1.3; }

/* ── AI ANALYSIS BLOCK ─────────────────────────────────────────────── */
.ops-ai-row { background: #F6F5F1; border-top: 1px solid var(--border); }
.ops-ai-details { width: 100%; }
.ops-ai-details summary {
    cursor: pointer; color: #3A3A3A; font-size: 11px;
    padding: 6px 12px; list-style: none; user-select: none;
    display: flex; align-items: center; gap: 6px;
}
.ops-ai-details summary::-webkit-details-marker { display: none; }
.ops-ai-details summary::before { content: "▶"; font-size: 9px; transition: transform .2s; }
.ops-ai-details[open] summary::before { transform: rotate(90deg); }
.ops-ai-text {
    font-family: var(--mono); font-size: 11px; color: #33291B;
    white-space: pre-wrap; padding: 8px 20px 12px; margin: 0;
    background: #F6F5F1; line-height: 1.7; border-top: 1px solid #F6F5F1;
}

/* ── CORRELATION ANALYTICS ─────────────────────────────────────────── */
.ops-corr-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding: 12px;
}
.ops-corr-section-title {
    font-size: 10px; color: #3A3A3A; text-transform: uppercase;
    letter-spacing: .5px; margin-bottom: 10px; font-weight: 700;
}
.ops-corr-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ops-corr-lbl { font-size: 11px; color: #3A3A3A; min-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-corr-bar-wrap {
    flex: 1; height: 8px; background: var(--border); border-radius: 4px;
    position: relative; display: flex; align-items: center;
}
.ops-corr-bar {
    height: 100%; background: linear-gradient(to right, #0F9D6B, #3A3A3A);
    border-radius: 4px; transition: width 0.4s;
}
.ops-corr-wr { font-size: 10px; color: #33291B; margin-left: 6px; font-weight: 700; min-width: 36px; }
.ops-corr-meta { font-size: 10px; color: var(--text3); min-width: 60px; text-align: right; }
.ops-corr-empty { font-size: 11px; color: var(--text3); padding: 8px 0; }

/* ── EARNINGS CARD ─────────────────────────────────────────────────── */
.cal-earning-row {
    display: grid; grid-template-columns: 60px 80px 1fr 65px;
    gap: 8px; align-items: center; padding: 5px 0;
    border-bottom: 1px solid #F6F5F1; font-size: 11px;
}
.cal-earning-row:last-child { border-bottom: none; }
.cal-earning-dia  { color: #3A3A3A; }
.cal-earning-hora { color: #5E5949; }
.cal-earning-title { color: #33291B; font-weight: 600; }
.cal-earning-prev  { color: var(--text3); text-align: right; }

/* ── PRICE ALERTS PANEL ────────────────────────────────────────────── */
.price-alerts-panel {
    background: #F6F5F1; border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.price-alerts-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px; cursor: pointer; user-select: none;
    font-size: 12px; font-weight: 700; color: #3A3A3A;
    letter-spacing: .5px;
    transition: background .15s;
}
.price-alerts-header:hover { background: #F6F5F1; }
.alerts-count-badge {
    font-size: 10px; background: #4fc3f720; color: #3A3A3A;
    padding: 2px 8px; border-radius: 10px; font-weight: 600;
}
.price-alerts-toggle { margin-left: auto; color: var(--text3); font-size: 10px; }
.price-alerts-body { padding: 12px 20px 16px; }
.alerts-form-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 12px;
}
.alerts-input  { flex: 1; min-width: 120px; max-width: 220px; }
.alerts-select { flex: 0 0 130px; }
.alerts-add-btn { flex: 0 0 auto; white-space: nowrap; }
.alert-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 10px; border-radius: 6px; background: #F6F5F1;
    border: 1px solid var(--border); margin-bottom: 6px; font-size: 12px;
    transition: border-color .2s;
}
.alert-row:hover { border-color: #4fc3f740; }
.alert-triggered { opacity: .55; border-color: #26d96840 !important; }
.alert-asset { font-weight: 700; color: #33291B; min-width: 80px; }
.alert-cond  { color: #3A3A3A; font-size: 11px; }
.alert-price { font-family: var(--mono); font-weight: 700; color: #3A3A3A; }
.alert-note-lbl { color: var(--text3); font-size: 11px; flex: 1; }
.alert-fired-lbl { color: #0F9D6B; font-size: 11px; font-weight: 600; }
.alert-del-btn {
    margin-left: auto; background: none; border: none;
    color: var(--text3); cursor: pointer; font-size: 13px; padding: 0 4px;
    transition: color .15s;
}
.alert-del-btn:hover { color: var(--down); }
.alerts-empty { font-size: 11px; color: var(--text3); padding: 6px 4px; }

/* ── RISK PANEL ────────────────────────────────────────────────────── */
.risk-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: #F6F5F1;
    border: 1px solid #F6F5F1; border-radius: 8px; overflow: hidden;
    margin-bottom: 16px;
}
.risk-metric {
    background: var(--bg); padding: 14px 16px; text-align: center;
    transition: background .15s;
}
.risk-metric:hover { background: #F6F5F1; }
.risk-metric-val {
    font-size: 22px; font-weight: 800; font-family: var(--mono);
    line-height: 1.1; margin-bottom: 4px;
}
.risk-metric-lbl {
    font-size: 10px; color: #3A3A3A; text-transform: uppercase;
    letter-spacing: .5px; font-weight: 700;
}
.risk-metric-sub { font-size: 9px; color: #FFFFFF; margin-top: 3px; }

.risk-dist-wrap { margin-top: 4px; }
.risk-dist-title {
    font-size: 10px; color: #3A3A3A; text-transform: uppercase;
    letter-spacing: .5px; font-weight: 700; margin-bottom: 8px;
}
.risk-dist-bars {
    display: flex; align-items: flex-end; gap: 3px;
    height: 52px; padding: 0 2px;
}
.risk-dist-bar-wrap {
    flex: 1; display: flex; align-items: flex-end;
    cursor: default;
}
.risk-dist-bar {
    width: 100%; border-radius: 2px 2px 0 0;
    opacity: .85; transition: opacity .15s;
    min-height: 3px;
}
.risk-dist-bar-wrap:hover .risk-dist-bar { opacity: 1; }

/* ── CHARTS ROW ────────────────────────────────────────────────────── */
.ops-charts-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.ops-chart-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
}
.ops-chart-card-header {
    display: flex; justify-content: space-between; align-items: center;
}
.ops-chart-title {
    font-size: 12px; font-weight: 700; color: #3A3A3A;
    text-transform: uppercase; letter-spacing: .5px;
}
.ops-chart-meta {
    font-size: 11px; color: var(--text3);
}

/* Equity curve SVG */
.ops-equity-svg {
    width: 100%; height: 100px; display: block; overflow: visible;
}

/* Instrument chart */
.ops-instrument-chart {
    display: flex; flex-direction: column; gap: 7px;
}
.ops-inst-row {
    display: grid; grid-template-columns: 70px 1fr 60px 38px;
    align-items: center; gap: 8px;
}
.ops-inst-name { font-size: 12px; font-weight: 700; color: #33291B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-inst-bar-wrap { height: 14px; background: #F6F5F1; border-radius: 3px; overflow: hidden; }
.ops-inst-bar { height: 100%; border-radius: 3px; border-left: 2px solid; transition: width .4s; }
.ops-inst-pnl { font-size: 11px; font-weight: 700; font-family: var(--mono); text-align: right; }
.ops-inst-count { font-size: 10px; color: var(--text3); text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════════
   RENDIMIENTO POR SESIÓN Y HORARIO
   Columnas FIJAS por grid: con anchos automáticos el texto se dispersaba a lo
   ancho de la tarjeta y quedaba ilegible.
   ═══════════════════════════════════════════════════════════════════════════ */
.ses-row {
    display: grid;
    grid-template-columns: 116px 1fr 72px 84px;
    align-items: center; gap: 10px;
    padding: 3px 0;
}
.ses-nom      { font-size: 12px; font-weight: 700; color: #33291B; line-height: 1.25; }
.ses-horario  { font-size: 9px; color: #3A3A3A; font-weight: 400; }
.ses-track    { height: 15px; background: #F6F5F1; border-radius: 3px; overflow: hidden; }
.ses-fill     { height: 100%; border-radius: 3px; border-left: 2px solid; transition: width .4s; }
.ses-pnl      { font-size: 12px; font-weight: 700; font-family: var(--mono); text-align: right; }
.ses-meta     { font-size: 10px; color: #3A3A3A; text-align: right; white-space: nowrap; }

/* Mapa de horas */
.hora-wrap    { display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.hora-col     { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.hora-col.activa { cursor: pointer; }
.hora-col.activa:hover .hora-bar { opacity: 1; filter: brightness(1.25); }
.hora-bar     { border-radius: 2px 2px 0 0; opacity: .85; transition: opacity .15s, filter .15s; }
.hora-bar.sel { opacity: 1; outline: 2px solid #3A3A3A; outline-offset: 1px; }
.hora-vacia   { height: 1px; background: #FFFFFF; }
.hora-ejes    { display: flex; gap: 2px; margin-top: 4px; }
.hora-eje     { flex: 1; text-align: center; font-size: 9px; color: #3A3A3A; }
.hora-eje.activa { cursor: pointer; }
.hora-eje.activa:hover { color: #3A3A3A; }
.hora-eje.sel { color: #3A3A3A; font-weight: 700; }

/* Detalle de una hora — tabla con columnas fijas */
.hdet {
    background: #F6F5F1; border: 1px solid #FFFFFF;
    border-radius: 6px; margin-top: 10px; overflow: hidden;
}
.hdet-head {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; background: #F6F5F1; border-bottom: 1px solid #FFFFFF;
}
.hdet-hora  { color: #3A3A3A; font-size: 12px; font-weight: 700; font-family: var(--mono); }
.hdet-resu  { font-size: 11px; color: #3A3A3A; }
.hdet-total { font-size: 13px; font-weight: 700; font-family: var(--mono); margin-left: auto; }
.hdet-x {
    background: none; border: none; color: #3A3A3A; cursor: pointer;
    font-size: 16px; line-height: 1; padding: 0 2px;
}
.hdet-x:hover { color: #33291B; }
.hdet-scroll { max-height: 220px; overflow-y: auto; }
.hdet-row {
    display: grid;
    /* El sobrante se reparte entre activo y cuenta en vez de dejar un hueco
       muerto de ~580px. Duración y % del capital aprovechan el ancho con datos. */
    grid-template-columns: 112px minmax(78px, 1.2fr) 24px 52px 62px 104px 68px minmax(72px, 1fr);
    align-items: center; gap: 8px;
    padding: 5px 10px; font-size: 11px;
    border-top: 1px solid #FFFFFF;
}
.hdet-dur { color: #3A3A3A; font-family: var(--mono); text-align: right; }
.hdet-pct { color: #3A3A3A; font-family: var(--mono); text-align: right; font-size: 10px; }
.hdet-row.cabecera {
    border-top: none; padding: 5px 10px 4px;
    font-size: 9px; color: #3A3A3A; text-transform: uppercase; letter-spacing: .4px;
}
.hdet-row:not(.cabecera):hover { background: #F6F5F1; }
.hdet-fecha  { color: #3A3A3A; font-family: var(--mono); white-space: nowrap; }
.hdet-act    { color: #33291B; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdet-lotes  { color: #3A3A3A; font-family: var(--mono); text-align: right; }
.hdet-pnl    { font-weight: 700; font-family: var(--mono); text-align: right; }
.hdet-cta    { color: #3A3A3A; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.hdet-vacio  { padding: 10px; font-size: 11px; color: #3A3A3A; text-align: center; }
.hdet-pista  { font-size: 10px; color: #3A3A3A; text-align: center; padding: 6px 2px; }

.ses-nota    { margin-top: 10px; font-size: 11px; color: #8aa; line-height: 1.55; }
.ses-aviso   { margin-top: 5px; color: #B5651D; font-size: 10px; }

@media (max-width: 768px) {
    .ses-row      { grid-template-columns: 92px 1fr 62px; gap: 7px; }
    .ses-meta     { display: none; }
    /* Solo 5 columnas en móvil. Las celdas OCULTAS deben llevar las mismas clases
       en la cabecera que en los datos, o la cabecera desborda la rejilla. */
    .hdet-row     { grid-template-columns: 68px minmax(42px, 1fr) 18px 72px 46px;
                    gap: 5px; padding: 5px 8px; font-size: 10px; }
    /* La cabecera tiene su propio padding (mayor especificidad): si no se iguala
       aquí, sus columnas arrancan 2px corridas respecto a los datos. */
    .hdet-row.cabecera { padding: 5px 8px 4px; }
    .hdet-pct     { font-size: 9px; }
    .hdet-lotes,
    .hdet-dur,
    .hdet-cta     { display: none; }
    .hdet-head    { flex-wrap: wrap; gap: 6px; }
    .hdet-resu    { font-size: 10px; }
    .hora-wrap    { height: 52px; }
}

/* Setup grade pills — form */
.ops-setup-pills { display: flex; gap: 6px; margin-top: 6px; }
.ops-setup-pill {
    padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
    border: 1px solid #FFFFFF; color: #3A3A3A; cursor: pointer;
    transition: all .15s; user-select: none;
}
.ops-setup-pill:hover { border-color: #3A3A3A; color: #33291B; }
.ops-setup-pill.active[data-val="A+"] { border-color: #33291B; background: #F6ECDD; color: #33291B; }
.ops-setup-pill.active[data-val="A"]  { border-color: #0F9D6B; background: #E3F3EC; color: #0F9D6B; }
.ops-setup-pill.active[data-val="B"]  { border-color: #3A3A3A; background: #F6F5F1; color: #3A3A3A; }
.ops-setup-pill.active[data-val="C"]  { border-color: #5E5949; background: #F6F5F1; color: #33291B; }

/* Setup chart */
.ops-setup-row {
    display: flex; align-items: center; gap: 12px; padding: 8px 0;
    border-bottom: 1px solid #F6F5F1;
}
.ops-setup-row:last-child { border-bottom: none; }
.ops-setup-grade-badge {
    min-width: 36px; text-align: center; padding: 4px 8px;
    border-radius: 6px; border: 1px solid; font-weight: 800; font-size: 13px;
}
.ops-setup-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ops-setup-bar-track { height: 8px; background: #F6F5F1; border-radius: 4px; overflow: hidden; }
.ops-setup-bar-fill  { height: 100%; border-radius: 4px; transition: width .4s; }

/* ── VIEW TOGGLE ────────────────────────────────────────────────────── */
.ops-view-toggle {
    display: flex; background: var(--surface); border: 1px solid var(--border);
    border-radius: 7px; overflow: hidden;
}
.ops-view-btn {
    background: none; border: none; color: #3A3A3A;
    padding: 5px 12px; font-size: 12px; cursor: pointer; transition: all .15s;
}
.ops-view-btn.active { background: #FFFFFF; color: #33291B; font-weight: 600; }
.ops-view-btn:hover:not(.active) { color: #33291B; }

/* ── CALENDAR ───────────────────────────────────────────────────────── */
.ops-cal-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.ops-cal-nav-btn {
    background: #F6F5F1; border: 1px solid var(--border); color: #3A3A3A;
    border-radius: 6px; padding: 4px 14px; font-size: 18px; cursor: pointer;
    transition: all .15s;
}
.ops-cal-nav-btn:hover { border-color: #3A3A3A; color: #3A3A3A; }
.ops-cal-month-label {
    font-size: 15px; font-weight: 700; color: #33291B; letter-spacing: .3px;
}
.ops-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
    margin-bottom: 4px;
}
.ops-cal-hdr {
    text-align: center; font-size: 10px; color: var(--text3);
    text-transform: uppercase; letter-spacing: .5px; padding: 4px 0;
}
.ops-cal-day {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    min-height: 64px; padding: 6px 7px; cursor: pointer;
    transition: border-color .15s; position: relative;
}
.ops-cal-day:hover:not(.ops-cal-empty) { border-color: #CFC8BA; }
.ops-cal-empty { background: transparent; border-color: transparent; cursor: default; }
.ops-cal-day.is-today { border-color: #4fc3f740; }
.ops-cal-day.selected { border-color: #3A3A3A !important; background: #F6F5F1; }
.ops-cal-day.has-win  { border-left: 3px solid #0F9D6B; background: #E3F3EC; }
.ops-cal-day.has-loss { border-left: 3px solid var(--down); background: #F6E4E2; }
.ops-cal-day.has-win.selected  { background: #E3F3EC; }
.ops-cal-day.has-loss.selected { background: #F6E4E2; }
.ops-cal-day-num {
    font-size: 11px; color: var(--text3); font-weight: 700; margin-bottom: 4px;
}
.ops-cal-day.is-today .ops-cal-day-num { color: #3A3A3A; }
.ops-cal-day-pnl {
    font-size: 12px; font-weight: 800; font-family: var(--mono);
    color: #33291B; line-height: 1.2;
}
.ops-cal-day.has-win  .ops-cal-day-pnl { color: #0F9D6B; }
.ops-cal-day.has-loss .ops-cal-day-pnl { color: var(--down); }
.ops-cal-day-count {
    font-size: 10px; color: #3A3A3A; margin-top: 2px;
}

/* Calendar day detail panel */
.ops-cal-day-detail {
    background: var(--surface); border: 1px solid #FFFFFF;
    border-radius: 10px; padding: 16px; margin-top: 10px;
}
.ops-cal-day-detail.hidden { display: none; }
.ops-cal-detail-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.ops-cal-detail-date {
    font-size: 14px; font-weight: 700; color: #33291B;
    text-transform: capitalize; margin-bottom: 6px;
}
.ops-cal-detail-stats {
    display: flex; gap: 10px; align-items: center; font-size: 12px; flex-wrap: wrap;
}
.ops-cal-detail-stats span { color: #3A3A3A; }
.ops-cal-detail-pnl { font-size: 16px !important; font-weight: 800 !important; font-family: var(--mono); }
.ops-cal-detail-close {
    background: none; border: none; color: var(--text3);
    font-size: 16px; cursor: pointer; padding: 2px 6px;
}
.ops-cal-detail-close:hover { color: var(--down); }
.ops-cal-trades-list { display: flex; flex-direction: column; gap: 10px; }
.ops-cal-trade-row {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px;
}
.ops-cal-trade-top {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ops-cal-trade-time { font-size: 11px; color: var(--text3); font-family: var(--mono); }
.ops-cal-trade-rr { font-size: 11px; color: #3A3A3A; font-family: var(--mono); }
.ops-cal-close-btn {
    margin-left: auto; padding: 3px 10px; font-size: 11px; font-weight: 600;
    background: transparent; border: 1px solid var(--down); color: var(--down);
    border-radius: 6px; cursor: pointer; transition: background .15s, color .15s;
}
.ops-cal-close-btn:hover { background: var(--down)22; }
.ops-cal-edit-btn {
    margin-left: auto; padding: 3px 10px; font-size: 11px;
    background: transparent; border: 1px solid #CFC8BA; color: #3A3A3A;
    border-radius: 6px; cursor: pointer; transition: background .15s, color .15s;
}
.ops-cal-edit-btn:hover { border-color: #3A3A3A; color: #33291B; background: #F6F5F1; }
.ops-cal-del-btn {
    margin-left: 6px; padding: 3px 8px; font-size: 11px;
    background: transparent; border: 1px solid #CFC8BA; color: #5E5949;
    border-radius: 6px; cursor: pointer; transition: background .15s, color .15s;
}
.ops-cal-del-btn:hover { border-color: var(--down); color: var(--down); background: var(--down)11; }
.ops-cal-ib-btn {
    margin-left: 6px; padding: 3px 8px; font-size: 10px; font-weight: 700; letter-spacing: .5px;
    background: transparent; border: 1px solid #FFFFFF; color: #3A3A3A;
    border-radius: 6px; cursor: pointer; transition: background .15s, color .15s;
}
.ops-cal-ib-btn:hover { border-color: #3A3A3A; color: #33291B; background: #F6F5F1; }
.ops-cal-trade-pnl { font-size: 13px; font-weight: 800; font-family: var(--mono); margin-left: auto; }
.ops-cal-trade-notes {
    font-size: 11px; color: #3A3A3A; margin-top: 6px;
    padding-top: 6px; border-top: 1px solid var(--border);
}

/* ── IMAGE UPLOAD ───────────────────────────────────────────────────── */
.ops-img-input-label {
    display: block; background: var(--surface); border: 1px dashed #FFFFFF;
    color: #3A3A3A; font-size: 11px; border-radius: 6px;
    padding: 7px 10px; cursor: pointer; text-align: center;
    transition: all .15s; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
}
.ops-img-input-label:hover { border-color: #3A3A3A; color: #3A3A3A; }
.ops-img-input-label.has-img { border-color: #26d96860; color: #0F9D6B; }

.ops-img-thumb {
    width: 52px; height: 52px; object-fit: cover;
    border-radius: 5px; cursor: pointer; border: 1px solid #FFFFFF;
    transition: transform .15s;
}
.ops-img-thumb:hover { transform: scale(1.1); border-color: #3A3A3A; }

/* Two-image slot in cal detail */
.ops-trade-imgs {
    display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; flex-wrap: wrap;
}
.ops-trade-img-slot {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ops-trade-img-slot-label {
    font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .4px;
}
.ops-trade-img-add {
    width: 52px; height: 52px; border: 1px dashed #FFFFFF; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text3); font-size: 18px; cursor: pointer; transition: all .15s;
}
.ops-trade-img-add:hover { border-color: #3A3A3A; color: #3A3A3A; }

/* Modal image row */
.ops-modal-img-row { display: flex; gap: 10px; align-items: center; }
.ops-modal-img-label { flex: 1; margin: 0; }
.ops-modal-img-preview {
    width: 52px; height: 52px; object-fit: cover;
    border-radius: 5px; cursor: pointer; border: 1px solid #26d96860;
}
.ops-modal-img-preview.hidden { display: none; }

/* ── LIGHTBOX ───────────────────────────────────────────────────────── */
.ops-lightbox {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,.92); display: flex;
    align-items: center; justify-content: center;
}
.ops-lightbox.hidden { display: none; }
.ops-lightbox img {
    max-width: 92vw; max-height: 88vh;
    border-radius: 8px; box-shadow: 0 8px 48px rgba(0,0,0,.8);
}
.ops-lightbox-close {
    position: absolute; top: 18px; right: 22px;
    background: var(--border); border: none; color: #33291B;
    font-size: 20px; border-radius: 50%;
    width: 36px; height: 36px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ops-lightbox-close:hover { background: var(--down); }

@media (max-width: 768px) {
    .header              { padding: 10px 14px; }
    .dashboard-container { padding: 12px 10px; }
    .market-summary      { padding: 12px 14px; }
    .calendar-container  { padding: 12px 10px; }
    td, th               { padding: 8px 8px; font-size: 12px; }
    .cal-event           { grid-template-columns: 1fr; }
    .cal-right           { align-items: flex-start; flex-direction: row; gap: 16px; }
    .tabs-bar            { padding: 0 10px; }
    .alert-panel         { width: 100%; }
    .ops-form-row        { flex-direction: column; }
    .ops-charts-row      { grid-template-columns: 1fr; }
    .ops-cal-grid        { gap: 2px; }
    .ops-cal-day         { min-height: 48px; }
    .ops-inst-row        { grid-template-columns: 55px 1fr 52px 30px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLASH ANIMATION — precio actualizado en tiempo real
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes flash-up {
    0%   { background-color: rgba(0, 230, 118, 0.50); color: var(--up); }
    100% { background-color: transparent; }
}
@keyframes flash-down {
    0%   { background-color: rgba(255, 82, 82, 0.45); color: var(--down); }
    100% { background-color: transparent; }
}
.flash-up   { animation: flash-up   0.9s ease-out; border-radius: 3px; }
.flash-down { animation: flash-down 0.9s ease-out; border-radius: 3px; }

/* ── IB Live indicator ────────────────────────────────────────────────────── */
.ib-live-dot {
    color: var(--up); font-size: 9px; margin-left: 6px;
    animation: ib-pulse 2s ease-in-out infinite;
    display: none;   /* oculto por defecto — solo visible en categorías con datos IB */
}
.category-block.has-ib .ib-live-dot { display: inline-block; }
@keyframes ib-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.ib-live-badge {
    font-size: 9px; font-weight: 700; letter-spacing: .8px;
    color: var(--up); background: rgba(0,230,118,.12);
    border: 1px solid rgba(0,230,118,.3); border-radius: 4px;
    padding: 1px 5px; margin-left: 8px; vertical-align: middle;
    animation: ib-pulse 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTFOLIO IB PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
#ib-portfolio-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 16px;
}
.portfolio-header {
    display: flex; align-items: center; margin-bottom: 10px;
}
.portfolio-title {
    font-size: 13px; font-weight: 700; color: #33291B; letter-spacing: .3px;
}
.portfolio-empty {
    font-size: 12px; color: var(--text3); padding: 8px 0; text-align: center;
}
.portfolio-summary-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
    margin-bottom: 12px;
}
.portfolio-kpi {
    background: #F6F5F1; border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 10px; text-align: center;
}
.portfolio-kpi-val {
    font-size: 14px; font-weight: 700; color: #33291B; font-variant-numeric: tabular-nums;
}
.portfolio-kpi-val.up   { color: var(--up); }
.portfolio-kpi-val.down { color: var(--down); }
.portfolio-kpi-lbl { font-size: 9px; color: #3A3A3A; text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.portfolio-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
.portfolio-table th {
    text-align: right; font-size: 9px; font-weight: 600; color: var(--text3);
    text-transform: uppercase; letter-spacing: .4px; padding: 4px 6px;
    border-bottom: 1px solid var(--border);
}
.portfolio-table th:first-child { text-align: left; }
.portfolio-table td {
    text-align: right; padding: 5px 6px; color: #33291B;
    border-bottom: 1px solid #F6F5F1;
}
.portfolio-table td:first-child { text-align: left; }
.portfolio-table td.up   { color: var(--up); }
.portfolio-table td.down { color: var(--down); }
.tipo-badge {
    font-size: 9px; color: #3A3A3A; background: #F6F5F1;
    border-radius: 3px; padding: 1px 4px; margin-left: 4px;
}

/* ── IB Fill Toast ─────────────────────────────────────────────────────────── */
.ib-fill-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    background: #F6F5F1; border: 1px solid var(--up); border-radius: 10px;
    padding: 12px 18px; color: #33291B; font-size: 13px;
    box-shadow: 0 4px 24px rgba(0,0,0,.6);
    transform: translateX(120%); transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    max-width: 300px;
}
.ib-fill-toast.show { transform: translateX(0); }

@media (max-width: 900px) {
    .portfolio-summary-grid { grid-template-columns: repeat(3,1fr); }
    .portfolio-kpi-val { font-size: 12px; }
}

/* ══ SISTEMA / BACKTESTING ══════════════════════════════════════ */
.sistema-wrap { padding: 0 0 40px 0; }
.sistema-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.sistema-title { font-size: 20px; font-weight: 700; color: #33291B; margin: 0; }
.sistema-sub   { font-size: 12px; color: #5E5949; margin-top: 4px; }
.sistema-actions { display: flex; align-items: center; gap: 12px; }

.bt-run-btn {
    background: #3A3A3A; color: #fff; border: none; border-radius: 8px;
    padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .2s;
}
.bt-run-btn:hover { background: #3A3A3A; }
.bt-run-btn:disabled { background: #CFC8BA; color: #5E5949; cursor: not-allowed; }

.bt-badge {
    font-size: 12px; font-weight: 600; padding: 4px 12px;
    border-radius: 20px; white-space: nowrap;
}
.bt-idle      { background: #FFFFFF; color: #5E5949; border: 1px solid #CFC8BA; }
.bt-running   { background: #F6ECDD; color: #33291B; border: 1px solid #F6ECDD; }
.bt-done      { background: #E3F3EC; color: #0F9D6B; border: 1px solid #E3F3EC; }
.bt-error     { background: #F6E4E2; color: #C33B34; border: 1px solid #F6E4E2; }

.bt-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 20px;
}
.bt-kpi {
    background: #FFFFFF; border: 1px solid #CFC8BA;
    border-radius: 10px; padding: 16px 18px;
}
.bt-kpi-val { font-size: 26px; font-weight: 700; color: #3A3A3A; }
.bt-kpi-lbl { font-size: 11px; color: #5E5949; margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }

.bt-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 16px; margin-bottom: 16px;
}
.bt-card {
    background: #FFFFFF; border: 1px solid #CFC8BA;
    border-radius: 10px; padding: 18px;
}
.bt-card h3 { font-size: 13px; color: #33291B; margin-bottom: 12px;
              text-transform: uppercase; letter-spacing: .5px; }
.bt-log-card { grid-column: span 2; }

.bt-table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bt-table-wrap th {
    color: #5E5949; text-align: left; padding: 6px 8px;
    border-bottom: 1px solid #CFC8BA; font-weight: 600; font-size: 11px;
    text-transform: uppercase;
}
.bt-table-wrap td { padding: 7px 8px; border-bottom: 1px solid #F6F5F1; color: #33291B; }
.bt-table-wrap tr:hover td { background: #F6F5F1; }
.bt-r-pos { color: #0F9D6B; font-weight: 600; }
.bt-r-neg { color: #C33B34; font-weight: 600; }

.bt-log {
    background: #F6F5F1; border-radius: 6px; padding: 14px;
    font-size: 11px; color: #5E5949; font-family: var(--mono);
    max-height: 200px; overflow-y: auto; white-space: pre-wrap;
    border: 1px solid #FFFFFF; margin: 0;
}

@media (max-width: 900px) {
    .bt-kpis { grid-template-columns: repeat(2,1fr); }
    .bt-grid  { grid-template-columns: 1fr; }
    .bt-log-card { grid-column: span 1; }
}

/* ══════════════════════════════════════════════════════════════════
   TRADINGVIEW CHART MODAL
══════════════════════════════════════════════════════════════════ */
.tv-modal-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,.75); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.tv-modal-overlay.hidden { display: none; }

.tv-modal {
    background: var(--surface); border: 1px solid #FFFFFF;
    border-radius: 14px; overflow: hidden;
    width: min(1200px, 96vw); box-shadow: 0 8px 48px #000a;
    display: flex; flex-direction: column;
}
.tv-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: #F6F5F1; border-bottom: 1px solid var(--border);
    gap: 12px;
}
.tv-modal-title {
    font-size: 15px; font-weight: 700; color: #33291B;
    letter-spacing: .3px;
}
.tv-modal-controls { display: flex; gap: 8px; align-items: center; }
.tv-interval-sel {
    background: #F6F5F1; border: 1px solid #FFFFFF; color: #3A3A3A;
    border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer;
}
.tv-modal-close {
    background: none; border: 1px solid #CFC8BA; color: #5E5949;
    border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 13px;
    transition: all .15s;
}
.tv-modal-close:hover { border-color: var(--down); color: var(--down); }

#tv-chart-container { width: 100%; height: 600px; }

/* Filas del watchlist clickeables */
.watchlist-table tbody tr {
    cursor: pointer; transition: background .12s;
}
.watchlist-table tbody tr:hover { background: #F6F5F1 !important; }
.tv-open-hint {
    font-size: 9px; color: var(--text3); margin-left: 5px;
    vertical-align: middle; font-family: var(--mono);
}
tbody tr:hover .tv-open-hint { color: #3A3A3A; }

/* Botón de chart en la fila */
.tv-row-btn {
    display: inline-block; margin-left: 6px; padding: 1px 5px;
    font-size: 9px; border: 1px solid var(--border); border-radius: 4px;
    color: var(--text3); vertical-align: middle; letter-spacing: .3px;
    transition: all .12s; font-weight: 600;
}
tbody tr:hover .tv-row-btn { border-color: #3A3A3A; color: #3A3A3A; }

/* ══ GOOGLE SHEETS SYNC ══════════════════════════════════════════════════════ */

/* Botón en la barra de historial */
.ops-sheets-btn {
    position: relative; border-color: #E3F3EC !important;
    color: #0F9D6B !important; font-weight: 700 !important;
}
.ops-sheets-btn.sheets-configured { border-color: #0F9D6B !important; }
.ops-sheets-btn.sheets-syncing { opacity: .7; pointer-events: none; }
.ops-sheets-status {
    font-size: 8px; color: #0F9D6B; margin-left: 4px;
    max-width: 80px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; vertical-align: middle;
}
.ops-btn-gear { font-size: 12px; padding: 4px 7px; }

/* Modal overlay */
.sheets-modal-overlay {
    position: fixed; inset: 0; z-index: 3100;
    background: rgba(0,0,0,.8); backdrop-filter: blur(4px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 30px 16px; overflow-y: auto;
}
.sheets-modal-overlay.hidden { display: none; }

.sheets-modal {
    background: #F6F5F1; border: 1px solid #E3F3EC;
    border-radius: 14px; width: min(740px, 100%);
    box-shadow: 0 8px 48px #00000088;
}
.sheets-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; background: #F6F5F1; border-bottom: 1px solid #E3F3EC;
    border-radius: 14px 14px 0 0;
}
.sheets-modal-title {
    font-size: 15px; font-weight: 800; color: #33291B; letter-spacing: .3px;
}
.sheets-modal-close {
    background: none; border: 1px solid #E3F3EC; color: #0F9D6B;
    border-radius: 6px; padding: 3px 9px; cursor: pointer; font-size: 13px;
    transition: all .15s;
}
.sheets-modal-close:hover { border-color: #C33B34; color: #C33B34; }

.sheets-modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* Status bar */
.sheets-status-bar {
    padding: 8px 12px; border-radius: 8px; font-size: 12px;
    display: flex; justify-content: space-between; align-items: center;
}
.sheets-status-bar.status-none { background: #F6ECDD; border: 1px solid #F6ECDD; color: #B5651D; }
.sheets-status-bar.status-ok   { background: #E3F3EC; border: 1px solid #E3F3EC; color: #0F9D6B; }
.sheets-last-sync { font-size: 10px; color: #0F9D6B; }

/* URL field */
.sheets-field { display: flex; flex-direction: column; gap: 5px; }
.sheets-label { font-size: 11px; font-weight: 700; color: #0F9D6B; text-transform: uppercase; letter-spacing: .4px; }
.sheets-url-row { display: flex; gap: 8px; }
.sheets-input {
    flex: 1; background: #F6F5F1; border: 1px solid #E3F3EC;
    color: #33291B; border-radius: 7px; padding: 8px 12px; font-size: 12px;
}
.sheets-input:focus { outline: none; border-color: #0F9D6B; }
.sheets-btn-save {
    background: #E3F3EC; border: 1px solid #E3F3EC; color: #0F9D6B;
    border-radius: 7px; padding: 8px 16px; cursor: pointer; font-size: 12px;
    font-weight: 700; white-space: nowrap; transition: all .15s;
}
.sheets-btn-save:hover { background: #E3F3EC; }
.sheets-hint { font-size: 10px; color: #E3F3EC; }

/* Opciones */
.sheets-options { display: flex; flex-direction: column; gap: 6px; }
.sheets-option-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: #33291B; cursor: pointer;
}
.sheets-option-row input { accent-color: #0F9D6B; cursor: pointer; }

/* Acciones */
.sheets-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sheets-btn-primary {
    background: #E3F3EC; border: 1px solid #0F9D6B; color: #0F9D6B;
    border-radius: 8px; padding: 10px 18px; cursor: pointer; font-size: 13px;
    font-weight: 700; transition: all .15s;
}
.sheets-btn-primary:hover { background: #E3F3EC; }
.sheets-btn-secondary {
    background: #F6F5F1; border: 1px solid #E3F3EC; color: #0F9D6B;
    border-radius: 8px; padding: 10px 16px; cursor: pointer; font-size: 12px;
    transition: all .15s;
}
.sheets-btn-secondary:hover { border-color: #0F9D6B; color: #0F9D6B; }

.sheets-action-result {
    padding: 8px 12px; border-radius: 6px; font-size: 12px;
}
.sheets-action-result.sheets-result-ok   { background:#E3F3EC; color:#0F9D6B; border:1px solid #E3F3EC; }
.sheets-action-result.sheets-result-warn { background:#F6ECDD; color:#B5651D; border:1px solid #F6ECDD; }
.sheets-action-result.sheets-result-error{ background:#F6E4E2; color:#C33B34; border:1px solid #F6E4E2; }
.sheets-action-result.sheets-result-info { background:#F6F5F1; color:#3A3A3A; border:1px solid #FFFFFF; }

.sheets-divider { border-top: 1px solid #E3F3EC; }

/* Instrucciones */
.sheets-instructions { display: flex; flex-direction: column; gap: 10px; }
.sheets-instructions-title {
    font-size: 12px; font-weight: 700; color: #0F9D6B;
    text-transform: uppercase; letter-spacing: .4px;
}
.sheets-steps {
    margin: 0; padding-left: 18px;
    font-size: 12px; color: #5E5949; line-height: 1.8;
}
.sheets-steps li { margin-bottom: 2px; }
.sheets-steps b { color: #33291B; }
.sheets-steps kbd {
    background: #F6F5F1; border: 1px solid #E3F3EC; border-radius: 3px;
    padding: 1px 5px; font-size: 10px; color: #3A3A3A;
}
.sheets-link { color: #0F9D6B; text-decoration: underline; }

/* Bloque de código */
.sheets-code-block {
    position: relative; background: #F6F5F1; border: 1px solid #E3F3EC;
    border-radius: 8px; overflow: hidden;
}
.sheets-copy-btn {
    position: absolute; top: 8px; right: 10px;
    background: #E3F3EC; border: 1px solid #E3F3EC; color: #0F9D6B;
    border-radius: 5px; padding: 4px 10px; cursor: pointer;
    font-size: 10px; font-weight: 700; transition: all .15s; z-index: 10;
}
.sheets-copy-btn:hover { background: #E3F3EC; }
.sheets-code {
    margin: 0; padding: 12px 14px; font-size: 10px; line-height: 1.55;
    color: #0F9D6B; overflow-x: auto; font-family: var(--mono);
    max-height: 220px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #E3F3EC #F6F5F1;
}

/* ══ FUNDAMENTALES MAG-7 ═════════════════════════════════════════════════════ */
.fund-loading {
    padding: 20px; text-align: center; color: #3A3A3A; font-size: 13px;
}
.fund-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    padding: 12px 0;
}
.fund-stock-card {
    background: #F6F5F1; border: 1px solid #FFFFFF;
    border-radius: 12px; padding: 14px; transition: border-color .2s;
}
.fund-stock-card:hover { border-color: #CFC8BA; }
.fund-skeleton { opacity: .5; }

.fund-card-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 8px;
}
.fund-card-name {
    font-size: 15px; font-weight: 800; color: #33291B; letter-spacing: .3px;
}
.fund-card-price {
    font-size: 14px; font-weight: 700; color: #33291B;
}
.fund-card-chg { font-size: 12px; margin-left: 5px; }

.fund-earn-badge {
    font-size: 11px; color: #B5651D; background: #F6ECDD;
    border: 1px solid #F6ECDD; border-radius: 5px;
    padding: 3px 8px; margin-bottom: 7px; display: inline-block;
}
.fund-tech-signal { font-size: 11px; margin-bottom: 7px; }
.fund-signal-up   { color: #0F9D6B; }
.fund-signal-down { color: #C33B34; }
.fund-signal-neutral { color: #33291B; }

/* Barra 52 semanas */
.fund-52w-bar-wrap { margin-bottom: 10px; }
.fund-52w-bar {
    height: 6px; background: var(--border); border-radius: 3px; overflow: hidden;
    margin-bottom: 3px;
}
.fund-52w-fill {
    height: 100%; background: linear-gradient(90deg, #3A3A3A, #3A3A3A);
    border-radius: 3px; transition: width .5s;
}
.fund-52w-labels {
    display: flex; justify-content: space-between;
    font-size: 10px; color: #3A3A3A;
}

/* Grid métricas */
.fund-metrics-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px 8px; margin-top: 6px;
}
.fund-metric {
    display: flex; flex-direction: column;
    padding: 4px 6px; border-radius: 5px; background: #F6F5F1;
}
.fund-metric-label {
    font-size: 9px; color: #3A3A3A; text-transform: uppercase;
    letter-spacing: .4px; margin-bottom: 1px;
}
.fund-metric b { font-size: 12px; color: #33291B; font-weight: 700; }

.fund-sector-tag {
    font-size: 10px; background: #F6F5F1; color: #3A3A3A;
    border: 1px solid #FFFFFF; border-radius: 3px;
    padding: 1px 5px; font-weight: 600; white-space: nowrap;
}
.fund-up   { color: #0F9D6B; }
.fund-down { color: #C33B34; }
.fund-na   { color: var(--text3); font-size: 11px; }

.fund-loading-dots { animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* (TV detail tabs removed — fundamentals moved to Economic Calendar) */

/* ════════════════════════════════════════════════════════════════
   COACH IA — Panel de análisis global del journal
════════════════════════════════════════════════════════════════ */
.coach-panel {
    margin: 16px 0 0 0;
    background: #F6F5F1;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.coach-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}
.coach-panel-header:hover { background: #F6F5F1; }
.coach-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #33291B;
    letter-spacing: .3px;
}
.coach-icon { font-size: 18px; }
.coach-badge {
    font-size: 9px;
    font-weight: 700;
    background: #FFFFFF;
    color: #3A3A3A;
    border: 1px solid #CFC8BA;
    border-radius: 4px;
    padding: 2px 7px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.coach-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.coach-last-run {
    font-size: 10px;
    color: #3A3A3A;
}
.coach-chevron {
    font-size: 11px;
    color: #3A3A3A;
    transition: transform .2s;
}

/* Body */
.coach-body { padding: 0 20px 20px; }
.coach-body.hidden { display: none; }

/* Stats row */
.coach-stats-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 0 16px;
    border-bottom: 1px solid #F6F5F1;
    margin-bottom: 16px;
}
.coach-stat {
    flex: 1;
    min-width: 80px;
    text-align: center;
    background: #F6F5F1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 8px 6px;
}
.coach-stat-val {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}
.coach-stat-lbl {
    font-size: 9px;
    color: #3A3A3A;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Placeholder / loading */
.coach-placeholder {
    color: #3A3A3A;
    font-size: 13px;
    text-align: center;
    padding: 24px 0 12px;
    line-height: 1.6;
}
.coach-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
    color: #3A3A3A;
    font-size: 13px;
}
.coach-loading-dots {
    display: flex;
    gap: 6px;
}
.coach-loading-dots span {
    width: 8px; height: 8px;
    background: #3A3A3A;
    border-radius: 50%;
    animation: coachDot 1.2s infinite;
}
.coach-loading-dots span:nth-child(2) { animation-delay: .2s; }
.coach-loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes coachDot { 0%,80%,100%{opacity:.2;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }

/* Sections */
.coach-section { margin-bottom: 16px; }
.coach-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #3A3A3A;
    margin-bottom: 8px;
}
.coach-section-title.coach-green { color: #0F9D6B; }
.coach-section-title.coach-red   { color: var(--down); }
.coach-section-title.coach-blue  { color: #3A3A3A; }

.coach-summary-text {
    font-size: 13px;
    color: #33291B;
    line-height: 1.65;
    background: #F6F5F1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}

/* Columnas fortalezas / alertas */
.coach-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 700px) { .coach-cols { grid-template-columns: 1fr; } }
.coach-col { }

.coach-bullet {
    font-size: 12px;
    color: #5E5949;
    line-height: 1.5;
    border-left: 2px solid #0F9D6B;
    padding: 5px 10px;
    margin-bottom: 6px;
    background: #F6F5F1;
    border-radius: 0 5px 5px 0;
}

/* Recomendaciones */
.coach-rec-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12px;
    color: #5E5949;
    padding: 7px 0;
    border-bottom: 1px solid #F6F5F1;
    line-height: 1.5;
}
.coach-rec-item:last-child { border-bottom: none; }
.coach-rec-num {
    min-width: 20px;
    height: 20px;
    background: #FFFFFF;
    color: #3A3A3A;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Enfoque de la semana */
.coach-focus-box {
    margin-top: 14px;
    background: linear-gradient(135deg, #F6F5F1 0%, #F6F5F1 100%);
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.coach-focus-label {
    font-size: 11px;
    font-weight: 700;
    color: #3A3A3A;
    white-space: nowrap;
}
.coach-focus-text {
    font-size: 12px;
    color: #33291B;
    line-height: 1.5;
}

/* Botón analizar */
.coach-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #F6F5F1;
}
.coach-analyze-btn {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
    border: 1px solid #3A3A3A;
    color: #3A3A3A;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 22px;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: .3px;
    transition: all .15s;
}
.coach-analyze-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #CFC8BA 0%, #FFFFFF 100%);
    border-color: #3A3A3A;
    color: #33291B;
    transform: translateY(-1px);
}
.coach-analyze-btn:disabled {
    opacity: .6;
    cursor: wait;
}
.coach-note {
    font-size: 10px;
    color: var(--text3);
}

/* ════════════════════════════════════════════════════════════════
   PATTERN SCANNER — Tab Oportunidades
════════════════════════════════════════════════════════════════ */

/* Tab badge */
.scanner-tab-btn { position: relative; }
.scanner-tab-badge {
    position: absolute; top: 4px; right: -4px;
    background: #0F9D6B; color: #000; font-size: 9px; font-weight: 800;
    border-radius: 10px; padding: 1px 5px; min-width: 16px; text-align: center;
}

/* Wrap */
.scanner-wrap {
    padding: 0 0 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.scanner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 14px;
    border-bottom: 1px solid #F6F5F1;
    flex-wrap: wrap;
    gap: 10px;
}
.scanner-header-left { display: flex; flex-direction: column; gap: 3px; }
.scanner-title {
    font-size: 16px; font-weight: 800; color: #33291B; letter-spacing: .3px;
}
.scanner-subtitle {
    font-size: 11px; color: #3A3A3A;
}
.scanner-header-right { display: flex; align-items: center; gap: 12px; }
.scanner-last-run { font-size: 11px; color: #3A3A3A; }
.scanner-run-btn {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
    border: 1px solid #3A3A3A;
    color: #3A3A3A;
    font-size: 12px; font-weight: 700;
    padding: 8px 18px; border-radius: 8px;
    cursor: pointer; letter-spacing: .3px;
    transition: all .15s;
}
.scanner-run-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #CFC8BA 0%, #FFFFFF 100%);
    border-color: #3A3A3A; color: #33291B;
}
.scanner-run-btn:disabled { opacity: .6; cursor: wait; }

/* Stats bar */
.scanner-stats {
    display: flex; gap: 8px; padding: 10px 24px;
    flex-wrap: wrap; border-bottom: 1px solid #F6F5F1;
}
.scanner-stat-chip {
    font-size: 11px; font-weight: 600;
    background: #F6F5F1; border: 1px solid var(--border);
    border-radius: 20px; padding: 4px 12px; color: #5E5949;
}
.scanner-stat-chip.sc-green { color: #0F9D6B; border-color: #E3F3EC; }
.scanner-stat-chip.sc-blue  { color: #3A3A3A; border-color: #FFFFFF; }
.scanner-stat-chip.sc-red   { color: #C33B34; border-color: #F6E4E2; }

/* Filters */
.scanner-filters {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 24px; flex-wrap: wrap;
    border-bottom: 1px solid #F6F5F1;
}
.sc-filter-btn {
    background: #F6F5F1; border: 1px solid var(--border);
    border-radius: 16px; color: #5E5949;
    font-size: 11px; font-weight: 600; padding: 4px 12px;
    cursor: pointer; transition: all .15s;
}
.sc-filter-btn:hover { border-color: #3A3A3A; color: #3A3A3A; }
.sc-filter-btn.active { border-color: #3A3A3A; color: #3A3A3A; background: #4fc3f710; }
.scanner-filter-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.scanner-filter-label { font-size: 10px; color: #3A3A3A; }
.sc-sort-btn {
    background: #F6F5F1; border: 1px solid var(--border);
    border-radius: 16px; color: #5E5949;
    font-size: 10px; font-weight: 600; padding: 3px 10px;
    cursor: pointer; transition: all .15s;
}
.sc-sort-btn:hover  { border-color: #B5651D; color: #B5651D; }
.sc-sort-btn.active { border-color: #B5651D; color: #B5651D; background: #fbbf2410; }

/* Grid */
.scanner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
    padding: 16px 24px;
}

/* Empty state */
.scanner-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 60px 20px; gap: 12px; text-align: center;
}
.scanner-empty-icon { font-size: 48px; }
.scanner-empty-title { font-size: 18px; font-weight: 700; color: #3A3A3A; }
.scanner-empty-sub { font-size: 13px; color: var(--text3); line-height: 1.6; }
.scanner-run-btn-big {
    margin-top: 8px;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
    border: 1px solid #3A3A3A; color: #3A3A3A;
    font-size: 14px; font-weight: 700;
    padding: 12px 28px; border-radius: 10px;
    cursor: pointer; letter-spacing: .3px; transition: all .15s;
}
.scanner-run-btn-big:hover {
    background: linear-gradient(135deg, #CFC8BA 0%, #FFFFFF 100%);
    transform: translateY(-2px);
}

/* Loading state */
.scanner-loading {
    grid-column: 1 / -1;
    display: flex; flex-direction: column;
    align-items: center; gap: 14px;
    padding: 60px 20px; color: #3A3A3A; font-size: 13px;
}
.scanner-loading-sub { font-size: 11px; color: var(--text3); }
.scanner-loading-dots { display: flex; gap: 7px; }
.scanner-loading-dots span {
    width: 10px; height: 10px; background: #3A3A3A;
    border-radius: 50%; animation: scDot 1.4s infinite;
}
.scanner-loading-dots span:nth-child(2) { animation-delay: .2s; }
.scanner-loading-dots span:nth-child(3) { animation-delay: .4s; }
.scanner-loading-dots span:nth-child(4) { animation-delay: .6s; }
@keyframes scDot { 0%,80%,100%{opacity:.2;transform:scale(.7)} 40%{opacity:1;transform:scale(1)} }

/* ── Card ─────────────────────────────────────────────────────── */
.sc-card {
    background: #F6F5F1;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .15s, box-shadow .15s;
}
.sc-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px #00000050; }

.sc-card-header {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 8px;
    padding: 12px 14px 8px;
    border-bottom: 1px solid #F6F5F1;
}
.sc-card-asset { display: flex; flex-direction: column; gap: 3px; }
.sc-card-name  { font-size: 14px; font-weight: 800; color: #33291B; }
.sc-card-tf    {
    display: inline-block; font-size: 9px; font-weight: 700;
    background: #F6F5F1; color: #3A3A3A;
    border: 1px solid #FFFFFF; border-radius: 4px;
    padding: 1px 6px; letter-spacing: .5px;
    margin-right: 4px;
}
.sc-card-pattern { font-size: 11px; color: #3A3A3A; }
.sc-card-dir {
    font-size: 12px; font-weight: 800;
    white-space: nowrap; letter-spacing: .3px;
}

/* Score bar */
.sc-score-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px 4px;
}
.sc-score-bar-wrap {
    flex: 1; height: 4px; background: #F6F5F1;
    border-radius: 2px; overflow: hidden;
}
.sc-score-bar-fill { height: 100%; border-radius: 2px; transition: width .4s; }
.sc-score-val { font-size: 11px; font-weight: 700; min-width: 36px; text-align: right; }

/* Approach bar */
.sc-approach-row {
    display: flex; align-items: center; gap: 8px;
    padding: 2px 14px 6px;
}
.sc-approach-label { font-size: 9px; color: #3A3A3A; white-space: nowrap; }
.sc-approach-bar-wrap {
    flex: 1; height: 3px; background: #F6F5F1;
    border-radius: 2px; overflow: hidden;
}
.sc-approach-bar-fill {
    height: 100%; background: linear-gradient(90deg, #3A3A3A, #0F9D6B);
    border-radius: 2px; transition: width .4s;
}
.sc-approach-pct { font-size: 10px; font-weight: 700; min-width: 30px; text-align: right; }

/* Price grid */
.sc-price-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #F6F5F1;
    border-top: 1px solid #F6F5F1;
    border-bottom: 1px solid #F6F5F1;
}
.sc-price-cell {
    background: #F6F5F1; padding: 7px 10px;
    display: flex; flex-direction: column; gap: 2px;
}
.sc-entry-cell { background: #F6F5F1; }
.sc-price-label { font-size: 8px; color: #3A3A3A; text-transform: uppercase; letter-spacing: .4px; }
.sc-price-val   { font-size: 11px; font-weight: 700; color: #33291B; }
.sc-entry-val   { color: #B5651D; font-size: 12px; }

/* Technical row */
.sc-tech-row {
    display: flex; gap: 0; padding: 6px 14px;
    border-bottom: 1px solid #F6F5F1;
}
.sc-tech-item {
    flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: center;
}
.sc-tech-label { font-size: 8px; color: #3A3A3A; text-transform: uppercase; letter-spacing: .4px; }
.sc-tech-val   { font-size: 12px; font-weight: 700; color: #33291B; }

/* Filter tags */
.sc-tags-row {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 8px 14px;
    border-bottom: 1px solid #F6F5F1;
}
.sc-filter-tag {
    font-size: 9px; font-weight: 600;
    border-radius: 3px; padding: 2px 6px;
}
.sc-tag-ok   { background: #E3F3EC; color: #0F9D6B; border: 1px solid #E3F3EC; }
.sc-tag-warn { background: #F6ECDD; color: #B5651D; border: 1px solid #F6ECDD; }

/* Actions */
.sc-card-actions {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; flex-wrap: wrap;
}
.sc-tv-btn {
    background: #F6F5F1; color: #3A3A3A;
    border: 1px solid #FFFFFF; border-radius: 6px;
    font-size: 11px; font-weight: 700;
    padding: 6px 12px; text-decoration: none;
    transition: all .15s;
}
.sc-tv-btn:hover { background: #FFFFFF; color: #3A3A3A; }
.sc-trade-btn {
    background: #E3F3EC; color: #0F9D6B;
    border: 1px solid #E3F3EC; border-radius: 6px;
    font-size: 11px; font-weight: 700;
    padding: 6px 12px; cursor: pointer;
    transition: all .15s;
}
.sc-trade-btn:hover { background: #E3F3EC; color: #0F9D6B; }
.sc-detected-at {
    font-size: 9px; color: var(--text3);
    margin-left: auto;
}




/* =====================================================================
   SISTEMA — Secciones de control (Telegram, Scanner, Backtesting)
===================================================================== */

.sys-section {
    margin: 16px 24px 0;
    background: #F6F5F1;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.sys-section:last-child { margin-bottom: 24px; }

.sys-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid #F6F5F1;
    flex-wrap: wrap;
}
.sys-section-icon { font-size: 22px; flex-shrink: 0; }
.sys-section-title {
    font-size: 14px; font-weight: 800; color: #33291B; letter-spacing: .3px;
}
.sys-section-sub { font-size: 11px; color: #3A3A3A; margin-top: 2px; }
.sys-section-header > div:first-of-type { flex: 1; }

.sys-section-body { padding: 16px 20px; }

/* Telegram status */
.sys-tg-status {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto;
}
.sys-tg-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #3A3A3A; flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}
#sys-tg-label { font-size: 11px; color: #3A3A3A; }

/* Action buttons */
.sys-tg-actions {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.sys-btn {
    background: var(--surface2); border: 1px solid var(--border);
    color: #5E5949; font-size: 12px; font-weight: 600;
    padding: 7px 16px; border-radius: 7px;
    cursor: pointer; transition: all .15s;
}
.sys-btn:hover { border-color: #3A3A3A; color: #3A3A3A; background: #4fc3f710; }
.sys-btn:disabled { opacity: .5; cursor: wait; }
.sys-btn-primary {
    background: linear-gradient(135deg, #FFFFFF, #FFFFFF);
    border-color: #3A3A3A; color: #3A3A3A;
}
.sys-btn-primary:hover { background: linear-gradient(135deg,#CFC8BA,#FFFFFF); color:#33291B; }

/* Settings grid */
.sys-tg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.sys-tg-card {
    background: #F6F5F1; border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 14px;
}
.sys-tg-card-title {
    font-size: 11px; font-weight: 700; color: #3A3A3A;
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 10px;
}

/* Toggle rows */
.sys-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 5px 0; cursor: pointer;
    font-size: 12px; color: #5E5949;
    border-bottom: 1px solid #F6F5F1;
}
.sys-toggle-row:last-of-type { border-bottom: none; }
.sys-toggle-row input[type=checkbox] { display: none; }
.sys-toggle-slider {
    width: 34px; height: 18px; flex-shrink: 0;
    background: var(--border); border-radius: 9px;
    position: relative; transition: background .2s;
}
.sys-toggle-slider::after {
    content: ; position: absolute;
    width: 12px; height: 12px; border-radius: 50%;
    background: #3A3A3A; top: 3px; left: 3px;
    transition: transform .2s, background .2s;
}
.sys-toggle-row input:checked + .sys-toggle-slider { background: #E3F3EC; }
.sys-toggle-row input:checked + .sys-toggle-slider::after {
    background: #0F9D6B; transform: translateX(16px);
}

/* Tags */
.sys-tag {
    font-size: 8px; font-weight: 800; border-radius: 3px;
    padding: 1px 5px; text-transform: uppercase; letter-spacing: .4px;
    vertical-align: middle; margin-left: 4px;
}
.sys-tag-red    { background: #F6E4E2; color: #C33B34; border: 1px solid #F6E4E2; }
.sys-tag-orange { background: #F6ECDD; color: #B5651D; border: 1px solid #F6ECDD; }

/* Score slider */
.sys-score-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0 2px; font-size: 11px; color: #5E5949;
}
.sys-score-label { white-space: nowrap; flex-shrink: 0; }
.sys-score-row input[type=range] { flex: 1; accent-color: #0F9D6B; height: 3px; }
.sys-score-val { font-size: 11px; font-weight: 700; color: #0F9D6B; white-space: nowrap; }

/* Log de mensajes */
.sys-tg-log {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 130px; overflow-y: auto;
}
.sys-log-row {
    display: flex; gap: 6px; align-items: baseline;
    font-size: 10px; padding: 3px 0;
    border-bottom: 1px solid #F6F5F1;
}
.sys-log-time    { color: #3A3A3A; flex-shrink: 0; font-family: var(--mono); }
.sys-log-type    {
    font-size: 8px; background: #F6F5F1; color: #3A3A3A;
    border: 1px solid #FFFFFF; border-radius: 3px; padding: 1px 4px;
    flex-shrink: 0;
}
.sys-log-preview { color: #3A3A3A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Scanner info */
.sys-scanner-info {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
}
.sys-info-stat {
    flex: 1; min-width: 80px; text-align: center;
    background: #F6F5F1; border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 8px 6px;
}
.sys-info-val {
    font-size: 20px; font-weight: 800; color: #33291B; line-height: 1;
}
.sys-info-lbl {
    font-size: 9px; color: #3A3A3A; text-transform: uppercase;
    letter-spacing: .5px; margin-top: 4px;
}
.sys-scanner-badge {
    margin-left: auto; font-size: 11px; font-weight: 700;
    background: #F6F5F1; color: #3A3A3A;
    border: 1px solid var(--border); border-radius: 20px;
    padding: 4px 14px;
}

/* ── Sistema: Opportunity tiers ─────────────────────────────────────────── */
.sys-opp-tier {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.sys-tier-header {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.sys-tier-activa-hdr  { background: #E3F3EC; color: #0F9D6B; border-bottom: 1px solid #E3F3EC; }
.sys-tier-alerta-hdr  { background: #F6ECDD; color: #B5651D; border-bottom: 1px solid #F6ECDD; }
.sys-tier-formacion-hdr { background: #F6F5F1; color: #3A3A3A; border-bottom: 1px solid #FFFFFF; }

.sys-opp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    padding: 12px;
    background: #F6F5F1;
}
.sys-opp-empty {
    grid-column: 1 / -1;
    color: #3A3A3A;
    font-size: 12px;
    text-align: center;
    padding: 14px 0;
}

.sys-opp-card {
    background: #F6F5F1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .2s;
}
.sys-opp-card:hover { border-color: #CFC8BA; }

.sys-opp-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.sys-opp-name { font-size: 13px; color: #33291B; }
.sys-opp-tf {
    font-size: 10px;
    background: var(--border);
    color: #33291B;
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 5px;
    vertical-align: middle;
}
.sys-opp-score { font-size: 18px; font-weight: 800; line-height: 1; }
.sys-opp-pattern { font-size: 11px; color: #5E5949; }

.sys-opp-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    font-family: var(--mono);
}
.sys-opp-dist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: #33291B;
}

.sys-opp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.sys-opp-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}
.sys-opp-ok   { background: #E3F3EC; color: #0F9D6B; }
.sys-opp-fail { background: #F6E4E2; color: #C33B34; }

.sys-opp-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.sys-opp-btn {
    flex: 1;
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: #F6F5F1;
    color: #33291B;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: background .15s, color .15s;
}
.sys-opp-btn:hover { background: var(--border); color: #33291B; }
.sys-opp-btn-tv { border-color: #FFFFFF; color: #3A3A3A; }
.sys-opp-btn-tv:hover { background: #F6F5F1; color: #6B6B6B; }
.sys-opp-btn-chart { border-color: #E3F3EC; color: #0F9D6B; }
.sys-opp-btn-chart:hover { background: #E3F3EC; color: #0F9D6B; }

.sys-opp-time { font-size: 10px; color: var(--text3); text-align: right; }

/* ═══ UNIFIED CALENDAR ═══════════════════════════════════════════ */
.unified-cal-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 12px;
    background: var(--surface);
    border-bottom: 1px solid #FFFFFF;
}
.unified-cal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 700;
    color: #33291B;
}
.cal-timestamp { font-size: 11px; color: #5E5949; font-weight: 400; }

.unified-cal-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ucal-filter {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid #CFC8BA;
    background: transparent;
    color: #33291B;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.ucal-filter:hover { border-color: #5E5949; color: #33291B; }
.ucal-filter.active { background: #FFFFFF; border-color: #3A3A3A; color: #6B6B6B; }
.ucal-filter.critical.active { background: #F6E4E2; border-color: #C33B34; color: #C33B34; }
.ucal-filter.earnings.active { background: #F6F5F1; border-color: #3A3A3A; color: #6B6B6B; }
.ucal-filter.ipo.active { background: #F6F5F1; border-color: #3A3A3A; color: #33291B; }

.unified-cal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cal-low-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #5E5949;
    cursor: pointer;
}
.cal-low-toggle input { accent-color: #3A3A3A; }

.ucal-week-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #FFFFFF;
    background: #F6F5F1;
}
.ucal-week-tab {
    padding: 10px 24px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #5E5949;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.ucal-week-tab:hover { color: #33291B; }
.ucal-week-tab.active { color: #6B6B6B; border-bottom-color: #3A3A3A; }

/* Day header */
.ucal-day-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #5E5949;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #F6F5F1;
}
.ucal-day-line {
    flex: 1;
    height: 1px;
    background: #FFFFFF;
}

/* Event rows */
.ucal-event-row {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: filter 0.1s;
}
.ucal-event-row:hover { filter: brightness(1.08); }

/* Impact colors — full row backgrounds */
.ucal-critical { background: rgba(220, 38, 38, 0.18); }
.ucal-high     { background: rgba(220, 38, 38, 0.10); }
.ucal-medium   { background: rgba(202, 138, 4, 0.09); }
.ucal-earnings { background: rgba(37, 99, 235, 0.10); }
.ucal-ipo { background: rgba(168, 85, 247, 0.12); }
.ucal-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 18px; margin: 4px 0 12px; padding: 10px 12px; background: rgba(168,85,247,0.06); border: 1px solid rgba(168,85,247,0.18); border-radius: 8px; }
.ucal-meta-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12.5px; }
/* Cuándo sale el documento oficial y cuál es. Mismo formato de filas que la
   ficha de IPO, en ámbar para separarlo de los datos de la oferta. */
.ucal-pub { display: grid; gap: 2px; margin: 2px 0 12px; padding: 10px 12px; background: rgba(181,101,29,0.07); border: 1px solid rgba(181,101,29,0.20); border-radius: 8px; }
.ucal-pub-et { color: #6B6257; font-weight: 500; }
/* La frase del comunicado de la que salió la cifra: se lee, no se destaca. */
.ucal-cita { font-weight: 400; font-style: italic; color: #6B6257; font-size: 11.5px; }
/* Hueco que YA debería estar lleno: se ve distinto de un guion mudo. */
.ucal-val.hueco { color: #B02E1D; font-weight: 700; }
.ucal-val.hueco-leve { color: #6B6257; font-weight: 600; }
/* Dato bajo licencia: enlace a la fuente, no un hueco. */
.ucal-val.licenciado { color: #1F6FB2; font-weight: 600; font-size: 11px; text-decoration: none; }
.ucal-val.licenciado:hover { text-decoration: underline; }
.ucal-hueco-nota { font-size: 9.5px; text-decoration: underline dotted; }
.ucal-meta-k { color: #33291B; white-space: nowrap; }
.ucal-meta-v { color: #33291B; font-weight: 600; text-align: right; }
.ucal-low      { background: rgba(30, 41, 59, 0.40); }

.ucal-row-main {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    gap: 16px;
    cursor: pointer;
    user-select: none;
}

.ucal-left-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 156px;
}
.ucal-flag-emoji { font-size: 20px; display:flex; align-items:center; }
.ucal-time-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ucal-time { font-size: 13px; font-weight: 600; color: #33291B; }
/* Hora ESTIMADA (earnings e IPOs: la empresa no confirma minuto). Va con "~"
   delante y en un tono más bajo, para que a un golpe de vista no se lea igual
   que la hora publicada por una agencia. */
.ucal-time-aprox { color: #6B6257; font-weight: 600; }
.ucal-time-note {
    font-size: 10.5px;
    color: #6B6257;
    line-height: 1.2;
    max-width: 124px;
}
.ucal-countdown {
    font-size: 11px;
    color: #B5651D;
    font-weight: 700;
    animation: pulse-countdown 1s infinite;
}
@keyframes pulse-countdown { 0%,100% { opacity:1; } 50% { opacity:0.6; } }

.ucal-event-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ucal-event-name {
    font-size: 14px;
    font-weight: 600;
    color: #33291B;
}

/* Type badges */
.ucal-type-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.critical-badge { background: rgba(220,38,38,0.3); color: #C33B34; }
.high-badge     { background: rgba(220,38,38,0.2); color: #C33B34; }
.medium-badge   { background: rgba(202,138,4,0.2); color: #33291B; }
.earnings-badge { background: rgba(37,99,235,0.25); color: #6B6B6B; }
.ipo-badge      { background: rgba(168,85,247,0.25); color: #33291B; }
.ipo-badge.ipo-important { background: rgba(168,85,247,0.45); color: #33291B; font-weight: 700; box-shadow: 0 0 0 1px rgba(168,85,247,0.6); }
.low-badge      { background: rgba(71,85,105,0.3); color: #5E5949; }

/* Data columns */
.ucal-data-cols {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 240px;
}
.ucal-data-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
}
.ucal-data-label {
    font-size: 10px;
    color: #5E5949;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.ucal-val {
    font-size: 13px;
    font-weight: 600;
    color: #33291B;
    font-family: var(--mono);
}
.ucal-val.actual  { color: #33291B; }
.ucal-val.beat    { color: var(--up); font-weight: 700; }
.ucal-val.miss    { color: var(--down); font-weight: 700; }
.ucal-val.inline  { color: var(--yellow); font-weight: 600; }
.ucal-val.pending { color: #5E5949; }
.ucal-rev-val {
    font-size: 9px; color: var(--text2);
    font-family: var(--mono);
    margin-top: 2px; display: block;
}
.ucal-rev-val.beat { color: var(--up); }
.ucal-rev-val.miss { color: var(--down); }
.ucal-earnings-cols { min-width: 280px; }

.ucal-chevron {
    font-size: 18px;
    color: var(--text3);
    transition: transform 0.2s;
    min-width: 20px;
    text-align: center;
}

/* Expandable detail */
.ucal-detail {
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.ucal-detail.hidden { display: none; }
.ucal-detail-inner {
    padding: 12px 20px 12px 64px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ucal-desc   { font-size: 12px; color: #33291B; margin: 0; }
.ucal-causa  { font-size: 12px; color: #5E5949; font-style: italic; margin: 0; }
.ucal-afecta { font-size: 12px; color: #3A3A3A; margin: 0; }
.ucal-link   { font-size: 11px; color: #3A3A3A; text-decoration: none; }
.ucal-link:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
    .ucal-data-cols { min-width: 0; gap: 8px; }
    .ucal-data-cell { min-width: 45px; }
    .ucal-left-meta { min-width: 100px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MÓVIL — layout responsive (acceso por teléfono vía Tailscale)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    body { font-size: 12px; }

    /* Cabecera y panel de mercado: menos padding */
    .header         { padding: 9px 12px; flex-wrap: wrap; row-gap: 4px; }
    .market-summary { padding: 10px 12px; }

    /* Barra de pestañas: scroll horizontal para alcanzarlas todas */
    .tabs-bar {
        padding: 0 8px; gap: 2px;
        overflow-x: auto; flex-wrap: nowrap; white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .tabs-bar::-webkit-scrollbar { height: 0; }

    /* Contenido de cada pestaña */
    .tab-content { padding: 10px 8px; }

    /* Tablas del watchlist: NO cortar — permitir deslizar en horizontal */
    .category-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .watchlist-table { min-width: 540px; font-size: 11.5px; }
    .watchlist-table th, .watchlist-table td { padding: 5px 7px; }

    /* Heatmap de sectores S&P: de 6 a 3 columnas */
    .sector-hm-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .sector-hm-sym  { font-size: 11px; }
    .sector-hm-name { font-size: 8px; }

    /* Grids anchos → 1-2 columnas para que quepan */
    .ms-grid, .ms-top { grid-template-columns: 1fr !important; }
    .pm-synth-grid    { grid-template-columns: repeat(2, 1fr) !important; }
    .ucal-meta-grid   { grid-template-columns: 1fr !important; }

    /* Evitar que cualquier elemento se desborde del ancho de la pantalla */
    img, table, pre, .market-summary, .tab-content, .category-block { max-width: 100%; }

    /* Modal de TradingView a pantalla casi completa */
    #tv-chart-container { height: 60vh; }

    /* Test Elder (Pre-Mercado): apilar pregunta + opciones para que no se salgan */
    .pm-elder-row  { flex-direction: column; align-items: stretch; gap: 6px; }
    .pm-elder-q    { padding-right: 0; }
    .pm-elder-opts { flex-wrap: wrap; }
    .pm-elder-opt  { padding: 5px 10px; font-size: 11px; }

    /* Tarjetas de Pre-Mercado y sus grids internos */
    .pm-card        { padding: 12px 10px; }
    .pm-synth-grid  { grid-template-columns: repeat(2, 1fr) !important; }

    /* Sesiones mundiales: que las cards envuelvan sin desbordar */
    .sessions-inline    { flex-wrap: wrap; }
    .ms-sessions-panel  { min-width: 0; }

    /* BLOQUE 1 Pre-Mercado: la tabla tiene 5 columnas fijas (~487px) que se salen.
       En móvil mostramos solo Activo/Precio/Cambio y ocultamos Movimiento + S/R. */
    .pm-table-head, .pm-asset-row {
        grid-template-columns: 1.3fr 1fr 1fr !important; gap: 6px !important;
    }
    .pm-table-head > div:nth-child(n+4),
    .pm-asset-row  > :nth-child(n+4) { display: none !important; }

    /* Sesiones mundiales: chips más anchos (≈3 por fila) y el horario de CIERRE
       que sí quepa (antes el texto iba en una sola línea y se cortaba). */
    .sess-chip      { flex: 1 1 28%; min-width: 92px; }
    .sess-chip-sub  { white-space: normal; text-align: center; line-height: 1.3; }

    /* Salvaguarda general: ningún grid/tabla/contenedor se sale del ancho */
    [class*="-grid"], [class*="-cols"], table, pre { max-width: 100%; }
    .pm-elder-q, .ms-panel-label, .pm-card-title { overflow-wrap: anywhere; }
}

/* ════════════════════════════════════════════════════════════════════════
   PANEL SISTEMA (drawer lateral) + botón engranaje del header
   ════════════════════════════════════════════════════════════════════════ */
.gear-btn {
    margin-left: 14px;
    background: transparent;
    border: 1px solid transparent;
    color: #5E5949;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 7px;
    transition: color .15s, background .15s, border-color .15s, transform .2s;
}
.gear-btn:hover { color: #3A3A3A; background: #F6F5F1; border-color: #CFC8BA; transform: rotate(35deg); }

.sistema-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 9, 16, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease;
    z-index: 1400;
}
.sistema-backdrop.open { opacity: 1; visibility: visible; }

.sistema-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 560px;
    max-width: 94vw;
    background: #F6F5F1;
    border-left: 1px solid #FFFFFF;
    box-shadow: -18px 0 50px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.22,.61,.36,1);
    z-index: 1401;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sistema-drawer.open { transform: translateX(0); }

.sistema-drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #F6F5F1;
    border-bottom: 1px solid #FFFFFF;
}
.sistema-drawer-title { color: #33291B; font-size: 15px; font-weight: 600; }
.sistema-drawer-close {
    background: transparent; border: none; color: #5E5949;
    font-size: 18px; cursor: pointer; padding: 2px 8px; border-radius: 6px; line-height: 1;
}
.sistema-drawer-close:hover { color: #C33B34; background: #F6E4E2; }

/* ════════════════════════════════════════════════════════════════════════
   DETALLE DE SECTOR S&P 500 (modal al hacer clic en una celda)
   ════════════════════════════════════════════════════════════════════════ */
.sector-hm-cell { cursor: pointer; transition: outline .12s, transform .12s; }
.sector-hm-cell:hover { outline: 1.5px solid rgba(79,158,255,.6); outline-offset: -1px; transform: translateY(-1px); }

.sector-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(4, 9, 16, 0.62);
    display: flex; align-items: center; justify-content: center;
    z-index: 1500; padding: 18px;
}
.sector-modal {
    background: #F6F5F1;
    border: 1px solid #FFFFFF;
    border-radius: 12px;
    width: 600px; max-width: 96vw; max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.sm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #FFFFFF;
    position: sticky; top: 0; background: #F6F5F1; z-index: 2;
}
.sm-title { font-size: 16px; font-weight: 600; color: #33291B; }
.sm-title small { color: #5E5949; font-weight: 400; font-size: 12px; margin-left: 6px; }
.sm-price { font-size: 15px; color: #33291B; }
.sm-close { background: transparent; border: none; color: #5E5949; font-size: 18px; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.sm-close:hover { color: #C33B34; }
.sm-body { padding: 16px 18px; }
.sm-chart { height: 280px; border-radius: 8px; overflow: hidden; background: #F6F5F1; border: 1px solid #F6F5F1; margin-bottom: 14px; }
.sm-section-lbl { font-size: 11px; color: #5E5949; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 7px; }
.sm-perf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 16px; }
.sm-perf { text-align: center; background: #F6F5F1; border-radius: 7px; padding: 7px 2px; }
.sm-perf-k { font-size: 10px; color: #5E5949; }
.sm-perf-v { font-size: 13px; font-weight: 600; margin-top: 2px; }
.sm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sm-hold-row { display: flex; justify-content: space-between; font-size: 12px; color: #33291B; padding: 3px 0; }
.sm-hold-row span:last-child { color: #5E5949; }
.sm-rs-bar { position: relative; height: 8px; border-radius: 4px; background: #F6F5F1; overflow: hidden; margin: 4px 0 6px; }
.sm-rs-bar::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #CFC8BA; }
.sm-signal-pill { display: inline-block; font-size: 11px; padding: 4px 10px; border-radius: 6px; margin-top: 6px; }
@media (max-width: 768px) {
    .sm-cols { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARKET INTELLIGENCE (auditoría 2026-08)
   §9 breaking · §11 watchlist · §12 activos afectados · §35 búsqueda ·
   §39/§40 modos trader/research.
   Se reutilizan las variables y el lenguaje visual existentes a propósito: el
   requisito era CONSERVAR el diseño de noticias y calendario, no rediseñarlo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* §9 — BREAKING NEWS */
.breaking-card {
    background: var(--surface2);
    border: 1px solid var(--down);
    border-left: 4px solid var(--down);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.breaking-header {
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--down);
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.breaking-sub {
    font-weight: 400;
    font-size: .72rem;
    letter-spacing: 0;
    opacity: .65;
    color: var(--text);
}
.breaking-item {
    padding: 7px 0;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.breaking-item:first-of-type { border-top: none; }
.breaking-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: .7rem;
}
.breaking-tag {
    background: var(--down);
    color: #fff;
    border-radius: 3px;
    padding: 1px 6px;
    font-weight: 700;
    font-size: .65rem;
    letter-spacing: .03em;
}
.breaking-title {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.35;
}
.breaking-title:hover { text-decoration: underline; }
.breaking-score       { font-weight: 700; }
.breaking-afecta {
    font-size: .72rem;
    opacity: .75;
    color: var(--text);
}

/* §11 — la noticia toca un activo de TU watchlist */
.news-wl-badge {
    background: var(--yellow)22;
    color: var(--yellow);
    border: 1px solid var(--yellow)55;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: .65rem;
    font-weight: 600;
    white-space: nowrap;
}

/* §12 — qué activos/sectores toca la noticia (hecho, no predicción) */
.news-afecta {
    font-size: .72rem;
    opacity: .72;
    color: var(--text);
    padding-top: 2px;
}

/* §35 — búsqueda */
.news-search {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    padding: 4px 9px;
    font-size: .75rem;
    min-width: 200px;
    flex: 1 1 200px;
    max-width: 340px;
}
.news-search:focus {
    outline: none;
    border-color: #3A3A3A;
}
.news-count {
    font-size: .7rem;
    opacity: .6;
    color: var(--text);
    margin-left: auto;
    align-self: center;
    white-space: nowrap;
}

/* §16 — evento macro a menos de 5 minutos */
.ucal-imminent {
    color: var(--down);
    font-weight: 700;
    animation: pulse-critico 1.6s infinite;
}

@media (max-width: 640px) {
    .news-search { max-width: none; }
    .news-count  { margin-left: 0; width: 100%; }
}

/* §33 — panel de calidad de datos */
.dq-body        { display: flex; flex-direction: column; gap: 3px; }
.dq-group-title {
    font-size: .68rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; opacity: .55; margin: 8px 0 2px;
}
.dq-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px; font-size: .74rem; padding: 2px 0;
    border-bottom: 1px solid var(--border);
}
.dq-label { opacity: .75; }
.dq-val   { font-variant-numeric: tabular-nums; text-align: right; }
.dq-n     { opacity: .45; font-size: .68rem; }
.dq-ok    { color: var(--up); }
.dq-bad   { color: var(--down); font-weight: 600; }

/* Procedencia del dato (auditoria 2026-08). Deliberadamente discreto: informa
   sin competir con la cifra, que es lo que el ojo debe leer primero. */
.ucal-conf      { font-size: .7rem; margin-left: 4px; cursor: help; }
.ucal-conf.ok   { color: var(--up); }
.ucal-conf.una  { color: var(--text); opacity: .35; }


/* ── ESCUELA (Fase 1.6) ──────────────────────────────────────────────────── */
/* Fila de clase. NO reutiliza .ops-stat: aquella fuerza flex-direction:column
   (numero arriba, etiqueta abajo) porque es para tarjetas de metricas, y aqui
   hace falta una fila horizontal. */
.esc-fila {
    display: flex; flex-direction: row; align-items: center; gap: 12px;
    text-align: left; padding: 11px 13px; margin-bottom: 7px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
.esc-fila.clicable { cursor: pointer; }
.esc-fila.clicable:hover { border-color: #7ecb20; }
.esc-fila.pendiente { opacity: .5; }
.esc-fila-icono { font-size: 17px; flex-shrink: 0; }
.esc-fila-cuerpo { flex: 1; min-width: 0; }
.esc-fila-titulo { font-weight: 600; font-size: 13px; color: #33291B; }
.esc-fila-desc  { font-size: 11px; color: #8A8478; margin-top: 2px; }
.esc-fila-meta  { font-size: 11px; color: #5E5949; white-space: nowrap; flex-shrink: 0; }
.esc-fila-barra { height: 3px; background: var(--border); border-radius: 2px; margin-top: 5px; }
.esc-fila-barra > div { height: 100%; background: #7ecb20; border-radius: 2px; }


/* ═══════════════════════════════════════════════════════════════════════════
   ACENTO VERDE (2026-08-24)
   El verde de la pagina publica (#7ecb20) le gusto a Axel y pidio traerlo al
   dashboard "asi poquito". Se aplica SOLO donde marca ORIENTACION: la pestaña
   activa, el foco de un campo y las barras de progreso.

   Deliberadamente NO se toca el verde de las cifras (--up, #0F9D6B): ese verde
   significa "el precio sube" y es informacion, no decoracion. Si se usara el
   mismo tono para "pestaña activa" y para "este activo gana", el ojo dejaria de
   distinguirlos — y en una pantalla de mercado el color ES el dato.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --acento-marca: #7ecb20; }

/* Pestaña activa: subrayado verde en vez del gris de antes */
.tab-btn.active {
    border-bottom-color: var(--acento-marca) !important;
    color: var(--texto, #33291B);
}
.tab-btn:hover { border-bottom-color: rgba(126, 203, 32, .45); }

/* Foco de formularios: dice donde estas escribiendo */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--acento-marca) !important;
}

/* Barras de progreso de la escuela y de las sesiones de mercado */
.esc-fila-barra > div,
#esc-progreso-barra { background: var(--acento-marca) !important; }
.esc-fila.clicable:hover { border-color: var(--acento-marca); }

/* El punto de "en vivo" del encabezado */
.status-dot.live, .status-dot.ok { background: var(--acento-marca) !important; }

/* ── AVISO DE NO-ASESORIA ─────────────────────────────────────────────────────
   Va PEGADO al contenido que podria leerse como un consejo, no escondido en el
   pie de pagina. Un aviso que hay que buscar no protege: lo que cuenta es que
   estuviera A LA VISTA junto a lo que el usuario estaba leyendo.

   Discreto a proposito. Si grita, el cliente lo tapa mentalmente al tercer dia y
   deja de existir igual que si no estuviera. */
.aviso-no-asesoria {
    font-size: 11px;
    line-height: 1.5;
    color: #7d8ea6;
    border-top: 1px solid rgba(125, 142, 166, .22);
    padding: 8px 2px 2px;
    margin-top: 10px;
}
.aviso-no-asesoria b { color: #9fb0c7; font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════════════
   WATCHLIST EN DOS VISTAS — lista y mapa de calor
   ═══════════════════════════════════════════════════════════════════════════ */

.wl-barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 0 12px; flex-wrap: wrap;
}
.wl-vistas { display: inline-flex; border: 1px solid #2c3340; border-radius: 8px; overflow: hidden; }
.wl-vbtn {
    background: #171b23; color: #8b94a6; border: 0; padding: 7px 15px;
    font-size: 13px; cursor: pointer; transition: background .15s, color .15s;
}
.wl-vbtn + .wl-vbtn { border-left: 1px solid #2c3340; }
.wl-vbtn:hover { background: #1e242e; color: #c8d0de; }
.wl-vbtn.activo { background: #2a3444; color: #e8edf5; font-weight: 600; }
.wl-personalizar {
    background: #171b23; color: #8b94a6; border: 1px solid #2c3340;
    border-radius: 8px; padding: 7px 15px; font-size: 13px; cursor: pointer;
}
.wl-personalizar:hover { background: #1e242e; color: #c8d0de; }

/* ── Mapa de calor ── */
.hm-titulo {
    font-size: 12px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: #96a0b4; margin-bottom: 7px;
}
.hm-nota { font-weight: 400; text-transform: none; letter-spacing: 0; color: #5f6879; font-size: 11px; }
.hm-celda {
    position: absolute; border-radius: 3px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; text-align: center; padding: 2px; box-sizing: border-box;
    font-variant-numeric: tabular-nums; cursor: default;
    transition: filter .12s;
}
.hm-celda:hover { filter: brightness(1.18); }
.hm-sym { font-weight: 700; font-size: 13px; line-height: 1.15; }
.hm-pct { font-size: 12px; opacity: .95; line-height: 1.2; }
.hm-sub { font-size: 10px; opacity: .72; line-height: 1.2; margin-top: 1px;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hm-pie { font-size: 11px; color: #6b7488; margin-top: 4px; font-style: italic; }

/* ── Panel de personalizar ── */
.wl-panel {
    position: fixed; inset: 0; background: rgba(6, 9, 14, .72);
    display: flex; align-items: center; justify-content: center; z-index: 9000;
}
.wl-panel.oculto { display: none; }
.wl-panel-caja {
    background: #141821; border: 1px solid #2c3340; border-radius: 10px;
    width: min(430px, 92vw); max-height: 80vh; overflow: auto; padding: 18px;
}
.wl-panel-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.wl-panel-cab strong { font-size: 15px; color: #e8edf5; }
.wl-cerrar { background: none; border: 0; color: #7d8698; font-size: 24px; cursor: pointer; line-height: 1; }
.wl-cerrar:hover { color: #e8edf5; }
.wl-panel-agregar { display: flex; gap: 8px; margin-bottom: 10px; }
.wl-panel-agregar input {
    flex: 1; background: #0f131a; border: 1px solid #2c3340; border-radius: 6px;
    color: #e8edf5; padding: 8px 11px; font-size: 13px;
}
.wl-panel-agregar button {
    background: #2a3444; border: 1px solid #38445a; border-radius: 6px;
    color: #e8edf5; padding: 8px 15px; font-size: 13px; cursor: pointer;
}
.wl-panel-agregar button:disabled { opacity: .5; cursor: default; }
.wl-panel-aviso { font-size: 12px; min-height: 16px; margin-bottom: 8px; }
.wl-panel-aviso.malo { color: #e8737d; }
.wl-panel-aviso.bien { color: #7fb98a; }
.wl-seccion {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: #7d8698; margin: 14px 0 6px; font-weight: 700;
}
.wl-cuenta { font-weight: 400; text-transform: none; letter-spacing: 0; color: #5f6879; }
.wl-fila {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 10px; background: #0f131a; border-radius: 6px; margin-bottom: 5px;
    font-size: 13px; color: #d3daE5;
}
.wl-fila button {
    background: none; border: 1px solid #2c3340; border-radius: 5px;
    color: #8b94a6; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.wl-fila button:hover { color: #e8edf5; border-color: #46536b; }
.wl-vacio { font-size: 12px; color: #5f6879; padding: 5px 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MAPA DE CALOR — cada celda es un instrumento, no un rectangulo de color

   Tres cosas que no hace ningun mapa de mercado que anduviera por ahi:
     · el precio SIEMPRE visible, en cifras de ancho fijo
     · el recorrido de 7 dias dibujado DENTRO de la celda, de fondo
     · una marca abajo con la posicion del precio en el rango de HOY

   Y el resplandor: lo que se movio fuerte brilla de verdad, asi el ojo va solo
   a donde paso algo en vez de tener que comparar tonos de rojo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lienzo y sectores ── */
.hm-marco { position: relative; width: 100%; overflow: hidden; }
.hm-sector {
    position: absolute; background: #0b0e14;
    border: 1px solid #1c2432; border-radius: 7px; overflow: hidden;
    box-sizing: border-box;
}
.hm-sector-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 0 9px; cursor: pointer;
    background: linear-gradient(180deg, #161c27, #10151d);
    border-bottom: 1px solid #1c2432;
    transition: background .18s;
}
.hm-sector-cab:hover { background: linear-gradient(180deg, #1d2532, #151b25); }
.hm-sector-nom {
    font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px;
    text-transform: uppercase; color: #8d9ab2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-sector-pct {
    font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    letter-spacing: .2px; flex-shrink: 0;
}
.hm-sector-pct.sube  { color: #4ec77e; }
.hm-sector-pct.baja  { color: #e8636f; }
.hm-sector-pct.plano { color: #6b7488; }
.hm-apretado { padding: 8px; font-size: 9.5px; color: #55607a; text-align: center; }

/* ── La celda ── */
.hm-celda {
    position: absolute; border-radius: 4px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; text-align: center; padding: 2px; box-sizing: border-box;
    font-variant-numeric: tabular-nums; cursor: default;
    transition: filter .14s, transform .14s;
}
.hm-celda.con-grafico { cursor: pointer; }
.hm-celda:hover { filter: brightness(1.22); transform: scale(1.012); z-index: 5; }

/* El recorrido de 7 dias, de fondo. Contexto, no protagonista: si compite con
   el numero, estorba. */
.hm-spark {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; opacity: .28;
}
.hm-spark polyline {
    fill: none; stroke: #fff; stroke-width: 1.4;
    stroke-linejoin: round; stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.hm-sym {
    position: relative; font-weight: 700; font-size: 12px; line-height: 1.1;
    letter-spacing: .2px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
/* ── Celdas diminutas: el ticker girado ──────────────────────────────────────
 *
 *   Con 503 empresas quedan muchas celdas altas y angostas (26 x 63 px). El
 *   ticker horizontal no cabe por dos o tres pixeles y la celda salia como un
 *   rectangulo de color sin una letra. Girado cabe de sobra: la altura que
 *   sobra pasa a ser el ancho del texto.
 *
 *   Se centra con grid en vez de flex porque el elemento girado ya no ocupa lo
 *   que dice su caja, y flex lo empujaba contra el borde.
 */
.hm-celda.hm-vert {
    display: grid; place-items: center; padding: 1px 0;
}
.hm-celda.hm-vert .hm-sym {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 10px; letter-spacing: .3px; font-weight: 700;
    max-height: 100%; max-width: none;
}
/* Y las que ni giradas: ticker minimo, sin nada mas. El interlineado se aprieta
   porque en 11 px de alto un line-height normal recorta la letra por abajo. */
.hm-celda.hm-nano {
    display: grid; place-items: center; padding: 0 1px;
}
.hm-celda.hm-nano .hm-sym {
    font-size: 8px; letter-spacing: -.3px; line-height: 1;
    font-weight: 700; text-shadow: 0 1px 1px rgba(0,0,0,.5);
}

/* El precio, con la tipografia de una terminal: ancho fijo para que las cifras
   se alineen en columna de celda a celda. */
.hm-precio {
    position: relative; font-size: 12.5px; font-weight: 600; line-height: 1.22;
    font-family: var(--mono);
    letter-spacing: -.2px; text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.hm-pct {
    position: relative; font-size: 10.5px; font-weight: 600; line-height: 1.25;
    opacity: .92; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.hm-sub {
    position: relative; font-size: 9px; opacity: .62; line-height: 1.2;
    margin-top: 1px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%;
}

/* La marca de rango del dia. Dice algo que el color no dice: dos activos con el
   mismo +1% pueden estar uno pegado a su maximo y otro a medio recuperarse. */
.hm-rango {
    position: absolute; left: 7px; right: 7px; bottom: 4px; height: 2px;
    background: rgba(255,255,255,.16); border-radius: 2px;
}
.hm-rango i {
    position: absolute; top: -1.5px; width: 2px; height: 5px;
    background: rgba(255,255,255,.92); border-radius: 1px;
    transform: translateX(-1px);
    box-shadow: 0 0 4px rgba(255,255,255,.55);
}

.hm-pie {
    font-size: 10.5px; color: #5d6679; margin-top: 9px; line-height: 1.55;
    font-style: italic;
}

/* Pantalla completa */
body.hm-pc-activa { overflow: hidden; }
body.hm-pc-activa #watchlist-container.wl-mapa-modo {
    position: fixed; inset: 0; z-index: 8500; background: #070a0f;
    padding: 14px 18px; overflow: auto; max-width: none;
}

/* ── Barra de controles del mapa ──────────────────────────────────────────────
   Los controles anteriores eran cajitas con colores escritos a mano: ocupaban
   mucho, tenian poco contraste y no se parecian a nada del resto del panel.

   Estos usan el MISMO lenguaje que las pestañas de arriba —subrayado y el verde
   de marca— y las variables del tema, asi que se adaptan solos si el tema
   cambia. Y ocupan una linea fina en vez de una franja. */

.hm-barra {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
    border-bottom: 1px solid var(--border, #232b38);
}

/* Universos: pestañas, igual que Watchlist / Calendario / Noticias */
.hm-universos { display: flex; flex-wrap: wrap; gap: 2px; }
.hm-uni {
    position: relative;
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text3, #79839a);
    font-size: 12px; font-weight: 600; letter-spacing: .4px;
    padding: 7px 13px; cursor: pointer; margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.hm-uni:hover:not(:disabled) {
    color: var(--text, #dbe3ef);
    border-bottom-color: rgba(126, 203, 32, .45);
}
.hm-uni.activo {
    color: var(--text, #f0f4fa);
    border-bottom-color: var(--acento-marca, #7ecb20);
}
.hm-uni:disabled { opacity: .32; cursor: not-allowed; }
/* Punto de aviso: esta fuente todavia no se puede vender. Se ve, pero no grita. */
.hm-uni-aviso {
    display: inline-block; width: 5px; height: 5px; margin-left: 5px;
    border-radius: 50%; background: var(--warn, #d99a3c);
    vertical-align: middle;
}

/* Acciones a la derecha: periodo, volver, ampliar */
.hm-acciones { display: flex; align-items: center; gap: 6px; padding-bottom: 5px; }
.hm-periodos { display: inline-flex; gap: 1px; }
.hm-per {
    background: none; border: none; border-radius: 5px;
    color: var(--text3, #79839a);
    font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
    padding: 5px 10px; cursor: pointer;
    transition: color .15s, background .15s;
}
.hm-per:hover:not(:disabled) { color: var(--text, #dbe3ef); background: rgba(255,255,255,.05); }
.hm-per.activo {
    color: #0d1117; background: var(--acento-marca, #7ecb20);
}
.hm-per:disabled { opacity: .3; cursor: not-allowed; }
.hm-per.parcial::after {
    content: '·'; margin-left: 2px; opacity: .7;
}
.hm-mini {
    background: none; border: 1px solid var(--border, #2c3340); border-radius: 6px;
    color: var(--text3, #79839a); font-size: 11.5px; font-weight: 600;
    padding: 5px 11px; cursor: pointer; letter-spacing: .3px;
    transition: color .15s, border-color .15s;
}
.hm-mini:hover { color: var(--text, #dbe3ef); border-color: var(--acento-marca, #7ecb20); }

/* Estados vacios del mapa */
.hm-vacio { padding: 54px 20px; text-align: center; }
.hm-vacio-tit { font-size: 14px; color: var(--text2, #93a0b6); font-weight: 600; }
.hm-vacio-sub { font-size: 12px; color: var(--text3, #6b7488); margin-top: 7px;
                max-width: 420px; margin-left: auto; margin-right: auto;
                line-height: 1.6; }
.hm-vacio-btn {
    display: inline-block; margin-top: 15px; padding: 8px 20px;
    background: var(--acento-marca, #7ecb20); color: #0d1117;
    border-radius: 7px; font-size: 12.5px; font-weight: 700; text-decoration: none;
}

/* ── Panel de datos al pasar el raton ────────────────────────────────────────
   La celda da el titular; esto da el detalle sin salir de la vista. */
.hm-info {
    position: fixed; z-index: 9500; width: 272px; padding: 12px 13px;
    background: rgba(13, 17, 23, .97);
    border: 1px solid #2c3646; border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0,0,0,.62);
    pointer-events: none;
    font-family: var(--f-ui);
    backdrop-filter: blur(7px);
}
.hm-info.oculto { display: none; }
.hm-info-cab {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 1px;
}
.hm-info-sym { font-size: 15px; font-weight: 800; color: #f0f4fa; letter-spacing: .3px; }
.hm-info-precio {
    font-size: 14px; font-weight: 600; color: #dbe3ef;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}
.hm-info-nom { font-size: 11px; color: #79839a; margin-bottom: 9px;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-info-graf { display: block; width: 100%; height: 54px; margin-bottom: 9px; }
.hm-info-graf polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round;
                         vector-effect: non-scaling-stroke; }
.hm-info-graf.sube polyline { stroke: #4ec77e; }
.hm-info-graf.baja polyline { stroke: #e8636f; }
.hm-info-tabla { border-top: 1px solid #1e2632; padding-top: 8px; }
.hm-info-fila {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; font-size: 11.5px; line-height: 1.85;
}
.hm-info-fila span { color: #6b7488; }
.hm-info-fila b {
    color: #dbe3ef; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.hm-info-fila b.sube { color: #4ec77e; }
.hm-info-fila b.baja { color: #e8636f; }
.hm-info-pie {
    margin-top: 9px; padding-top: 7px; border-top: 1px solid #1e2632;
    font-size: 10px; color: #55607a; text-align: center; letter-spacing: .3px;
}

/* ── Lista / Mapa de calor y Personalizar ────────────────────────────────────
   ESTABAN NEGROS SOBRE UN PANEL CLARO.

   Los escribi con colores fijos de tema oscuro (#171b23) y el panel es claro
   (--bg: #F6F5F1). El resultado eran dos cajas negras pegadas encima del
   contenido, que es literalmente lo que se veia.

   Ahora usan las variables del tema y el verde de marca, asi que se ven de la
   misma familia que las pestañas de arriba y siguen al tema si cambia. */

.wl-barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 0 14px; flex-wrap: wrap;
}
.wl-vistas {
    display: inline-flex; padding: 3px; gap: 2px;
    background: var(--surface2, #FAF6EE);
    border: 1px solid var(--border, #D9D3C7);
    border-radius: 9px;
}
.wl-vbtn {
    background: none; border: 0; border-radius: 7px;
    color: var(--text2, #6E6656);
    font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
    padding: 6px 16px; cursor: pointer;
    transition: background .15s, color .15s;
}
.wl-vbtn:hover { color: var(--text, #33291B); background: rgba(126, 203, 32, .12); }
.wl-vbtn.activo {
    background: var(--acento-marca, #7ecb20);
    color: #1d2b08; font-weight: 700;
    box-shadow: 0 1px 3px rgba(126, 203, 32, .35);
}
.wl-personalizar {
    background: none;
    border: 1.5px solid var(--acento-marca, #7ecb20);
    border-radius: 9px;
    color: var(--text, #33291B);
    padding: 7px 17px; font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
    cursor: pointer; transition: background .15s, color .15s;
}
.wl-personalizar:hover { background: var(--acento-marca, #7ecb20); color: #1d2b08; }

/* Las pestañas de universo, tambien en claro */
.hm-uni { color: var(--text2, #6E6656); }
.hm-uni:hover:not(:disabled) { color: var(--text, #33291B); }
.hm-uni.activo { color: var(--text, #33291B); }
.hm-per { color: var(--text2, #6E6656); }
.hm-per:hover:not(:disabled) {
    color: var(--text, #33291B); background: rgba(126, 203, 32, .14);
}
.hm-per.activo { color: #1d2b08; background: var(--acento-marca, #7ecb20); font-weight: 700; }
.hm-mini {
    border-color: var(--border, #D9D3C7); color: var(--text2, #6E6656);
}
.hm-mini:hover { color: var(--text, #33291B); border-color: var(--acento-marca, #7ecb20); }
.hm-barra { border-bottom-color: var(--border, #D9D3C7); }
.hm-vacio-tit { color: var(--text, #33291B); }
.hm-vacio-sub { color: var(--text2, #6E6656); }
.hm-pie { color: var(--text3, #938B7C); }

/* El panel de Personalizar: fondo claro, acento verde */
.wl-panel-caja {
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border, #D9D3C7);
    box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.wl-panel-cab strong { color: var(--text, #33291B); }
.wl-cerrar { color: var(--text3, #938B7C); }
.wl-cerrar:hover { color: var(--text, #33291B); }
.wl-panel-agregar input {
    background: var(--surface2, #FAF6EE);
    border: 1px solid var(--border, #D9D3C7);
    color: var(--text, #33291B);
}
.wl-panel-agregar input:focus { border-color: var(--acento-marca, #7ecb20); }
.wl-panel-agregar button {
    background: var(--acento-marca, #7ecb20);
    border: 0; color: #1d2b08; font-weight: 700;
}
.wl-seccion { color: var(--text3, #938B7C); }
.wl-cuenta { color: var(--text3, #938B7C); }
.wl-fila {
    background: var(--surface2, #FAF6EE);
    color: var(--text, #33291B);
    border: 1px solid var(--border, #D9D3C7);
}
.wl-fila button {
    border-color: var(--border, #D9D3C7); color: var(--text2, #6E6656);
}
.wl-fila button:hover {
    color: #1d2b08; background: var(--acento-marca, #7ecb20);
    border-color: var(--acento-marca, #7ecb20);
}
.wl-vacio { color: var(--text3, #938B7C); }
.wl-panel-aviso.bien { color: #2f7d34; }

/* ── Tercer nivel: las cajas de industria dentro de cada sector ──────────────
   Es lo que separa un mapa que se ve bien de uno que se ve profesional.
   "Tecnologia -3%" no dice nada; "Semiconductores -6% y Software +1%" si. */
.hm-industria {
    position: absolute; box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 3px; overflow: hidden;
    background: rgba(255,255,255,.015);
}
.hm-industria-cab {
    display: flex; align-items: center; padding: 0 5px;
    font-size: 8.5px; font-weight: 700; letter-spacing: .7px;
    text-transform: uppercase; color: rgba(255,255,255,.42);
    background: rgba(255,255,255,.045);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Cabecera de mercado: plegable ───────────────────────────────────────────
   Las SESIONES se ven siempre, en todas las pestañas: saber si Londres esta
   abierto importa estes donde estes. El RIESGO GLOBAL solo en Watchlist. Y los
   sectores ya no viven aqui — son el universo "ETFs" del mapa, donde tienen
   periodos y detalle en vez de ser un adorno que salia hasta en el Calendario. */
.btn-plegar {
    display: block; margin: 0 24px 6px auto;
    background: none; border: 1px solid var(--border, #D9D3C7);
    border-radius: 8px; color: var(--text2, #6E6656);
    font-size: 11px; font-weight: 600; letter-spacing: .3px;
    padding: 4px 12px; cursor: pointer;
    transition: color .15s, border-color .15s;
}
.btn-plegar:hover {
    color: var(--text, #33291B); border-color: var(--acento-marca, #7ecb20);
}
#cabecera-mercado.plegada .ms-grid { display: none; }
#cabecera-mercado.plegada { padding-bottom: 6px; }

/* ── Tabla del watchlist ─────────────────────────────────────────────────────
   La otra mitad del producto: el mapa contesta "que se movio de un vistazo",
   la tabla "damelo ordenado y con los numeros exactos". Salen de los MISMOS
   datos, asi que cambiar de vista no cambia lo que ves, solo como. */
.wl-tabla-barra {
    display: flex; align-items: center; gap: 10px; margin: 10px 0 8px;
    flex-wrap: wrap;
}
.wl-tabla-buscar {
    flex: 0 1 260px;
    background: var(--surface2, #FAF6EE);
    border: 1px solid var(--border, #D9D3C7); border-radius: 8px;
    color: var(--text, #33291B); padding: 7px 12px; font-size: 12.5px;
}
.wl-tabla-buscar:focus { outline: none; border-color: var(--acento-marca, #7ecb20); }
.wl-tabla-sector {
    background: var(--surface2, #FAF6EE);
    border: 1px solid var(--border, #D9D3C7); border-radius: 8px;
    color: var(--text, #33291B); padding: 7px 10px; font-size: 12.5px;
    cursor: pointer;
}
.wl-tabla-sector:focus { outline: none; border-color: var(--acento-marca, #7ecb20); }
.wl-tabla-cuenta {
    margin-left: auto; font-size: 11.5px; color: var(--text3, #938B7C);
    font-variant-numeric: tabular-nums;
}

.wl-tabla-caja {
    border: 1px solid var(--border, #D9D3C7); border-radius: 10px;
    overflow: auto; max-height: 72vh;
    background: var(--surface, #FFFFFF);
}
.wl-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wl-tabla thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface2, #FAF6EE);
    border-bottom: 2px solid var(--border, #D9D3C7);
    color: var(--text2, #6E6656);
    font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; text-align: left;
    padding: 9px 12px; cursor: pointer; white-space: nowrap;
    user-select: none;
}
.wl-tabla thead th:hover { color: var(--text, #33291B); }
.wl-tabla thead th.num { text-align: right; }
/* La flecha del orden: sin ella no se sabe por que columna esta ordenado. */
.wl-tabla thead th.orden-desc::after { content: ' \25BC'; font-size: 8px;
    color: var(--acento-marca, #7ecb20); }
.wl-tabla thead th.orden-asc::after  { content: ' \25B2'; font-size: 8px;
    color: var(--acento-marca, #7ecb20); }

.wl-tabla tbody tr { border-bottom: 1px solid var(--border, #D9D3C7); }
.wl-tabla tbody tr:hover { background: rgba(126, 203, 32, .07); }
.wl-tabla tbody tr.con-grafico { cursor: pointer; }
.wl-tabla td {
    padding: 7px 12px; color: var(--text, #33291B);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wl-tabla td.num { text-align: right;
    font-family: var(--mono); }
.wl-tabla td.sube { color: var(--up, #0F9D6B); font-weight: 600; }
.wl-tabla td.baja { color: var(--down, #C33B34); font-weight: 600; }
.wl-tabla td.nulo { color: var(--text3, #938B7C); }
.wl-t-sym { font-weight: 700; margin-right: 8px; }
.wl-t-nom { color: var(--text3, #938B7C); font-size: 11.5px; }

/* La atribucion que exige la licencia de CoinGecko. Discreta pero legible: sus
   terminos piden fuente no menor a 10, y por eso no baja de ahi. */
.hm-atribucion {
    font-size: 10px; color: var(--text3, #938B7C);
    text-decoration: underline; text-underline-offset: 2px;
    font-style: normal; margin-left: 4px;
}
.hm-atribucion:hover { color: var(--acento-marca, #7ecb20); }

/* ── Esqueleto mientras cargan los datos ─────────────────────────────────────
   Un "Cargando…" en una pantalla vacia se siente lento aunque tarde lo mismo.
   Ver la forma del mapa apareciendo se siente rapido.

   Los tamaños son inventados y por eso van en GRIS: pintarlos con colores
   pareceria dato real, y no lo es. */
.hm-esqueleto { background: transparent; }
.hm-esq-caja {
    position: absolute; border-radius: 5px;
    background: var(--surface2, #FAF6EE);
    border: 1px solid var(--border, #D9D3C7);
    animation: hm-latido 1.4s ease-in-out infinite;
}
.hm-esq-caja:nth-child(2n) { animation-delay: .18s; }
.hm-esq-caja:nth-child(3n) { animation-delay: .36s; }
@keyframes hm-latido { 0%,100% { opacity: .55; } 50% { opacity: .9; } }
.hm-esq-texto {
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 600; color: var(--text2, #6E6656);
    pointer-events: none;
}

/* ── Panel al pasar el raton — EN TEMA CLARO ─────────────────────────────────
   Estaba en negro (#0d1117) sobre un panel claro: una caja oscura flotando que
   no pega con nada. El mismo error que tenian los botones, por lo mismo —
   escribi colores fijos en vez de usar las variables del tema. */
.hm-info {
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border, #D9D3C7);
    box-shadow: 0 14px 38px rgba(51, 41, 27, .16);
    backdrop-filter: none;
    border-radius: 12px;
    padding: 13px 15px;
}
.hm-info-sym { color: var(--text, #33291B); }
.hm-info-precio { color: var(--text, #33291B); }
.hm-info-nom { color: var(--text3, #938B7C); }
.hm-info-tabla { border-top: 1px solid var(--border, #D9D3C7); }
.hm-info-fila span { color: var(--text3, #938B7C); }
.hm-info-fila b { color: var(--text, #33291B); }
.hm-info-fila b.sube { color: var(--up, #0F9D6B); }
.hm-info-fila b.baja { color: var(--down, #C33B34); }
.hm-info-graf.sube polyline { stroke: var(--up, #0F9D6B); }
.hm-info-graf.baja polyline { stroke: var(--down, #C33B34); }
.hm-info-pie {
    border-top: 1px solid var(--border, #D9D3C7);
    color: var(--text3, #938B7C);
}

/* ── Amplitud del mercado ────────────────────────────────────────────────────
   Ocupa el hueco que dejaron los sectores al mudarse al mapa. Contesta lo que
   ningun indice contesta: el S&P puede cerrar en verde con cuatro empresas
   enormes tirando de el mientras 400 caen. La cuenta separa esas dos historias. */
.panel-amplitud { margin-top: 18px; }
.amp-cargando { font-size: 12px; color: var(--text3, #938B7C); padding: 10px 2px; }
.amp-barra-fila { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.amp-num { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
           min-width: 42px; }
.amp-num.amp-sube { color: var(--up, #0F9D6B); }
.amp-num.amp-baja { color: var(--down, #C33B34); text-align: right; }
.amp-barra {
    flex: 1; display: flex; height: 9px; border-radius: 5px; overflow: hidden;
    background: var(--surface2, #FAF6EE);
    border: 1px solid var(--border, #D9D3C7);
}
.amp-b-sube { background: var(--up, #0F9D6B); transition: width .5s ease; }
.amp-b-baja { background: var(--down, #C33B34); transition: width .5s ease; }
/* Sin `cursor: help`: el tooltip que colgaba de aqui se mudo al panel de
   FEAR & GREED. Un cursor de ayuda sobre algo que ya no explica nada es una
   promesa que no se cumple. */
.amp-pie {
    font-size: 11px; color: var(--text3, #938B7C); margin-bottom: 12px;
}
/* Ahi es donde ahora vive el desglose de los cinco componentes. */
#fg-score, #fg-status, #fg-corr { cursor: help; }
.amp-movers { display: flex; gap: 18px; }
.amp-col { flex: 1; min-width: 0; }
.amp-col-tit {
    font-size: 9px; font-weight: 700; letter-spacing: .9px;
    color: var(--text3, #938B7C); margin-bottom: 5px;
}
.amp-mover {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px; font-size: 12px; line-height: 1.75;
    font-variant-numeric: tabular-nums;
}
.amp-m-sym { font-weight: 700; color: var(--text, #33291B); }
.amp-m-pct.sube { color: var(--up, #0F9D6B); font-weight: 600; }
.amp-m-pct.baja { color: var(--down, #C33B34); font-weight: 600; }


/* ── Sugerencias al agregar a la watchlist ───────────────────────────────────
 *
 *   El campo pedia la sintaxis interna del sistema: escribir "xauusd" —como se
 *   llama el oro en cualquier plataforma— fallaba porque aqui es "GC=F". Ahora
 *   se busca por nombre y se proponen candidatos mientras se escribe.
 */
.wl-sugerencias { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 2px; }
.wl-sug {
    display: flex; align-items: baseline; gap: 8px; width: 100%;
    padding: 7px 10px; border: 1px solid transparent; border-radius: 7px;
    background: transparent; cursor: pointer; text-align: left;
    font: inherit; color: inherit; transition: background .12s, border-color .12s;
}
.wl-sug:hover, .wl-sug:focus-visible {
    background: rgba(140, 198, 63, .12);
    border-color: rgba(140, 198, 63, .45);
}
.wl-sug-sym  { font-weight: 700; font-size: 12.5px; min-width: 74px; }
.wl-sug-nom  { flex: 1; font-size: 12px; opacity: .82;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-sug-tipo { font-size: 10.5px; opacity: .55; text-transform: uppercase;
               letter-spacing: .3px; }

/* ── MODO GRATUITO (2026-09-18): portada = dashboard con secciones de pago bloqueadas ── */
.hdr-btn {
    margin-left: 10px; padding: 6px 14px; border-radius: 7px; font-size: 12px; font-weight: 700;
    text-decoration: none; color: #33291B; border: 1px solid #CFC8BA; background: transparent;
    white-space: nowrap;
}
.hdr-btn:hover { background: #F6F5F1; }
.hdr-btn-primario { background: #33291B; color: #FFFDF8; border-color: #33291B; }
.hdr-btn-primario:hover { background: #4a3728; }
.tab-btn-pago { color: #A39D91; }
.tab-lock { font-size: 10px; margin-left: 2px; vertical-align: 1px; opacity: .75; }
.bloqueado-card {
    max-width: 560px; margin: 46px auto; padding: 34px 30px; text-align: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.bloqueado-icono  { font-size: 34px; margin-bottom: 10px; }
.bloqueado-titulo { font-size: 20px; font-weight: 800; color: #33291B; margin-bottom: 8px; letter-spacing: -.3px; }
.bloqueado-texto  { font-size: 14px; color: #5E5949; margin-bottom: 20px; line-height: 1.55; }
.bloqueado-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.bloqueado-btn {
    display: inline-block; padding: 11px 20px; border-radius: 9px; font-size: 14px; font-weight: 700;
    text-decoration: none; color: #33291B; border: 1px solid #CFC8BA; background: transparent;
}
.bloqueado-btn:hover { background: #F6F5F1; }
.bloqueado-btn.primario { background: #7ECB20; border-color: #7ECB20; color: #14210a; }
.bloqueado-btn.primario:hover { filter: brightness(1.05); }
.bloqueado-nota { font-size: 12px; color: #8A8478; }
@media (max-width: 768px) {
    .hdr-btn { margin-left: 6px; padding: 5px 10px; font-size: 11px; }
    .bloqueado-card { margin: 20px 12px; padding: 24px 18px; }
}