/* ==========================================================================
   Overlook — mejoras: un toque de color, animaciones suaves y componentes nuevos
   (guía de la renta, capacidad hipotecaria, Fed, IA, insiders y fondos).
   Se carga después de style.css, taste.css y light.css.
   ========================================================================== */

/* ---------- 1. Color: un único acento + verde/rojo con más presencia ---------- */
:root { --accent: #3b82f6; --accent-soft: rgba(59, 130, 246, .14); }
:root[data-theme="taste"] { --accent: #6ea8fe; --accent-soft: rgba(110, 168, 254, .12); }
:root[data-mode="light"] { --accent: #2563eb; --accent-soft: rgba(37, 99, 235, .08); }
:root[data-theme="taste"][data-mode="light"] { --accent: #2563eb; --accent-soft: rgba(37, 99, 235, .07); }

/* variaciones en pastilla con fondo suave (verde si ganas, rojo si pierdes) */
[data-theme="taste"] .delta.pill.up { background: var(--up-soft); padding: 2px 7px; border-radius: 4px; }
[data-theme="taste"] .delta.pill.down { background: var(--down-soft); padding: 2px 7px; border-radius: 4px; }
[data-theme="taste"] .kpi .value .delta { font-weight: 500; }
.value.up, .value .up { color: var(--up); }
.value.down, .value .down { color: var(--down); }
.value.accent { color: var(--accent); }

/* navegación: indicador del apartado activo en color de acento */
[data-theme="taste"] .sidebar nav a { position: relative; }
[data-theme="taste"] .sidebar nav a.active::after { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); }
[data-theme="taste"] .sidebar nav a.active .ico { color: var(--accent); }

/* tarjetas de cartera: recuperan una fina línea con el color de cada cartera */
[data-theme="taste"] .pf-card { border-top-width: 2px !important; border-top-style: solid !important; }
/* distribución: barras con el color de cada grupo, suavizado */
[data-theme="taste"] .legend-list .bar i { opacity: .85; }
[data-theme="taste"] .legend-list .bar.mono i { background: var(--text) !important; }

/* foco visible con el acento */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-theme="taste"] input:focus, [data-theme="taste"] select:focus, [data-theme="taste"] textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
[data-theme="taste"] .tab.active { box-shadow: inset 0 -2px 0 var(--accent); }
[data-theme="taste"] .chip.active { box-shadow: inset 0 -2px 0 var(--accent); }
[data-theme="taste"] .highlight { box-shadow: inset 2px 0 0 var(--accent); }
.text-warn { color: var(--warn); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- 2. Movimiento: transiciones cortas y discretas ---------- */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }
[data-theme="taste"] .page { animation: page-in 240ms var(--ease-out); }
.page > * { animation: rise-in 360ms var(--ease-out) both; }
.page > *:nth-child(2) { animation-delay: 30ms; }
.page > *:nth-child(3) { animation-delay: 60ms; }
.page > *:nth-child(4) { animation-delay: 90ms; }
.page > *:nth-child(5) { animation-delay: 120ms; }
.page > *:nth-child(n+6) { animation-delay: 150ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }

/* contenido que llega tras cargar */
#fundDetail > *, #insRes > *, #aiOut > *, #calBody > *, #toolBody > *, [data-hbody] > *, #fedProbs > *, #fedNextProbs > * { animation: rise-in 320ms var(--ease-out) both; }

/* acceso: entrada de la tarjeta y cambio Entrar / Crear cuenta */
.auth-card { animation: rise-in 420ms var(--ease-out) both; }
.auth-card.swap #authTitle, .auth-card.swap #authSub, .auth-card.swap form { animation: swap-in 260ms var(--ease-out) both; }
.auth-card.swap #authSub { animation-delay: 30ms; }
.auth-card.swap form { animation-delay: 50ms; }
@keyframes swap-in { from { opacity: 0; transform: translateX(var(--swap-dir, 8px)); } to { opacity: 1; transform: none; } }
.reg-only:not(.hidden) { animation: field-in 260ms var(--ease-out) both; }
@keyframes field-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.auth-card .tab { transition: background 200ms var(--ease-out), color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }

/* pestañas, chips y botones */
.tab, .chip, .seg-btn { transition: background 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.card, .kpi { transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out); }
a.card:hover, button.card:hover { border-color: var(--border-strong); }

/* modales y toasts: también al salir */
.modal-back.closing { animation: fade-out 160ms ease-in both; }
.modal-back.closing .modal { animation: modal-out 160ms ease-in both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes modal-out { to { opacity: 0; transform: translateY(6px) scale(.985); } }
.toast { animation: toast-in 260ms var(--ease-out); }
.toast.leaving { animation: toast-out 220ms ease-in both; }
@keyframes toast-out { to { opacity: 0; transform: translateX(12px); } }

/* barras que crecen al aparecer */
.prob-row .track i, .wbar i, .budget-bar i, .legend-list .bar i { animation: grow-x 600ms var(--ease-out) both; transform-origin: left; }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .page > *, .auth-card, .reg-only:not(.hidden), .prob-row .track i, .wbar i, .budget-bar i { animation: none !important; }
}

/* ---------- 3. Componentes nuevos ---------- */
/* control segmentado */
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); flex-wrap: wrap; justify-self: start; }
.seg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 0; border-radius: calc(var(--radius) - 3px); background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; min-height: 34px; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--surface-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

/* Fiscalidad */
.fisc-head { gap: 12px; flex-wrap: wrap; align-items: center; }
.guide-teaser { display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; }
.guide-teaser:hover { text-decoration: none; border-color: var(--accent); }
.guide-teaser > .ico:first-child { color: var(--accent); width: 22px; height: 22px; }
.card.accent-warn { border-left: 3px solid var(--warn); }
.card.accent-ok { border-left: 3px solid var(--up); }
.plain-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.55; color: var(--text-2); }
.plain-list.good li::marker { color: var(--up); }
.steps-list { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 14px; }
.steps-list > li { counter-increment: st; position: relative; padding-left: 36px; line-height: 1.5; }
.steps-list > li::before { content: counter(st); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent); }
.steps-list > li .muted { font-size: 13px; margin-top: 2px; }
.steps-list.compact { gap: 10px; }
table.liq td { padding: 7px 12px; }
table.liq tr.strong td { font-weight: 600; color: var(--text); border-top: 1px solid var(--border); }
table.liq tr:not(.strong) td:first-child { color: var(--text-2); }

/* Capacidad hipotecaria */
.target-box { border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; display: grid; gap: 4px; }
.target-box.up { border-left-color: var(--up); }
.target-box.warn { border-left-color: var(--warn); }
.target-box.down { border-left-color: var(--down); }
.budget-bar { display: flex; height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.budget-bar i { display: block; height: 100%; }
.budget-bar i.debt, .sw.debt { background: var(--warn); }
.budget-bar i.mort, .sw.mort { background: var(--accent); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--surface-3); }

/* Fed */
.fed-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1000px) { .fed-grid { grid-template-columns: 1fr; } }
.fed-headline { font-size: 17px; margin: 6px 0 14px; line-height: 1.4; }
.prob-bars { display: grid; gap: 8px; }
.prob-bars.compact { gap: 4px; }
.prob-row { display: grid; grid-template-columns: 92px 1fr 56px; align-items: center; gap: 10px; font-size: 13px; }
.prob-bars.compact .prob-row { grid-template-columns: 76px 1fr 46px; font-size: 12px; }
.prob-row .l { color: var(--text-2); }
.prob-row .v { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.prob-row .track { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.prob-bars.compact .prob-row .track { height: 6px; }
.prob-row .track i { display: block; height: 100%; border-radius: 4px; background: var(--muted); }
.prob-row.up .track i { background: var(--up); }
.prob-row.down .track i { background: var(--down); }
.prob-row.flat .track i { background: var(--accent); }
.fed-path { border-top: 1px solid var(--border); margin-top: 14px; }
.fed-path-row { display: grid; grid-template-columns: 1fr auto 56px 64px; gap: 10px; padding: 5px 0; font-size: 13px; border-bottom: 1px dashed var(--border); }
.fed-path-row > :not(:first-child) { text-align: right; }
.fed-next { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.fed-table td { vertical-align: top; }

/* IA */
.ai-btn .ico { color: var(--accent); }
.ai-providers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.ai-prov { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface); }
.ai-prov.on { border-color: var(--border-strong); }
.ai-prov.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.ai-prov a { color: var(--muted); }
.ai-active { margin-bottom: 14px; }
.ai-form { display: grid; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.ai-form textarea { width: 100%; resize: vertical; }
.ai-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.ai-meta .ico { color: var(--accent); }
.ai-result .an-body { max-width: none; font-size: 15px; }
.ai-result .an-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ai-wait { display: flex; align-items: center; gap: 14px; padding: 24px 4px; }
.ai-dots { display: inline-flex; gap: 5px; }
.ai-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: dot 1.1s infinite ease-in-out; }
.ai-dots i:nth-child(2) { animation-delay: .15s; }
.ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* Insiders y fondos */
.feed { display: grid; }
.feed-item { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); line-height: 1.5; font-size: 14px; }
.feed-item:last-child { border-bottom: 0; }
.feed-item > .badge { justify-self: start; align-self: start; margin-top: 2px; }
.tick { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 4px; background: var(--surface-3); color: var(--text-2); }
.fund-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fund { text-align: left; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 4px; padding: 14px; }
.fund.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.fund-hl { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; font-family: var(--mono); margin-top: 4px; }
.wbar { height: 3px; background: var(--surface-3); border-radius: 2px; margin-top: 5px; min-width: 60px; overflow: hidden; }
.wbar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
@media (max-width: 600px) {
  .feed-item { grid-template-columns: 1fr; gap: 4px; }
  .prob-row { grid-template-columns: 80px 1fr 48px; }
}
[data-theme="taste"] #aggBtn .ico { display: inline-block; }
.tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
  .fed-table td { display: block !important; min-width: 0 !important; text-align: left !important; }
  .fed-table td::before { display: block; margin-bottom: 4px; }
  .fed-table td.nowrap { white-space: normal; }
  .fed-table .prob-bars { max-width: 320px; }
}

/* ---------- Acceso: recuperación, condiciones y avisos ---------- */
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; justify-self: center; }
.link-btn:hover { color: var(--text); }
.terms-check { align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.terms-check input { margin-top: 2px; flex-shrink: 0; }
.terms-check a, .auth-legal a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.auth-legal { margin-top: 10px; font-size: 12px; color: var(--muted); }
.ok-msg { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--up); background: var(--up-soft); border-radius: var(--radius-sm); padding: 10px 12px; }
.verify-banner { display: flex; align-items: center; gap: 10px; margin: 16px 28px 0; padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); font-size: 13px; color: var(--text-2); animation: rise-in 320ms var(--ease-out) both; }
.verify-banner > span { flex: 1; }
@media (max-width: 900px) { .verify-banner { margin: 12px 16px 0; flex-wrap: wrap; } }

/* ---------- Planes ---------- */
.badge.premium { background: linear-gradient(135deg, #f5d27a, #e0a43a); color: #2a1a00; font-weight: 600; }
.nav-lock { margin-left: auto; color: var(--muted); display: inline-flex; }
.perk-list { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.perk-list li { display: flex; gap: 10px; align-items: center; color: var(--text-2); }
.perk-list li .ico { color: var(--accent); }
.perk-list.compact { gap: 6px; font-size: 13px; margin: 10px 0 14px; }
.price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 2px; }
.price b { font-size: 22px; font-family: var(--mono); }
.price span { font-size: 12px; color: var(--muted); }
.price.best { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.card.gate { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 20px; }
.card.gate > .ico { color: var(--accent); }
.card.gate p { max-width: 52ch; margin: 0; }

/* ---------- Sugerencias ---------- */
.sug-intro { display: flex; gap: 16px; align-items: center; }
.sug-intro > .ico { color: var(--warn); flex-shrink: 0; }
.sug-intro p { margin: 4px 0 0; }
.sug-filters { gap: 12px; flex-wrap: wrap; }
.sug-list { display: grid; gap: 10px; }
.sug { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; }
.sug h3 { margin: 0; font-size: 16px; }
.sug-body { margin: 6px 0 0; color: var(--text-2); line-height: 1.55; white-space: pre-line; }
.sug-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.sug-meta select { min-height: 28px; padding: 2px 6px; font-size: 12px; }
.vote { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); cursor: pointer; font: inherit; transition: border-color .18s, color .18s, background .18s, transform .12s; }
.vote:hover { border-color: var(--border-strong); color: var(--text); }
.vote:active { transform: scale(.95); }
.vote b { font-family: var(--mono); font-size: 15px; }
.sug.voted .vote { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.more-btn { justify-self: center; }
.more-row { display: flex; justify-content: center; }
.more-row:empty { display: none; }
.more-btn { margin: 12px auto 0; display: flex; }

/* ---------- Móvil: fichas compactas en dos columnas ---------- */
@media (max-width: 640px) {
  table.responsive tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 14px 0; }
  table.responsive td { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 1px; padding: 0; min-width: 0; }
  table.responsive td::before { font-size: 11px; }
  table.responsive td.cell-main, table.responsive td[colspan] { grid-column: 1 / -1; padding-bottom: 2px; }
  table.responsive td[data-label=""] { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  table.responsive td.m-hide { display: none; }
  table.responsive td > div[style*="min-width"] { min-width: 0 !important; width: 100%; }
  table.responsive td .delta.pill { align-self: flex-start; }
  table.responsive td select { width: 100%; }
  /* barra superior y avisos */
  .topbar-actions { flex-wrap: nowrap; gap: 6px; }
  .topbar-actions .btn { min-height: 38px; padding: 6px 10px; }
  .verify-banner { font-size: 12px; padding: 8px 10px; gap: 8px; }
  .verify-banner .btn.small:not(.icon) { padding: 4px 8px; }
  /* filtros de Operaciones a todo el ancho */
  .filters, .filter-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters > :first-child, .filter-row > :first-child { grid-column: 1 / -1; }
  .kpi .value { word-break: break-word; }
  .page { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 640px) {
  .filter-row .input-icon, .filter-row select { max-width: none !important; width: 100%; }
  .filter-row .spacer { display: none; }
  .filter-row #count { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .topbar { gap: 6px; }
  .topbar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .market-status { display: none; }
  .topbar #modeBtn { min-width: 34px; padding: 4px; }
  table.responsive td[data-label=""] { margin-top: -28px; }
}
@media (max-width: 640px) {
  #secMore .mkt-card [data-chart] { display: none; }
  #secMore .mkt-card { cursor: pointer; padding: 12px 14px; }
  #secMain .chart-box { height: 170px; }
  #heatmap { height: 460px !important; }
}
/* Herramientas en móvil: parámetros → resultados → gráfico → detalle */
@media (max-width: 1100px) {
  #toolBody > .grid.c2, [data-hbody] > .grid.c2 { display: contents; }
  #toolBody > .grid.c2 > .calc-params, [data-hbody] > .grid.c2 > .calc-params { order: 1; }
  #toolBody > [data-kpis], [data-hbody] > [data-kpis] { order: 2; }
  #toolBody > .grid.c2 > .card:not(.calc-params), [data-hbody] > .grid.c2 > .card:not(.calc-params) { order: 3; }
  #toolBody > :not(.grid), [data-hbody] > :not(.grid) { order: 4; }
  [data-hbody] > .info, [data-hbody] > .notice { order: 0; }
}
.compact-table td, .compact-table th { white-space: nowrap; }
@media (max-width: 640px) { .compact-table td, .compact-table th { padding: 7px 6px; font-size: 12px; } }
@media (max-width: 1100px) { #toolBody > .seg, #toolBody > [data-hbody] { order: -1; } #toolBody > [data-hbody] { order: 0; } }
@media (max-width: 640px) {
  .info, .notice { flex-wrap: wrap; }
  .info > .btn, .notice > .btn { margin-left: 26px; }
  .add-card { min-height: 64px !important; padding: 12px !important; flex-direction: row !important; gap: 8px; }
}

/* ---------- Comparar rentabilidad ---------- */
.bench-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.chip.bench { padding-right: 2px; gap: 6px; }
.bench-search { flex: 1 1 220px; max-width: 320px; }
.cmp-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; margin-top: 12px; }
.cmp-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cmp-item .pos { color: var(--muted); font-family: var(--mono); width: 14px; }
.cmp-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-item .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Navegación dentro de la misma sección: nada se mueve; solo el contenido nuevo aparece suave */
/* Navegación dentro de una sección: sin animaciones (solo se mantienen los indicadores de carga) */
.page.calm, .page.calm *:not(.spin, .skeleton, .ai-dots i, .live), .page.calm *:not(.live)::before, .page.calm *:not(.skeleton)::after { animation: none !important; }
.page.staging { position: absolute; visibility: hidden; pointer-events: none; }
.page-stale { pointer-events: none; }
body.soft-wait::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 999; background: var(--accent); transform-origin: left; animation: soft-bar 1.1s ease-in-out infinite; }
@keyframes soft-bar { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(.85); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ===================== Análisis de acciones ===================== */
.stk-hero { display: grid; gap: 14px; }
.stk-hero h2 { font-size: 20px; margin-bottom: 4px; }
.stk-search input { font-size: 15px; padding: 12px 14px; }
.stk-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.stk-pick { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; min-width: 0; transition: border-color var(--dur), background var(--dur); }
.stk-pick:hover { border-color: var(--border-strong); background: var(--surface-2); }
.stk-pick > span:last-child { display: grid; min-width: 0; }
.stk-pick .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stk-head { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1.4fr); gap: 18px; align-items: center; }
.stk-id { display: flex; gap: 12px; align-items: center; min-width: 0; }
.stk-id .asset-av { width: 44px; height: 44px; font-size: 11px; flex: none; }
.stk-id h2 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-price { text-align: right; }
.stk-price .v { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stk-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stk-score { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; background: var(--surface-2); }
.stk-score:hover { border-color: var(--border-strong); }
.stk-score .lbl, .stk-kpis .lbl, .stk-score-big .lbl, .proj .lbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.stk-score .snum { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.snum small { font-size: 13px; font-weight: 500; color: var(--muted); }
.stk-score.good .snum, .snum.good, .sc.good { color: var(--up); }
.stk-score.mid .snum, .snum.mid, .sc.mid { color: var(--warn); }
.stk-score.bad .snum, .snum.bad, .sc.bad { color: var(--down); }
.stk-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.btn.on { border-color: var(--up); color: var(--up); }
.stk-tabs-wrap { position: sticky; top: 0; z-index: 5; margin: -6px 0; padding: 6px 0; background: var(--bg); }
.stk-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.stk-tabs::-webkit-scrollbar { display: none; }
.stk-tabs .tab { white-space: nowrap; }
.stk-body { display: grid; gap: 16px; min-width: 0; }
.stk-body h4 { font-size: 12px; font-weight: 600; margin: 16px 0 8px; color: var(--text-2); }
.stk-grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.stk-range { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.stk-range .bar { flex: 1; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--down), var(--warn), var(--up)); position: relative; opacity: .8; }
.stk-range .bar i { position: absolute; top: -4px; width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; background: var(--text); }
.stk-kv { display: grid; gap: 0; margin-top: 6px; }
.stk-kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.stk-kv > div:last-child { border-bottom: 0; }
.stk-kv > div b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.stk-kv.cols { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.stk-kv.cols > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.stk-hl { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; }
.stk-hl li { position: relative; padding-left: 16px; }
.stk-hl li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.stk-hl li.t-up::before { background: var(--up); }
.stk-hl li.t-down::before { background: var(--down); }
.stk-desc { margin-top: 12px; font-size: 13px; }
.stk-desc summary { cursor: pointer; color: var(--text-2); }
.stk-desc p { margin-top: 8px; line-height: 1.6; color: var(--text-2); }
.stk-note { padding: 10px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; margin-top: 10px; }

/* puntuación y consenso */
.stk-score-big { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.stk-score-big > div { display: grid; gap: 2px; }
.stk-score-big .snum, .stk-cons-score .snum { font-size: 44px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stk-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.pillar { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; }
.pillar .snum { font-weight: 700; font-variant-numeric: tabular-nums; }
.pillar .items { display: grid; gap: 4px; font-size: 12px; }
.pillar .items > div { display: grid; grid-template-columns: 1fr auto 28px; gap: 8px; }
.pillar .items .sc { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.score-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.score-bar i { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.score-bar.good i { background: var(--up); } .score-bar.mid i { background: var(--warn); } .score-bar.bad i { background: var(--down); }
.stk-cons { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.stk-cons-score { display: grid; gap: 2px; }
.tgt-range { margin-top: 16px; display: grid; gap: 6px; }
.tgt-range .bar { height: 6px; border-radius: 3px; background: var(--surface-3); position: relative; }
.tgt-range .bar i { position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--surface); }
.tgt-range i.now, .dot.now { background: var(--text); }
.tgt-range i.mean, .dot.mean { background: var(--accent); }
.dot.now, .dot.mean { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.rec-bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px; }
.rec-bar.thin { height: 10px; border-radius: 4px; }
.rec-bar i { display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 600; color: #fff; min-width: 2px; }
.rec-bar .sb, .rec-legend .sb { background: #15803d; } .rec-bar .b, .rec-legend .b { background: #4ade80; } .rec-bar .h, .rec-legend .h { background: #94a3b8; }
.rec-bar .s, .rec-legend .s { background: #f97316; } .rec-bar .ss, .rec-legend .ss { background: #dc2626; }
.rec-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.rec-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rec-trend { display: grid; gap: 8px; max-width: 560px; }
.rec-trend > div { display: grid; gap: 3px; }

/* centro de datos */
.stk-datos-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.stk-sec { margin: 6px 0 10px; font-size: 15px; }
.met-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.met { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.met-head { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.info-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; background: none; color: var(--muted); border-radius: 6px; cursor: pointer; }
.info-btn:hover { background: var(--surface-3); color: var(--text); }
.met-val { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.met-sub { min-height: 18px; }
.met-st { display: flex; gap: 6px; align-items: baseline; }
.met-st::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transform: translateY(-1px); }
.met-st.g::before { background: var(--up); } .met-st.w::before { background: var(--warn); }
.met-st.w { color: var(--warn-text, var(--warn)); }
.met-chart { margin-top: 8px; height: 84px; cursor: crosshair; }
.met-foot { display: flex; justify-content: space-between; gap: 8px; }
.spark { display: block; width: 100%; height: 84px; overflow: visible; }
.spark .b-up { fill: var(--up); opacity: .85; } .spark .b-down { fill: var(--down); opacity: .85; }
.spark .axis { stroke: var(--border-strong); stroke-width: 1; }
.spark .med { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.spark .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.spark .dot { fill: var(--accent); }
.spark-empty { height: 84px; display: grid; place-items: center; }
.stk-tip { position: fixed; z-index: 1000; pointer-events: none; padding: 8px 10px; border-radius: 8px; background: var(--tooltip-bg, #0b1220); border: 1px solid var(--border-strong); color: var(--text); font-size: 12px; line-height: 1.45; box-shadow: var(--shadow-2); opacity: 0; transition: opacity .1s; max-width: 280px; }
.stk-tip.on { opacity: 1; }
.info-pop { position: absolute; z-index: 1000; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 14px 16px; font-size: 13px; line-height: 1.5; display: grid; gap: 6px; }
.info-pop .close { position: absolute; top: 6px; right: 6px; }
.info-pop p { margin: 0; color: var(--text-2); }
.warn-t { color: var(--warn); }

/* comparables */
.chip .dot-s, .dot-s { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--up); margin-right: 6px; vertical-align: 1px; }
.stk-peers tbody tr[data-go] { cursor: pointer; }
.stk-peers tbody tr[data-go]:hover td { background: var(--surface-2); }
.stk-peers .self-row td { background: var(--up-soft); }
.stk-peers .med-row td { background: var(--surface-2); }
.stk-co { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.stk-co > div { display: grid; min-width: 0; }
.stk-co .small { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-co .asset-av { width: 28px; height: 28px; font-size: 8px; flex: none; }
.sbadge { display: inline-block; min-width: 34px; text-align: center; padding: 1px 6px; border-radius: 6px; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid var(--border-strong); }
.sbadge.good { color: var(--up); border-color: rgba(34, 197, 94, .4); background: var(--up-soft); }
.sbadge.mid { color: var(--warn); border-color: rgba(251, 191, 36, .4); background: var(--warn-soft); }
.sbadge.bad { color: var(--down); border-color: rgba(248, 113, 113, .4); background: var(--down-soft); }
.v-hi { color: var(--warn); font-weight: 600; } .v-lo { color: var(--up); font-weight: 600; }

/* técnico */
.stk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.stk-kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stk-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stk-kpis > div { display: grid; gap: 2px; align-content: start; }
.stk-kpis b { font-size: 22px; font-variant-numeric: tabular-nums; }
.stk-kpis .kb { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; border-top: 3px solid var(--border-strong); }
.stk-kpis .kb.buy { border-top-color: var(--up); } .stk-kpis .kb.sell { border-top-color: var(--down); }
.earn-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; height: 150px; position: relative; cursor: crosshair; }
.earn-bars::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--border-strong); }
.earn-bars .eb { position: relative; }
.earn-bars .eb i { position: absolute; left: 10%; right: 10%; border-radius: 3px; }
.earn-bars .eb i.up { bottom: 50%; background: var(--up); }
.earn-bars .eb i.down { top: 50%; background: var(--down); }
.season { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 200px; margin: 10px 0 4px; cursor: crosshair; }
.season .sm { display: grid; grid-template-rows: 18px 1fr 18px; text-align: center; font-size: 11px; min-width: 0; }
.season .col { position: relative; }
.season .col i { position: absolute; left: 12%; right: 12%; bottom: 0; border-radius: 4px 4px 0 0; }
.season .col i.up { background: var(--up); opacity: .85; } .season .col i.down { background: var(--down); opacity: .85; top: 0; bottom: auto; border-radius: 0 0 4px 4px; }
.season .v { font-weight: 600; white-space: nowrap; }
.season .m { color: var(--muted); }
.season .best .m { color: var(--text); font-weight: 700; }
.heat { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.heat th, .heat td { padding: 6px 6px; text-align: center; border: 1px solid var(--border); white-space: nowrap; }
.heat th { font-weight: 600; font-size: 11px; line-height: 1.4; }
.heat td.now { outline: 2px solid var(--text); outline-offset: -2px; }
.heat td.now .small { display: block; font-size: 9px; text-transform: uppercase; color: var(--text-2); }

/* proyección */
.proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.proj { border-top: 3px solid var(--border-strong); display: grid; gap: 4px; }
.proj.adv { border-top-color: var(--down); } .proj.base { border-top-color: var(--accent); } .proj.fav { border-top-color: var(--up); }
.proj .big { font-size: 24px; font-variant-numeric: tabular-nums; }
.proj-hyp input { width: 110px; padding: 6px 8px; }
.proj-hyp td { vertical-align: middle; }
#projHyp summary { cursor: pointer; }
.sw-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.sw-dot.buy { background: var(--up); } .sw-dot.sell { background: var(--down); } .sw-dot.multi { background: #f5b301; }

@media (max-width: 1100px) {
  .stk-head { grid-template-columns: minmax(0, 1fr) auto; }
  .stk-scores { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .stk-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .stk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stk-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stk-price { text-align: left; }
  .stk-id h2 { font-size: 17px; white-space: normal; }
  .stk-kv.cols { grid-template-columns: minmax(0, 1fr); }
  .stk-kv.cols > div:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--border); }
  .stk-score-big, .stk-cons { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .proj-grid, .stk-kpis.three { grid-template-columns: minmax(0, 1fr); }
  .met-grid { grid-template-columns: minmax(0, 1fr); }
  .season { gap: 2px; height: 170px; }
  .season .v { font-size: 9px; }
  .stk-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stk-kpis b { font-size: 18px; }
}

/* ===== Menú lateral por bloques plegables ===== */
#nav .nav-sec + .nav-sec { margin-top: 2px; }
#nav .nav-group { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; cursor: pointer; padding: 6px 10px; margin: 12px 0 2px; border-radius: 6px; font-family: inherit; text-align: left; }
#nav .nav-group:hover { color: var(--text-2); }
#nav .nav-group .ico { width: 14px; height: 14px; opacity: .7; transition: transform .15s; }
#nav .nav-sec.closed .nav-group .ico { transform: rotate(-90deg); }
#nav .nav-sec.closed .nav-items { display: none; }
#nav .nav-sec.closed:has(a.active) .nav-items { display: block; }
.sidebar-foot .user-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; border-radius: 8px; padding: 4px; margin: -4px; }
.sidebar-foot .user-link:hover, .sidebar-foot .user-link.active { background: var(--surface-2); }
.sidebar-foot a.btn.active { color: var(--primary); }

/* ===== Ingresos y gastos ===== */
.bud-month { display: flex; align-items: center; gap: 8px; padding: 10px 14px; flex-wrap: wrap; }
.bud-month b { font-size: 15px; text-transform: capitalize; min-width: 150px; text-align: center; }
.bud-table { width: 100%; }
.bud-table td { padding: 9px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.bud-table tr:last-child td { border-bottom: 0; }
.bud-table td:first-child b, .bud-table td:first-child .small { display: block; }
.bud-table td.num .small { display: block; }
.bud-table .row-actions { width: 1%; white-space: nowrap; text-align: right; }
.bud-inactive summary { cursor: pointer; color: var(--muted); }
.bud-donut { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; }
.dca-src { display: flex; gap: 10px 18px; align-items: center; flex-wrap: wrap; margin: 14px 0; font-size: 13px; }
.dca-src input[type=number] { width: 110px; }
.dca-table input { width: 90px; text-align: right; }
.dca-table .row-actions { white-space: nowrap; text-align: right; }
.dca-sum { margin-top: 8px; }
.dca-proj { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; display: grid; gap: 6px; }
.dca-proj input { width: 70px; margin: 0 4px; }
@media (max-width: 640px) { .bud-donut { grid-template-columns: 1fr; } .dca-table input { width: 64px; } }
.dca-src .check { white-space: nowrap; }
.dca-src input[type=radio] { width: 16px; height: 16px; padding: 0; margin: 0; flex: none; accent-color: var(--primary); box-shadow: none; }

/* ===== Menos ruido en las secciones densas ===== */
.add-card { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; }
.add-card .ico.lg { width: 18px; height: 18px; }
#secMore .mkt-card { padding: 12px 14px; }
#secMore .mkt-card .mkt-price { font-size: 17px; }
#secMore .mkt-card [data-chart]:empty { display: none; }
.card .empty { padding: 22px 12px; }
#txTable td, #txTable th { padding-top: 8px; padding-bottom: 8px; }
.met { gap: 3px; }
.met-st .muted { font-weight: 400; }
#txTable .asset-cell .txt { max-width: 260px; }
#txTable .asset-cell .nm, #txTable .asset-cell .sym { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
@media (max-width: 640px) {
  .dca-table .asset-av { display: none; }
  .dca-table td, .dca-table th { padding: 8px 4px; }
  .dca-table input { width: 54px; padding: 6px; }
  .dca-table .nm { font-size: 13px; white-space: normal; }
  .dca-table .sym { font-size: 11px; }
  .dca-src input[type=number] { width: 90px; }
  .dca-table .m-hide { display: none; }
  .dca-table .row-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .dca-table .row-actions .btn { padding: 4px 6px; }
  .dca-table td.num b { font-size: 12px; }
}

/* ---------- Análisis · Finanzas (informes, dividendos, beneficios) ---------- */
.fin-sub { margin: 0 0 12px; }
.fin-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; }
.fin-card { padding: 0; overflow: hidden; }
.fin-card > p { padding: 0 14px 12px; }
.fin-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.fin-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.fin-table th, .fin-table td { padding: 8px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
.fin-table thead th { font-weight: 600; color: var(--muted); font-size: 12px; background: var(--surface); }
.fin-table tbody th, .fin-table thead th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--surface); font-weight: 500; color: var(--text-2); min-width: 190px; max-width: 240px; white-space: normal; box-shadow: 1px 0 0 var(--border); }
.fin-table tbody tr:last-child > * { border-bottom: 0; }
.fin-table tr.key th, .fin-table tr.key td { font-weight: 650; color: var(--text); }
.fin-table tr[data-r] { cursor: pointer; }
.fin-table tr[data-r]:hover > * { background: var(--surface-2); }
.fin-table tr.sel > * { background: var(--primary-soft) !important; }
.fin-table tr.sel th { box-shadow: inset 3px 0 0 var(--primary), 1px 0 0 var(--border); }
.fin-table td.ttm, .fin-table th.fut, .fin-table td.fut { color: var(--muted); font-style: italic; }
.fin-table td.ttm { background: var(--surface-2); }
.fin-g { display: block; font-size: 11px; font-weight: 500; margin-top: 2px; color: var(--muted); }
.fin-g.up { color: var(--up); } .fin-g.down { color: var(--down); }
.fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; }
.fin-kpi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fin-kpi b { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .fin-table tbody th, .fin-table thead th:first-child { min-width: 130px; max-width: 150px; font-size: 12px; }
  .fin-table th, .fin-table td { padding: 7px 9px; }
  .fin-kpis { grid-template-columns: 1fr 1fr; }
  .fin-kpi b { font-size: 16px; }
}
.stk-body > *, #finBody > * { min-width: 0; max-width: 100%; }
#finBody { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
#finBody > .card { margin: 0; }
.fin-bar .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.fin-bar .chips::-webkit-scrollbar { display: none; }
.fin-bar .chip { white-space: nowrap; }