/* QuantStock — tokens y componentes base compartidos.
   El login es autocontenido a propósito (se copia tal cual); el resto de
   páginas parten de aquí. */

:root {
	--color-sky: #0ea5e9;
	--color-cyan: #22d3ee;
	--color-teal: #14b8a6;
	--color-green: #10b981;
	--color-red: #f43f5e;
	--color-amber: #f59e0b;
	--color-violet: #a78bfa;
	--color-indigo: #818cf8;
	--color-orange: #fb923c;

	--color-bg-darker: #030509;
	--color-bg-dark: #070c16;
	--color-surface: rgba(255, 255, 255, 0.045);
	--color-border: rgba(255, 255, 255, 0.12);

	--color-text-primary: #f1f5f9;
	--color-text-secondary: #aab8ca;
	--color-text-muted: #8b9bb0;

	--gradient-text: linear-gradient(135deg, #e0f2fe 0%, #67e8f9 45%, #5eead4 100%);
	--glass-blur: blur(24px) saturate(170%);

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;

	--transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
	scrollbar-gutter: stable;
}

body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: var(--color-bg-darker);
	color: var(--color-text-primary);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

/* ─── Ambiente: focos azules a la deriva ──────────────────────────────────
   Cada foco es un radial-gradient que se desvanece a transparente — da el
   mismo aspecto difuminado que `filter: blur()` pero sin su coste, algo que
   importa acá porque encima hay muchas cards con backdrop-filter.
   Se anima sólo `transform`, así el navegador lo compone en GPU y no
   repinta en cada frame. */
.bg-field {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	contain: strict;
}

.bg-field span {
	position: absolute;
	display: block;
	border-radius: 50%;
	will-change: transform;
}

.bg-field span:nth-child(1) {
	width: 60vw;
	height: 60vw;
	top: -18vw;
	left: -12vw;
	background: radial-gradient(circle, rgba(37, 99, 235, 0.30) 0%, rgba(37, 99, 235, 0) 68%);
	animation: bgDrift1 46s ease-in-out infinite alternate;
}

.bg-field span:nth-child(2) {
	width: 48vw;
	height: 48vw;
	top: -10vw;
	right: -10vw;
	background: radial-gradient(circle, rgba(67, 56, 202, 0.28) 0%, rgba(67, 56, 202, 0) 68%);
	animation: bgDrift2 58s ease-in-out infinite alternate;
}

.bg-field span:nth-child(3) {
	width: 66vw;
	height: 66vw;
	bottom: -26vw;
	left: 18vw;
	background: radial-gradient(circle, rgba(29, 78, 216, 0.26) 0%, rgba(29, 78, 216, 0) 70%);
	animation: bgDrift3 64s ease-in-out infinite alternate;
}

.bg-field span:nth-child(4) {
	width: 34vw;
	height: 34vw;
	top: 34%;
	left: -8vw;
	background: radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, rgba(56, 189, 248, 0) 70%);
	animation: bgDrift4 52s ease-in-out infinite alternate;
}

.bg-field span:nth-child(5) {
	width: 40vw;
	height: 40vw;
	bottom: -12vw;
	right: -8vw;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.20) 0%, rgba(59, 130, 246, 0) 70%);
	animation: bgDrift5 70s ease-in-out infinite alternate;
}

@keyframes bgDrift1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vw, 10vh, 0) scale(1.14); } }
@keyframes bgDrift2 { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(-12vw, 14vh, 0) scale(0.94); } }
@keyframes bgDrift3 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-16vw, -12vh, 0) scale(1.12); } }
@keyframes bgDrift4 { from { transform: translate3d(0, 0, 0) scale(0.96); } to { transform: translate3d(18vw, -16vh, 0) scale(1.18); } }
@keyframes bgDrift5 { from { transform: translate3d(0, 0, 0) scale(1.06); } to { transform: translate3d(-14vw, -10vh, 0) scale(0.92); } }

@media (prefers-reduced-motion: reduce) {
	.bg-field span { animation: none; }
}

.shell {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 24px 64px;
}

/* ─── Barra superior ─────────────────────────────────────────────────────── */
.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	margin-bottom: 28px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), rgba(11, 18, 32, 0.4);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.brand svg {
	width: 34px;
	height: 34px;
	overflow: visible;
}

.brand-name {
	font-size: 19px;
	letter-spacing: -0.015em;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.brand-name .tw-thin {
	font-weight: 300;
}
.brand-name .tw-bold {
	font-weight: 600;
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.user-email {
	font-size: 13px;
	color: var(--color-text-secondary);
}

/* ─── Botones ────────────────────────────────────────────────────────────── */
.btn {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.04);
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-text-primary);
	border-color: rgba(255, 255, 255, 0.2);
}

.btn-accent {
	border-color: rgba(34, 211, 238, 0.38);
	background: linear-gradient(135deg, rgba(14, 165, 233, 0.24), rgba(20, 184, 166, 0.2));
	color: #d8f7ff;
}

.btn-accent:hover {
	border-color: rgba(34, 211, 238, 0.6);
	color: #eafdff;
}

/* ─── Tarjetas y layout ──────────────────────────────────────────────────── */
.panel {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)), rgba(11, 18, 32, 0.4);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
	overflow: hidden;
}

.panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.panel-title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.panel-sub {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-top: 2px;
}

.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}

.stat {
	padding: 16px 18px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)), rgba(11, 18, 32, 0.38);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.stat-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.stat-value {
	font-size: 26px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	margin-top: 6px;
}

/* ─── Controles ──────────────────────────────────────────────────────────── */
.controls {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.input,
.select {
	font-family: inherit;
	font-size: 13px;
	padding: 9px 12px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-text-primary);
	transition: all var(--transition-fast);
}

.input::placeholder {
	color: var(--color-text-muted);
}

.input:focus,
.select:focus {
	outline: none;
	border-color: rgba(34, 211, 238, 0.55);
	box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
}

.select option {
	background: var(--color-bg-dark);
}

/* ─── Tabla ──────────────────────────────────────────────────────────────── */
.table-wrap {
	overflow-x: auto;
}

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

thead th {
	text-align: left;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	padding: 12px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	white-space: nowrap;
}

tbody td {
	padding: 13px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
	color: var(--color-text-secondary);
}

tbody tr:last-child td {
	border-bottom: none;
}

tbody tr:hover td {
	background: rgba(255, 255, 255, 0.025);
}

.sym {
	font-weight: 700;
	color: var(--color-text-primary);
	letter-spacing: 0.03em;
}

.tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid transparent;
}

.tag-index {
	color: #7dd3fc;
	background: rgba(14, 165, 233, 0.12);
	border-color: rgba(14, 165, 233, 0.28);
}
.tag-etf {
	color: #5eead4;
	background: rgba(20, 184, 166, 0.12);
	border-color: rgba(20, 184, 166, 0.28);
}
.tag-stock {
	color: #cbd5e1;
	background: rgba(148, 163, 184, 0.12);
	border-color: rgba(148, 163, 184, 0.28);
}

/* ─── Estados ────────────────────────────────────────────────────────────── */
.state {
	padding: 44px 20px;
	text-align: center;
	color: var(--color-text-muted);
	font-size: 14px;
}

.state-error {
	color: #fda4af;
}

.spinner {
	width: 20px;
	height: 20px;
	margin: 0 auto 12px;
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-top-color: var(--color-cyan);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.spinner {
		animation: none;
	}
}

@media (max-width: 640px) {
	.shell {
		padding: 16px 14px 48px;
	}
	.topbar {
		flex-wrap: wrap;
	}
	.user-email {
		display: none;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   App shell: dock flotante + navegación vertical por workspaces
   (docs/design/quantstock-dock-workspace-navigation.md)
   ════════════════════════════════════════════════════════════════════════ */

html, body.app-shell {
	height: 100%;
	overflow: hidden; /* el scroll vive en .workspace-scroll, no en la página */
}

/* ─── Dock ───────────────────────────────────────────────────────────────── */
.top-dock {
	position: fixed;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 9px 14px;
	background: rgba(10, 20, 34, 0.82);
	backdrop-filter: blur(22px) saturate(160%);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	max-width: calc(100vw - 24px);
}

.dock-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-right: 16px;
	margin-right: 6px;
	flex-shrink: 0;
}

.dock-brand-name {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.3px;
	color: var(--color-text-primary);
	white-space: nowrap;
}

.dock-brand-name i { font-style: normal; color: var(--color-cyan); }

.dock-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	flex-shrink: 0;
}

.dock-logo svg {
	width: 27px;
	height: 27px;
	overflow: visible;
}

.dock-nav {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
}

.dock-item {
	position: relative;
	z-index: 1; /* por encima del indicador que viaja por detrás */
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: transparent;
	border: 1px solid transparent;
	padding: 9px 13px;
	border-radius: 10px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 180ms ease, background 180ms ease;
}

.dock-item svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.dock-item:hover {
	color: var(--color-text-primary);
	background: rgba(255, 255, 255, 0.06);
}

/* El fondo y el borde del activo los pone el indicador que viaja; el botón
   sólo cambia de color. Opacidad más baja que en la barra de Analyze a
   propósito: el dock tiene un fondo casi opaco detrás y el mismo azul al 55%
   se leía sólido. */
.dock-item.is-active {
	color: #dbeafe;
	border-color: transparent;
}

/* ── Indicador deslizante ──
   Uno solo para todo el dock: setActive() le pasa el ancho y la posición del
   ítem activo y el navegador interpola el viaje. Se animan transform y width,
   no left, para que el recorrido lo componga la GPU. */
.dock-marker {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	border-radius: 10px;
	background: rgba(37, 99, 235, 0.16);
	box-shadow: 0 0 16px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	opacity: 0;
	pointer-events: none;
	transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
		width 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 200ms ease;
}

/* Colocación inicial: sin transición, si no el indicador entra volando desde
   el borde izquierdo en cada carga. */
.dock-marker.is-placing {
	transition: none;
}

.dock-marker.is-ready {
	opacity: 1;
}

/* Ángulo registrado como propiedad para poder animarlo: sin @property el
   navegador interpola el gradiente entero (o no lo interpola). Donde no está
   soportado el borde queda fijo, que sigue siendo válido. */
@property --qs-ring {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

/* Borde vivo: un gradiente cónico recortado a un anillo de 1.5px con dos
   máscaras en XOR. Sólo se anima el ángulo, así que no hay reflow: el
   compositor repinta el pseudo-elemento y nada más. */
.dock-marker::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(from var(--qs-ring),
		rgba(96, 165, 250, 0) 0deg,
		rgba(96, 165, 250, 0.4) 55deg,
		#67e8f9 120deg,
		#bfdbfe 165deg,
		rgba(96, 165, 250, 0.4) 240deg,
		rgba(96, 165, 250, 0) 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: dockRingSpin 3.4s linear infinite;
	pointer-events: none;
}

/* El workspace agéntico gira en violeta, como el resto de su identidad. */
.dock-marker.is-ai {
	background: rgba(124, 58, 237, 0.16);
	box-shadow: 0 0 16px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dock-marker.is-ai::before {
	background: conic-gradient(from var(--qs-ring),
		rgba(167, 139, 250, 0) 0deg,
		rgba(167, 139, 250, 0.4) 55deg,
		#c4b5fd 120deg,
		#e9d5ff 165deg,
		rgba(167, 139, 250, 0.4) 240deg,
		rgba(167, 139, 250, 0) 360deg);
}

@keyframes dockRingSpin {
	to { --qs-ring: 360deg; }
}

.dock-item.is-active svg {
	color: #93c5fd;
}

.dock-item:focus-visible {
	outline: 2px solid rgba(96, 165, 250, 0.6);
	outline-offset: 2px;
}

/* AI Workplace se distingue en violeta: es el único workspace agéntico. */
.dock-item[data-ws="ai-workplace"]:not(.is-active) { color: #c4b5fd; }

.dock-sep {
	width: 1px;
	height: 20px;
	margin: 0 6px;
	background: rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}

.dock-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--color-text-secondary);
	cursor: pointer;
	flex-shrink: 0;
	transition: all 180ms ease;
}

.dock-icon-btn svg {
	width: 19px;
	height: 19px;
}

.dock-icon-btn:hover {
	color: var(--color-text-primary);
	background: rgba(255, 255, 255, 0.06);
}

.dock-status {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(52, 211, 153, 0.12);
	border: 1px solid rgba(52, 211, 153, 0.28);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: var(--color-green);
	margin: 0 10px;
	flex-shrink: 0;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.dock-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-green);
	box-shadow: 0 0 9px var(--color-green);
	animation: dockStatusPulse 2.2s ease-out infinite;
	flex-shrink: 0;
}

.dock-status-dot.is-down {
	background: var(--color-red);
	box-shadow: 0 0 9px var(--color-red);
	animation: none;
}

.dock-status:has(.dock-status-dot.is-down) {
	background: rgba(244, 63, 94, 0.12);
	border-color: rgba(244, 63, 94, 0.28);
	color: var(--color-red);
}

@keyframes dockStatusPulse {
	0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
	70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
	100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.dock-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(150deg, #2dd4bf, #6366f1);
	border: 1.5px solid rgba(255, 255, 255, 0.2);
	font-size: 13px;
	font-weight: 700;
	color: #f8fafc;
	flex-shrink: 0;
	cursor: pointer;
	transition: filter 180ms ease;
}

.dock-avatar:hover { filter: brightness(1.1); }

/* Laptop: dock un poco más compacto */
@media (max-width: 1180px) {
	.top-dock { gap: 0; padding: 7px 10px; }
	.dock-item { padding: 8px 10px; }
	.dock-brand { padding-right: 10px; }
}

/* Tablet: nombres fuera, sólo íconos + scroll horizontal si hiciera falta */
@media (max-width: 860px) {
	.dock-item-label { display: none; }
	.dock-item { padding: 9px; }
	#dockStatusLabel { display: none; }
	.dock-status { padding: 6px; }
}

@media (max-width: 560px) {
	.dock-icon-btn:not(.dock-icon-search) { display: none; }
	.dock-avatar { display: none; }
	.dock-brand-name { display: none; }
}

/* ─── Contenedor de scroll de workspaces ─────────────────────────────────── */
.workspace-scroll {
	height: 100vh;
	width: 100vw;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-y: contain;
	/* La navegación entre workspaces sigue funcionando igual (wheel, dock,
	   teclado): esto sólo esconde el cromo nativo de la scrollbar, que no
	   pega con una interfaz que se presenta como "una sola app", no una
	   página larga. */
	scrollbar-width: none;
}

.workspace-scroll::-webkit-scrollbar {
	display: none;
}

/* Snap nativo apagado mientras el JS conduce una transición programática
   (dock, teclado): mandatory + scrollTo suave compiten y el navegador corta
   la animación a los pocos píxeles. Ver goToWorkspace() en app.js. */
.workspace-scroll.is-navigating {
	scroll-snap-type: none;
	/* El scroll programático lleva su propia curva (animateScroll): si el
	   navegador además suaviza cada asignación de scrollTop, las dos curvas
	   se pisan y el final llega a tirones. */
	scroll-behavior: auto;
}

.workspace-section {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.workspace-inner {
	position: relative;
	z-index: 1;
	flex: 1;
	width: 100%;
	/* Sin tope de max-width: aprovecha todo el ancho de la ventana. En
	   ultrawide se limita un poco la cuadrícula (ver .dash-grid) para que
	   las cards no queden absurdamente anchas, pero el fondo y el header
	   siguen ocupando el 100%. */
	margin: 0 auto;
	padding: 68px 28px 14px;
	display: flex;
	flex-direction: column;
	min-height: 0; /* deja que flex:1 realmente pueda encogerse dentro de 100vh */
	/* Spec: cada workspace ocupa 100vh sin scroll. El contenido debe estar
	   compactado para entrar; cualquier overflow se oculta en vez de generar
	   scrollbar (que rompe el "no sidebar tradicional, una sola pantalla"). */
	overflow: hidden;
}

@media (max-width: 860px) {
	.workspace-inner { padding: 60px 18px 14px; }
}

/* Placeholder de los workspaces sin contenido todavía */
/* Entrada del workspace: el scroll ya lo trae a cuadro, esto le da el empujón
   final para que se sienta que el contenido "llega" en vez de aparecer. Se
   anima el contenedor interno, no la sección: la sección es la que hace snap y
   moverla pelearía con el scroll.

   Sólo transform, nunca opacity: la animación se dispara con la sección ya
   visible, así que arrancar desde opacity 0 apagaba la pantalla entera y se
   veía como un parpadeo negro. */
.workspace-section.is-entering .workspace-inner {
	animation: workspaceEnter 820ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
	will-change: transform;
}

@keyframes workspaceEnter {
	from { transform: translateY(30px) scale(0.992); }
	to { transform: none; }
}

.workspace-placeholder {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	color: var(--color-text-muted);
}

.workspace-placeholder .wp-icon {
	width: 56px;
	height: 56px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015));
	border: 1px solid var(--color-border);
	margin-bottom: 8px;
}

.workspace-placeholder .wp-icon svg {
	width: 26px;
	height: 26px;
	color: #63f5df;
	opacity: 0.7;
}

.workspace-placeholder h2 {
	font-size: 22px;
	font-weight: 600;
	color: var(--color-text-primary);
	letter-spacing: -0.01em;
}

.workspace-placeholder p {
	font-size: 13px;
	max-width: 360px;
}

@media (prefers-reduced-motion: reduce) {
	.workspace-scroll { scroll-behavior: auto; }
	.dock-item, .dock-item svg, .dock-item .dock-item-label { transition: none; }
	.dock-status-dot { animation: none; }
	/* El anillo se queda quieto pero sigue marcando el activo. */
	.dock-marker { transition: opacity 200ms ease; }
	.dock-marker::before { animation: none; }
	.workspace-section.is-entering .workspace-inner { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Compartido: segmented + listas de riesgo
   Vivían en el bloque del Dashboard v1 pero los usan Analyze, Trade y
   Portfolio, así que sobreviven a su rediseño.
   ════════════════════════════════════════════════════════════════════════ */

.segmented {
	display: flex;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.segmented button {
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	padding: 7px 12px;
	border: none;
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.segmented button + button {
	border-left: 1px solid var(--color-border);
}

.segmented button:hover {
	color: var(--color-text-primary);
	background: rgba(255, 255, 255, 0.04);
}

.segmented button.is-active {
	color: #eafdff;
	background: linear-gradient(135deg, rgba(14, 165, 233, 0.24), rgba(20, 184, 166, 0.2));
}

.risk-list {
	padding: 2px 14px 6px;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
}

.risk-item {
	display: flex;
	gap: 8px;
	padding: 5px 2px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.risk-item:last-child { border-bottom: none; }

.risk-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.risk-dot.critical { background: #fb7185; }
.risk-dot.important { background: #f59e0b; }
.risk-dot.info { background: #38bdf8; }

.risk-text { font-size: 11px; color: var(--color-text-secondary); line-height: 1.3; }

/* ════════════════════════════════════════════════════════════════════════
   Dashboard (docs/design/quantstock-dashboard-modal-spec.md)
   Portada visual de cuatro bloques. Todo entra en una pantalla; el detalle
   por símbolo vive en el modal, no acá.
   ════════════════════════════════════════════════════════════════════════ */

.db-inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Dos cajas que se reparten la pantalla: símbolos arriba, portafolio abajo. */
.db-box {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* La mitad de abajo lleva cinco franjas de datos contra las dos filas de
   tarjetas de arriba: se le da algo más de alto para que respiren. */
.db-box:last-child { flex: 1.14 1 0; }

.db-box-h {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 14px 9px;
	flex: none;
}

.db-box-t {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	flex: none;
}

.db-box-s {
	font-size: 12px;
	color: var(--color-text-muted);
}

.db-box-h .segmented { align-self: center; border-radius: 10px; }
.db-box-h .pf-icon-btn { align-self: center; width: 32px; height: 32px; }
.db-box-h .pf-icon-btn svg { width: 15px; height: 15px; }

/* Card base: más liviana que .panel — acá el peso visual lo llevan los
   datos y las sparklines, no el cromo. */
.db-card {
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-radius: 14px;
	background: rgba(8, 13, 24, 0.72);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
}

.db-spark { display: block; width: 100%; height: 100%; }

/* ─── Top Symbols Today ───────────────────────────────────────────────── */
.db-syms {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 1fr 1fr;
	gap: 10px;
	min-height: 0;
	padding: 0 12px 12px;
}

.db-sy {
	padding: 14px 16px 13px;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.db-sy:hover { border-color: rgba(34, 211, 238, 0.40); transform: translateY(-2px); }
.db-sy:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 2px; }

.db-sy.is-featured {
	border-color: rgba(45, 212, 191, 0.55);
	box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.2), 0 0 34px rgba(45, 212, 191, 0.14);
}

.db-sy-star { position: absolute; top: 11px; right: 13px; color: var(--color-cyan); }
/* La estrella ocupa la esquina: el bloque de Confidence se corre para no pisarla. */
.db-sy.is-featured .db-sy-c { padding-right: 18px; }
.db-sy-star svg { width: 14px; height: 14px; }

.db-sy-h { display: flex; align-items: flex-start; gap: 12px; flex: none; }

.db-sy-lg {
	width: 60px;
	height: 60px;
	border-radius: 16px;
	flex: none;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.db-sy-lg svg { transform: scale(1.45); }

.db-sy-n { flex: 1; min-width: 0; }

.db-sy-t {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.4px;
	display: block;
	line-height: 1.1;
}

.db-sy-st {
	font-size: 14px;
	font-weight: 500;
	margin-top: 3px;
	display: block;
	/* Nombres de estrategia largos ("Bull Put Credit Spread") no rompen la card. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Logo de texto para tickers sin marca registrada en DB_LOGO. */
.db-sy-lg-tx { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; color: var(--color-text-primary); }

.db-syms-empty {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	align-self: center;
	justify-self: center;
	max-width: 420px;
	text-align: center;
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.5;
}

.db-sy-c { text-align: right; flex: none; padding-top: 1px; }
.db-sy-c span { font-size: 12px; color: var(--color-text-muted); font-weight: 500; display: block; }

.db-sy-c b {
	font-size: 19px;
	font-weight: 600;
	display: block;
	letter-spacing: -0.4px;
	margin-top: 1px;
	font-variant-numeric: tabular-nums;
}

.db-sy-g { flex: 1; min-height: 0; margin-top: 6px; }

.db-sy-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 9px;
	align-self: flex-start;
	margin-top: 10px;
	flex: none;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.07);
}

.db-sy-tag svg { width: 14px; height: 14px; flex: none; }
.db-sy-tag span { color: var(--color-text-secondary); }

/* ════════════════════════════════════════════════════════════════════════
   Analyze (docs/design/quantstock-dashboard-modal-spec.md — flujo de un
   solo símbolo: se entra desde el modal del Dashboard vía "Open in
   Analyze"). Todo en una pantalla, sin scroll propio, mismo principio que
   el resto de los workspaces.
   ════════════════════════════════════════════════════════════════════════ */

/* Superficie base de Analyze: borde fino, fondo translúcido y blur. La usan
   la barra de símbolo, el chart, las mini cards y el rail. */
/* Fondo oscuro propio, no un velo blanco sobre el ambiente: con overlay
   blanco + saturate las cards levantaban el color del fondo y se veían
   claras. Acá la card impone su propio negro y el borde la separa. */
.glass {
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-radius: 14px;
	background: rgba(8, 13, 24, 0.72);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
}

.az-inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ─── Barra de símbolo ───────────────────────────────────────────────────── */
.az-symbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	flex: none;
}

.az-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--color-border);
	width: 150px;
}

.az-search svg { width: 15px; height: 15px; color: var(--color-text-muted); flex-shrink: 0; }

.az-search input {
	border: 0;
	background: none;
	color: var(--color-text-primary);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	outline: none;
	width: 100%;
	letter-spacing: 0.2px;
}

.az-search input::placeholder { color: var(--color-text-muted); font-weight: 400; }

.az-search-x {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	display: grid;
	place-items: center;
	color: var(--color-text-secondary);
	cursor: pointer;
	flex-shrink: 0;
	font-size: 11px;
	border: 0;
	font-family: inherit;
}

.az-symchip { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 12px; }
.az-symchip-lg { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; }
.az-symchip-tk { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.1; }
.az-symchip-nm { font-size: 11.5px; color: var(--color-text-muted); margin-top: 1px; }

.az-pricebox { display: flex; flex-direction: column; gap: 1px; }
.az-pricebox-p { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px; }
.az-pricebox-p svg { width: 15px; height: 15px; }
.az-pricebox-sub { font-size: 12px; color: var(--color-text-muted); }

.az-tf, .az-focus { display: flex; gap: 2px; padding: 3px; border-radius: 10px; flex: none; }
.az-tf button, .az-focus button {
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-text-secondary);
	background: none;
	border: 1px solid transparent;
	padding: 7px 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: all var(--transition-fast);
}
.az-focus button { font-size: 13px; padding: 8px 15px; }

/* Azul translúcido sobre el fondo (no opaco) + halo exterior. El brillo es
   box-shadow con color, no hace falta librería externa. */
.az-tf button.is-active, .az-focus button.is-active {
	background: rgba(37, 99, 235, 0.2);
	color: #dbeafe;
	border-color: rgba(96, 165, 250, 0.8);
	box-shadow: 0 0 16px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.az-tf button:not(.is-active):hover, .az-focus button:not(.is-active):hover { color: var(--color-text-primary); }

.az-symbar-sp { flex: 1; }

.az-ob {
	display: flex;
	align-items: center;
	gap: 7px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 15px;
	border-radius: 11px;
	cursor: pointer;
	border: 1.5px solid var(--color-border);
	background: rgba(255, 255, 255, 0.03);
	color: var(--color-text-secondary);
	transition: all var(--transition-fast);
	white-space: nowrap;
}
.az-ob svg { width: 15px; height: 15px; }
.az-ob:hover { background: rgba(255, 255, 255, 0.06); color: var(--color-text-primary); }
.az-ob:not(.az-ob-star) { border-color: rgba(59, 130, 246, 0.65); color: #93c5fd; background: rgba(59, 130, 246, 0.08); }
.az-ob:not(.az-ob-star):hover { background: rgba(59, 130, 246, 0.16); border-color: rgba(96, 165, 250, 0.85); }
.az-ob-star { border-color: rgba(251, 191, 36, 0.55); color: var(--color-amber); background: rgba(251, 191, 36, 0.08); }
.az-ob-star:hover { background: rgba(251, 191, 36, 0.16); border-color: rgba(252, 211, 77, 0.8); }
.az-ob-star svg { fill: none; }
.az-ob.is-active { color: var(--color-amber); }

/* ─── Cuerpo: chart + rail ───────────────────────────────────────────────── */
.az-body { flex: 1; display: grid; grid-template-columns: 1fr 300px; gap: 14px; min-height: 0; }
.az-lcol { display: flex; flex-direction: column; gap: 12px; min-height: 0; }

/* El chart se acota a una fracción del alto: sin tope crecía sin límite en
   pantallas altas (llegaba al 69% del viewport) y aplastaba las cards de
   abajo. Lo que sobra lo absorben las mini cards, que ganan aire. */
.az-chartcard {
	flex: 1 1 auto;
	min-height: 240px;
	max-height: 72vh;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}

.az-pills { display: flex; gap: 22px; flex: none; }
.az-pill { display: flex; align-items: center; gap: 9px; }
.az-pill-ic {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	box-shadow: inset 0 0 0 1.5px currentColor, 0 0 14px -4px currentColor;
}
.az-pill-ic svg { width: 21px; height: 21px; }
.az-pill span { display: block; font-size: 11px; color: var(--color-text-muted); }
.az-pill b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 1px; }

.az-chart { flex: 1; min-height: 0; position: relative; border-radius: 10px; overflow: hidden; background: #000; }
.az-chart svg { width: 100%; height: 100%; display: block; }

/* Chart embebido de xQuant (?minimal=1). Ocupa todo el contenedor; el propio
   chart trae fondo negro, así que el borde redondeado lo recorta el padre. */
.az-chart-frame { width: 100%; height: 100%; border: 0; display: block; }
.az-chart-lbl { position: absolute; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.az-em-lbl { position: absolute; font-size: 11px; font-weight: 600; text-align: right; line-height: 1.35; }
.az-em-lbl span { display: block; color: var(--color-text-muted); font-weight: 500; font-size: 10.5px; }
.az-price-tag {
	position: absolute;
	font-size: 12.5px;
	font-weight: 700;
	color: #04211d;
	background: var(--color-teal);
	padding: 3px 8px;
	border-radius: 6px;
	transform: translateY(-50%);
}


/* fila de 4 cards bajo el chart */
.az-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 0 0 auto; height: 152px; }
.az-mini { padding: 11px 14px; display: flex; flex-direction: column; gap: 8px; }
.az-mini-h { display: flex; align-items: center; gap: 10px; flex: none; }
.az-mini-ic {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	box-shadow: inset 0 0 0 1.5px currentColor;
}
.az-mini-ic svg { width: 17px; height: 17px; }
.az-mini-h b { font-size: 14px; font-weight: 600; }

/* Cada fila es: etiqueta + valor a la izquierda, su propio gráfico a la
   derecha — como en la referencia. El sparkline acompaña al dato, no va
   suelto abajo a lo ancho de la card. */
.az-mini-rows { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
.az-mini-row { display: flex; align-items: center; gap: 10px; flex: 1; min-height: 0; }
.az-mini-row > span { font-size: 12.5px; color: var(--color-text-muted); flex: none; }
.az-mini-row > b { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; margin-left: auto; flex: none; }
/* Alto acotado: sin tope el sparkline se estiraba con la card y quedaba como
   una montaña, en vez de la línea compacta al lado del dato. */
.az-mini-row .az-mini-spark { flex: 1; min-width: 0; height: 100%; max-height: 52px; margin-left: 0; }

/* Variante de una sola fila (Strategy Fit, Events): etiqueta y valor
   apilados a la izquierda, gráfico a la derecha. */
.az-mini-row.is-stacked { align-items: center; gap: 12px; }
.az-mini-row.is-stacked .az-mini-text { display: flex; flex-direction: column; gap: 5px; flex: none; min-width: 0; }
.az-mini-row.is-stacked .az-mini-text span { font-size: 12.5px; color: var(--color-text-muted); }
.az-mini-row.is-stacked .az-mini-text b {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.6px;
	line-height: 1;
	margin-left: 0;
}
/* La unidad ("days", "Fit") acompaña al número sin competir con él. */
.az-mini-row.is-stacked .az-mini-text b i {
	font-style: normal;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-secondary);
	margin-left: 2px;
}
.az-mini-row.is-stacked .az-mini-spark { margin-left: auto; }

/* footer */
.az-foot { display: flex; gap: 11px; flex: none; justify-content: center; }
.az-fb {
	flex: 0 0 auto;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 11px;
	cursor: pointer;
	border: 1px solid;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	transition: all var(--transition-fast);
}
.az-fb svg { width: 15px; height: 15px; }
.az-fb-o { border-color: rgba(59, 130, 246, 0.5); background: rgba(59, 130, 246, 0.06); color: #60a5fa; }
.az-fb-o:hover { background: rgba(59, 130, 246, 0.13); border-color: rgba(96, 165, 250, 0.75); }
.az-fb-cy { border-color: rgba(45, 212, 191, 0.5); background: rgba(45, 212, 191, 0.06); color: #2dd4bf; }
.az-fb-cy:hover { background: rgba(45, 212, 191, 0.13); border-color: rgba(45, 212, 191, 0.75); }
.az-fb-vi { border-color: rgba(167, 139, 250, 0.5); background: rgba(167, 139, 250, 0.06); color: #a78bfa; }
.az-fb-vi:hover { background: rgba(167, 139, 250, 0.13); border-color: rgba(167, 139, 250, 0.75); }

/* ─── Rail derecho: Analysis Summary ─────────────────────────────────────── */
.az-rail2 { padding: 16px; display: flex; flex-direction: column; gap: 11px; min-height: 0; }
.az-rail2-h { display: flex; align-items: center; justify-content: space-between; flex: none; }
.az-rail2-h b { font-size: 15.5px; font-weight: 600; }
.az-rail2-h svg { width: 20px; height: 20px; color: var(--color-violet); }
.az-rail2-list { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }

/* Cada fila se pinta a partir de un solo color (`--row`, que llega inline
   desde el JS): el ícono, el valor, el fondo y el borde salen todos de ahí.
   Así el color identifica la métrica sin tener que repetirlo en cada regla. */
.az-rrow {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 11px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--row) 9%, transparent);
	border: 1px solid color-mix(in srgb, var(--row) 24%, transparent);
	cursor: pointer;
	transition: all var(--transition-fast);
}
.az-rrow:hover {
	background: color-mix(in srgb, var(--row) 17%, transparent);
	border-color: color-mix(in srgb, var(--row) 45%, transparent);
}
.az-rrow-ic {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	color: var(--row);
	background: color-mix(in srgb, var(--row) 24%, transparent);
	box-shadow: inset 0 0 0 1.5px currentColor;
}
.az-rrow-ic svg { width: 25px; height: 25px; }
.az-rrow-b { flex: 1; min-width: 0; }
.az-rrow-b span { display: block; font-size: 11.5px; color: var(--color-text-muted); }
.az-rrow-b b { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; color: var(--row); }
/* El Quant Score ya lleva el color en el anillo y en el badge; el número va
   en blanco porque es la métrica principal y gana legibilidad. */
.az-rrow.is-score .az-rrow-b b { color: var(--color-text-primary); }
.az-rrow-chev { color: var(--color-text-muted); flex-shrink: 0; }
.az-rrow-chev svg { width: 15px; height: 15px; }
.az-rrow-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; flex-shrink: 0; margin-right: 2px; }

.az-qs-ring { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.az-qs-ring svg { transform: rotate(-90deg); display: block; }
.az-qs-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 700; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
	.az-body { grid-template-columns: 1fr; }
	.az-rail2 { max-height: 280px; }
	.az-grid4 { grid-template-columns: repeat(2, 1fr); height: auto; }
	.az-grid4 > * { min-height: 120px; }
	.az-symbar { flex-wrap: wrap; height: auto; }
	.workspace-section#ws-analyze .workspace-inner { overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.az-symchip, .az-rrow { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Trade (docs/design/quantstock-trade-workspace-spec.md)
   Una sola pantalla en tres columnas: resultado · elegir contrato · orden.
   Mismo principio que Analyze: nada de scroll de página, todo flex con
   min-height:0. Las únicas zonas con scroll propio son las fechas y los
   strikes, y contienen su desplazamiento para no robarle la rueda a la
   navegación entre workspaces.
   ════════════════════════════════════════════════════════════════════════ */

.tw-inner { display: flex; flex-direction: column; gap: 10px; }

/* ── barra superior ── */
.tw-top { display: flex; align-items: center; gap: 14px; padding: 8px 14px; flex: none; }
.tw-sp { flex: 1; }
.tw-sym { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 12px; background: rgba(255,255,255,.04); }
.tw-sym-lg { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: linear-gradient(150deg,#334155,#0f172a); color: #e2e8f0; font-weight: 700; font-size: 13px; }
.tw-sym-tk { font-size: 15px; font-weight: 700; letter-spacing: -.3px; line-height: 1.15; }
.tw-sym-nm { font-size: 11px; color: var(--color-text-muted); }
.tw-px { display: flex; flex-direction: column; }
.tw-px-v { font-size: 21px; font-weight: 700; letter-spacing: -.5px; display: flex; align-items: center; gap: 8px; }
.tw-px-s { font-size: 11.5px; color: var(--color-text-muted); }
.tw-chip { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #c4b5fd; background: rgba(139,92,246,.12); border: 1px solid rgba(167,139,250,.35); }
.tw-chip svg { width: 14px; height: 14px; }
.tw-mkt { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-secondary); }
.tw-mkt b { color: var(--color-green); font-weight: 600; }
.tw-bp { text-align: right; }
.tw-bp span { display: block; font-size: 10px; color: var(--color-text-muted); letter-spacing: .3px; }
.tw-bp b { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }

/* ── grilla ── */
.tw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 288px minmax(0, 1fr) 336px;
  grid-template-rows: minmax(0, 1fr); gap: 10px; }
.tw-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.tw-card { display: flex; flex-direction: column; min-height: 0; }
.tw-h { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-bottom: 1px solid rgba(255,255,255,.06); flex: none; }
.tw-t { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.tw-h em { font-style: normal; font-size: 11px; color: var(--color-text-muted); }
.tw-lbl { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--color-text-muted); }
.up { color: #34d399; } .down { color: #fb7185; }

/* ── zonas con scroll propio ──
   overscroll-behavior corta el encadenado al scroll de workspaces; el borde se
   ilumina en hover para avisar que ahí la rueda es local. */
.tw-zone { overscroll-behavior: contain; border: 1px solid transparent; border-radius: 12px;
  transition: border-color 160ms ease, background 160ms ease; }
.tw-zone:hover { border-color: rgba(96,165,250,.55); background: rgba(59,130,246,.05); }
.tw-zone::-webkit-scrollbar { width: 8px; height: 8px; }
.tw-zone::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 4px; }
.tw-zone::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
.tw-zone::-webkit-scrollbar-track { background: transparent; }

/* ── izquierda: precio + resultado ── */
/* El precio del día no crece sin límite: en pantallas altas el sobrante va al
   hueco entre las dos tarjetas (tw-outcome se ancla abajo), no al gráfico. */
.tw-mini { flex: 0 1 auto; height: clamp(150px, 24vh, 300px); }
.tw-outcome { flex: none; margin-top: auto; }

.tw-mini-c { flex: 1; min-height: 0; padding: 6px 10px 8px; }
.tw-mini-c svg { width: 100%; height: 100%; display: block; }

.tw-chart { flex: none; height: 132px; margin: 8px 12px 18px 40px; position: relative; }
.tw-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tw-ax { position: absolute; font-size: 9.5px; color: var(--color-text-muted); white-space: nowrap; pointer-events: none; }
.tw-ax-y { right: calc(100% + 6px); transform: translateY(-50%); }
.tw-ax-x { top: calc(100% + 3px); transform: translateX(-50%); }
.tw-ax-be { color: #67e8f9; font-weight: 600; transform: translate(-50%, -110%); }

.tw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.06); flex: none; }
.tw-cell { background: rgba(9,14,26,.55); padding: 7px 12px; }
.tw-cell span { font-size: 9.5px; color: var(--color-text-muted); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.tw-cell b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }

/* griegos en una tira: cuatro números, sin encabezado propio */
.tw-gk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.06); flex: none; }
.tw-gk div { background: rgba(9,14,26,.55); padding: 6px 8px; text-align: center; }
.tw-gk span { font-size: 9.5px; color: var(--color-text-muted); font-weight: 600; }
.tw-gk span i { font-style: normal; color: var(--color-cyan); margin-right: 3px; }
.tw-gk b { display: block; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }

/* ── centro: fechas + strikes ── */
.tw-qty { display: flex; align-items: center; gap: 2px; border: 1px solid var(--color-border); border-radius: 10px; padding: 2px; }
.tw-qty button { width: 24px; height: 24px; border-radius: 7px; border: 0; background: rgba(255,255,255,.04);
  color: var(--color-text-secondary); font: inherit; font-size: 15px; cursor: pointer; }
.tw-qty button:hover { background: rgba(255,255,255,.09); color: #fff; }
.tw-qty b { min-width: 28px; text-align: center; font-size: 13.5px; font-weight: 700; }

.tw-exp { padding: 8px 12px 6px; flex: none; }
.tw-exp-row { display: flex; gap: 6px; margin-top: 5px; overflow-x: auto; overflow-y: hidden; padding: 3px; }
.tw-ep { flex: 0 0 78px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px;
  border-radius: 10px; cursor: pointer; border: 1px solid var(--color-border); background: rgba(255,255,255,.03);
  font: inherit; color: var(--color-text-secondary); transition: all var(--transition-fast); position: relative; }
.tw-ep b { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; }
.tw-ep span { font-size: 10.5px; color: var(--color-text-muted); }
.tw-ep:hover { border-color: rgba(255,255,255,.24); }
.tw-ep.is-active { background: rgba(37,99,235,.2); border-color: rgba(96,165,250,.8);
  box-shadow: 0 0 16px rgba(59,130,246,.3), inset 0 1px 0 rgba(255,255,255,.1); }
.tw-ep.is-active b { color: #dbeafe; } .tw-ep.is-active span { color: #bfdbfe; }
.tw-ep u { position: absolute; top: 4px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-amber); }

.tw-chain { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 12px 10px; position: relative; }
.tw-chd, .tw-row { display: grid; grid-template-columns: 84px 150px 1fr 1fr 1fr 100px; align-items: center; gap: 10px; }
.tw-chd { padding: 5px 12px; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--color-text-muted); border-bottom: 1px solid rgba(255,255,255,.07); flex: none; }
.tw-chd i { font-style: normal; color: var(--color-cyan); }
.tw-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 4px; margin-top: 3px; }
.tw-row { padding: 6px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast); }
.tw-row + .tw-row { margin-top: 1px; }
.tw-row:hover { background: rgba(255,255,255,.05); }
.tw-row.is-active { background: rgba(37,99,235,.18); border-color: rgba(96,165,250,.75);
  box-shadow: 0 0 18px rgba(59,130,246,.22), inset 0 1px 0 rgba(255,255,255,.08); }
.tw-row.is-active .tw-k { color: #dbeafe; }
.tw-row.is-leg { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.tw-k { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; display: flex; align-items: center; gap: 6px; }
.tw-badge { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 5px; letter-spacing: .3px; }
.tw-badge.buy { background: rgba(52,211,153,.16); color: #6ee7b7; }
.tw-badge.sell { background: rgba(251,113,133,.16); color: #fda4af; }
.tw-mny { font-size: 10px; color: var(--color-text-muted); font-weight: 600; letter-spacing: .3px; }
.tw-d { display: flex; align-items: center; gap: 9px; }
.tw-d u { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; display: block; }
.tw-d u i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg,#0ea5e9,#22d3ee); }
.tw-d b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 32px; }
.tw-th { font-size: 12.5px; color: #fda4af; font-variant-numeric: tabular-nums; }
.tw-iv, .tw-pop { font-size: 12.5px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.tw-q { text-align: right; font-variant-numeric: tabular-nums; }
.tw-q b { font-size: 13.5px; font-weight: 700; }
.tw-q span { font-size: 10.5px; color: var(--color-text-muted); display: block; }
.tw-spot { display: flex; align-items: center; gap: 10px; padding: 3px 12px; }
.tw-spot span { font-size: 10px; font-weight: 700; letter-spacing: .4px; color: #67e8f9; white-space: nowrap; }
.tw-spot u { flex: 1; height: 1px; display: block; background: linear-gradient(90deg, rgba(103,232,249,.55), rgba(103,232,249,.05)); }

.tw-chain.is-loading .tw-rows { opacity: .25; filter: blur(1px); }
.tw-loading { position: absolute; inset: auto 0 46% 0; display: none; justify-content: center; }
.tw-chain.is-loading .tw-loading { display: flex; }
.tw-loading span { font-size: 11.5px; font-weight: 600; color: #93c5fd; padding: 6px 14px; border-radius: 999px;
  background: rgba(37,99,235,.18); border: 1px solid rgba(96,165,250,.5); }

/* ── derecha: orden con patas ── */
.tw-ticket { flex: 1; min-height: 0; padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.tw-legs { display: flex; flex-direction: column; gap: 6px; }
.tw-leg { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 8px;
  padding: 8px 9px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--color-border); background: rgba(255,255,255,.03); transition: all var(--transition-fast); }
.tw-leg:hover { border-color: rgba(255,255,255,.24); }
.tw-leg.is-active { border-color: rgba(96,165,250,.75); background: rgba(37,99,235,.14); }
.tw-leg-side { font-size: 10px; font-weight: 700; text-align: center; padding: 3px 0; border-radius: 6px; letter-spacing: .3px; }
.tw-leg-side.buy { background: rgba(52,211,153,.16); color: #6ee7b7; }
.tw-leg-side.sell { background: rgba(251,113,133,.16); color: #fda4af; }
.tw-leg-t { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.tw-leg-s { font-size: 10.5px; color: var(--color-text-muted); }
.tw-leg-px { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-leg-x { width: 20px; height: 20px; border-radius: 6px; border: 0; background: rgba(255,255,255,.06);
  color: var(--color-text-muted); font: inherit; font-size: 13px; line-height: 1; cursor: pointer; }
.tw-leg-x:hover { background: rgba(244,63,94,.2); color: #fda4af; }
.tw-addleg { width: 100%; padding: 8px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.18);
  background: none; color: var(--color-text-secondary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.tw-addleg:hover { border-color: rgba(96,165,250,.6); color: #93c5fd; }

.tw-pills { display: flex; gap: 6px; margin-top: 5px; }
.tw-pills button { flex: 1; padding: 7px 0; border-radius: 9px; border: 1px solid var(--color-border);
  background: rgba(255,255,255,.03); color: var(--color-text-secondary); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.tw-pills button:hover { border-color: rgba(255,255,255,.24); color: var(--color-text-primary); }
.tw-pills button.is-active { background: rgba(37,99,235,.2); border-color: rgba(96,165,250,.8); color: #dbeafe; }
.tw-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tw-field { display: flex; flex-direction: column; gap: 4px; }
.tw-input, .tw-select { font: inherit; font-size: 13px; font-weight: 600; color: var(--color-text-primary);
  background: rgba(255,255,255,.045); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; outline: none; width: 100%; }
.tw-break { border-top: 1px solid rgba(255,255,255,.07); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tw-br { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; color: var(--color-text-secondary); }
.tw-br b { font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.tw-br.is-total { padding-top: 7px; border-top: 1px solid rgba(255,255,255,.07); }
.tw-br.is-total span { font-size: 13px; color: var(--color-text-primary); }
.tw-br.is-total b { font-size: 19px; letter-spacing: -.4px; }
/* Cuadrícula 2×2 en vez de cuatro filas repartidas a lo alto: el dato manda,
   la etiqueta va chica arriba, y la sección deja de estirarse. */
.tw-checks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: none;
}

/* P/L a vencimiento en tres escenarios: ancla el pie de la orden */
.tw-scen { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; }
.tw-scen div { background: rgba(9,14,26,.6); padding: 8px 6px; text-align: center; }
.tw-scen span { display: block; font-size: 10px; color: var(--color-text-muted); font-weight: 600; }
.tw-scen b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-check {
  display: grid; grid-template-columns: 7px 1fr; align-items: center; gap: 4px 8px;
  padding: 8px 10px; border-radius: 11px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.tw-check .tw-dot { grid-row: 1; }
.tw-check-t {
  grid-column: 2; font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-check b {
  grid-column: 2; font-size: 14.5px; font-weight: 700; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.tw-dot.ok { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.6); }
.tw-dot.warn { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,.5); }

/* ── barra de acción ── */
.tw-actions { flex: none; display: grid; grid-template-columns: 288px minmax(0, 1fr) 336px; gap: 10px; }
.tw-act { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px; font-size: 13.5px; border-radius: var(--radius-md); }
.tw-act svg { width: 16px; height: 16px; }
.tw-send { font-size: 14px; font-weight: 700; }

@media (max-width: 1280px) {
  .tw-body, .tw-actions { grid-template-columns: 256px minmax(0, 1fr) 300px; }
}

/* ─── Confirmación ───────────────────────────────────────────────────────
   Compacta a propósito: repite las patas, los cuatro números que importan y
   pide un acuse. Nada que no se haya visto ya en la pantalla. */
.tw-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; }
.tw-modal[hidden] { display: none; }
.tw-modal-bg { position: absolute; inset: 0; background: rgba(3, 5, 9, 0.72); backdrop-filter: blur(6px); }
.tw-modal-card {
	position: relative;
	width: min(440px, calc(100vw - 40px));
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)), rgba(11, 18, 32, 0.92);
	backdrop-filter: var(--glass-blur);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}
.tw-modal-h { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.tw-modal-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--color-cyan); }
.tw-modal-h h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin-top: 3px; }
.tw-modal-x { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, 0.06); color: var(--color-text-secondary); font-size: 16px; cursor: pointer; }
.tw-modal-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.tw-modal-b { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.tw-modal-b .tw-grid2 { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; overflow: hidden; }
.tw-ack { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--color-text-secondary); cursor: pointer; }
.tw-ack input { width: 15px; height: 15px; accent-color: var(--color-cyan); cursor: pointer; }
.tw-modal-f { display: flex; justify-content: flex-end; gap: 9px; padding: 13px 18px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.tw-modal-f .btn { padding: 10px 18px; }
.tw-modal-f .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════════
   Portfolio — vive dentro de la mitad inferior del Dashboard
   (docs/design/quantstock-portfolio-workspace-spec.md)
   Cuatro franjas dentro de la caja: KPIs, performance · salud · exposición,
   y la tira de posiciones abiertas. Todo en flex con min-height:0 para que
   entre en media pantalla sin scroll.
   ════════════════════════════════════════════════════════════════════════ */

.pf-sp { flex: 1; }
.pf-range button { padding: 6px 11px; }

.pf-icon-btn {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0;
	flex: none;
}

.pf-icon-btn svg { width: 17px; height: 17px; }

/* ─── KPIs ───────────────────────────────────────────────────────────────── */
.pf-kpis {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	flex: none;
	height: 112px;
	padding: 0 12px;
}

.pf-kpi {
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.028);
	/* Dos columnas: a la izquierda icono y datos, a la derecha la curva. */
	display: grid;
	grid-template-columns: 65% 35%;
	align-items: center;
	gap: 8px;
	min-width: 0;
	/* La sparkline crece con lo que sobra; sin recorte se derramaba sobre la
	   fila de abajo porque el SVG ocupa el 100% de su contenedor. */
	overflow: hidden;
}

.pf-kpi-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pf-kpi-h { display: flex; align-items: center; gap: 9px; flex: none; min-width: 0; }

.pf-kpi-ic {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	flex: none;
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.pf-kpi-ic svg { width: 24px; height: 24px; }
/* La etiqueta puede partirse en dos líneas: al angostar la columna izquierda
   "Net Liquidation Value" ya no entra de una. */
.pf-kpi-l { font-size: 11.5px; line-height: 1.25; color: var(--color-text-secondary); min-width: 0; }

.pf-kpi-v { display: flex; align-items: baseline; gap: 7px; flex: none; }

.pf-kpi-v b {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.4px;
	white-space: nowrap;
}

.pf-kpi-v span { font-size: 11px; font-weight: 600; }
.pf-kpi-s { height: 100%; min-height: 0; overflow: hidden; }

/* ─── Performance · salud · exposición ───────────────────────────────────── */
.pf-mid {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: 1.6fr 1.05fr 0.95fr;
	gap: 8px;
	padding: 8px 12px 0;
}

.pf-block {
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.025);
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.pf-block-h {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-text-muted);
	padding: 9px 12px 4px;
	flex: none;
}

.pf-chart { flex: 1; min-height: 0; padding: 0 10px 8px; }
.pf-chart canvas { width: 100%; height: 100%; display: block; }

/* ─── Salud ──────────────────────────────────────────────────────────────── */
.pf-health {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 104px) 1fr;
	gap: 12px;
	align-items: center;
	padding: 0 12px 10px;
}

.pf-donut { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 100%; justify-self: center; }
.pf-donut svg { width: 100%; height: 100%; display: block; }

.pf-donut-v {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.8px;
}

.pf-health-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.pf-health-top b { font-size: 15px; font-weight: 600; }
.pf-ecg { flex: 1; height: 16px; display: block; }
.pf-ecg svg { width: 100%; height: 100%; display: block; }

.pf-hlist { display: flex; flex-direction: column; gap: 5px; }

.pf-hrow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 9px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 11.5px;
}

.pf-hrow-ic { display: flex; flex: none; }
.pf-hrow svg { width: 14px; height: 14px; flex: none; }
.pf-hrow-t { flex: 1; color: var(--color-text-secondary); }
.pf-hrow b { font-weight: 600; }

/* ─── Exposición ─────────────────────────────────────────────────────────── */
.pf-exp {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: center;
	padding: 0 12px 10px;
}

.pf-exp-d { width: 78px; height: 78px; position: relative; flex: none; }
.pf-exp-d svg { width: 100%; height: 100%; display: block; }

.pf-leg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-leg-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.pf-leg-row i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pf-leg-row span { flex: 1; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-leg-row b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─── Posiciones abiertas ────────────────────────────────────────────────── */
.pf-pos {
	flex: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding: 8px 12px 12px;
}

.pf-pos-c {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 12px;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	min-width: 0;
	cursor: pointer;
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.pf-pos-c:hover { border-color: rgba(34, 211, 238, 0.4); transform: translateY(-2px); }
.pf-pos-c:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 2px; }

.pf-pos-lg {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	flex: none;
	overflow: hidden;
}

/* Los SVG de cada marca traen su tamaño afinado; se escalan en bloque para
   conservar la proporción entre ellos. */
.pf-pos-lg svg { transform: scale(1.35); }

.pf-pos-n { flex: 1; min-width: 0; }
.pf-pos-n b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-pos-n span { font-size: 11.5px; color: var(--color-text-muted); }
.pf-pos-p { font-size: 14.5px; font-weight: 700; letter-spacing: -0.2px; white-space: nowrap; }

@media (max-width: 1180px) {
	.pf-kpis { grid-template-columns: repeat(3, 1fr); height: auto; }
	.pf-mid { grid-template-columns: 1fr; }
	.pf-pos { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.pf-pos-c { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   AI Workplace (docs/design/quantstock-ai-workplace-spec.md)
   Un símbolo activo: tira de selección arriba, hero + tres filas de
   lecturas a la izquierda, y el chat como rail derecho. Todo en flex con
   min-height:0 para entrar en una pantalla sin scroll.
   ════════════════════════════════════════════════════════════════════════ */

.aw-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ─── Encabezado ─────────────────────────────────────────────────────────── */
.aw-head { display: flex; align-items: center; gap: 16px; padding: 10px 16px; flex: none; }
.aw-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.aw-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.aw-head-r { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.aw-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--color-border);
	width: 250px;
}

.aw-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--color-text-primary); font: inherit; font-size: 12.5px; outline: none; }
.aw-search input::placeholder { color: var(--color-text-muted); }
.aw-search svg { width: 15px; height: 15px; color: var(--color-text-muted); flex: none; }

.aw-hbtn { display: flex; align-items: center; gap: 8px; padding: 9px 15px; white-space: nowrap; }
.aw-hbtn svg { width: 15px; height: 15px; }

/* ─── Tira de símbolos ───────────────────────────────────────────────────── */
.aw-strip { flex: none; }
.aw-strip-h { font-size: 12.5px; font-weight: 600; padding: 7px 14px 5px; }
.aw-strip-body { display: flex; align-items: center; gap: 6px; padding: 0 8px 10px; }

.aw-arrow {
	width: 26px;
	height: 58px;
	flex: none;
	border-radius: 9px;
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.03);
	color: var(--color-text-secondary);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.aw-arrow:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-text-primary); }

.aw-syms { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 3px; }

.aw-sym {
	flex: 0 0 210px;
	display: grid;
	grid-template-columns: 40px 1fr auto;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 3px 10px;
	padding: 7px 10px;
	border-radius: 13px;
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.03);
	cursor: pointer;
	font: inherit;
	color: var(--color-text-primary); /* si no, hereda el buttontext negro del UA */
	text-align: left;
	transition: all var(--transition-fast);
}

.aw-sym:hover { border-color: rgba(255, 255, 255, 0.25); }

.aw-sym.is-active {
	border-color: rgba(52, 211, 153, 0.65);
	background: rgba(16, 185, 129, 0.1);
	box-shadow: 0 0 18px rgba(52, 211, 153, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.aw-sym-lg { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; overflow: hidden; }
.aw-sym-lg svg { transform: scale(1.2); }
.aw-sym-b { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; }
.aw-sym-tk { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
.aw-sym-cf { font-size: 17px; font-weight: 700; letter-spacing: -0.4px; width: 100%; }
.aw-sym-lv { font-size: 10.5px; color: var(--color-text-muted); }
.aw-sym-s { grid-row: 1 / span 2; width: 62px; height: 44px; }
.aw-sym-tag {
	grid-column: 3;
	grid-row: 2;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 3px 7px;
	border-radius: 6px;
	color: var(--color-text-muted);
	background: rgba(255, 255, 255, 0.06);
}
.aw-sym-tag.is-active { color: #6ee7b7; background: rgba(52, 211, 153, 0.16); }

.aw-pill {
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid transparent;
	white-space: nowrap;
}

/* ─── Cuerpo ─────────────────────────────────────────────────────────────── */
.aw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 8px; }
.aw-col { display: flex; flex-direction: column; gap: 8px; min-height: 0; }

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.aw-hero {
	flex: 1 1 auto;
	min-height: 130px;
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) 250px;
	gap: 14px;
	align-items: center;
	padding: 12px 14px;
}

.aw-hero-id { display: grid; grid-template-columns: 58px 1fr; gap: 4px 12px; align-items: center; }
.aw-hero-lg { grid-row: 1 / span 2; width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center; overflow: hidden; }
.aw-hero-lg svg { transform: scale(1.6); }
.aw-hero-tk { display: flex; align-items: center; gap: 9px; }
.aw-hero-tk > span:first-child { font-size: 25px; font-weight: 700; letter-spacing: -0.6px; }
.aw-hero-cf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.aw-hero-cf > span { font-size: 11.5px; color: var(--color-text-muted); width: 100%; }
.aw-hero-cf b { font-size: 26px; font-weight: 700; letter-spacing: -0.8px; }
.aw-hero-cf em { font-style: normal; font-size: 11.5px; color: var(--color-text-muted); }

.aw-hero-chart { position: relative; height: 100%; min-height: 0; padding: 4px 0 16px 42px; }
.aw-hero-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.aw-hero-y {
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 16px;
	width: 38px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	font-size: 9.5px;
	color: var(--color-text-muted);
}
.aw-hero-x {
	position: absolute;
	left: 42px;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	font-size: 9.5px;
	color: var(--color-text-muted);
}

.aw-hero-side { display: flex; flex-direction: column; gap: 10px; }
.aw-hero-sum { display: flex; gap: 10px; }
.aw-hero-sum-ic {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	flex: none;
	display: grid;
	place-items: center;
	color: #6ee7b7;
	background: rgba(52, 211, 153, 0.14);
	border: 1px solid rgba(52, 211, 153, 0.3);
}
.aw-hero-sum-ic svg { width: 16px; height: 16px; }
.aw-hero-sum p { font-size: 12.5px; line-height: 1.45; color: var(--color-text-secondary); }

.aw-hero-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.aw-act {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 9px;
	border-radius: 11px;
	border: 1px solid rgba(96, 165, 250, 0.4);
	background: rgba(59, 130, 246, 0.08);
	color: #93c5fd;
	font: inherit;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	transition: all var(--transition-fast);
}
.aw-act svg { width: 15px; height: 15px; flex: none; }
.aw-act:hover { background: rgba(59, 130, 246, 0.18); border-color: rgba(96, 165, 250, 0.75); }

/* ─── Tarjetas ───────────────────────────────────────────────────────────── */
.aw-grid { display: grid; gap: 8px; flex: none; }
.aw-grid-5 { grid-template-columns: repeat(5, 1fr); height: 114px; }
.aw-grid-3 { grid-template-columns: repeat(3, 1fr); height: 114px; }
.aw-grid-4 { grid-template-columns: repeat(4, 1fr); height: 114px; }

.aw-card { display: flex; flex-direction: column; min-height: 0; position: relative; }
.aw-card-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px 6px; font-size: 12.5px; font-weight: 600; flex: none; }
.aw-card-h svg { width: 16px; height: 16px; color: var(--color-cyan); flex: none; }
.aw-card-b { flex: 1; min-height: 0; padding: 0 12px 10px; display: flex; flex-direction: column; justify-content: center; gap: 5px; overflow: hidden; }

.aw-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.aw-row > span { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-row > b { margin-left: auto; font-weight: 600; font-size: 11.5px; white-space: nowrap; }
.aw-row-ic { display: flex; align-items: center; gap: 5px; }
.aw-row-ic svg { width: 13px; height: 13px; flex: none; }
.aw-row-s { width: 62px; height: 22px; flex: none; }

.aw-bars { display: flex; align-items: flex-end; gap: 1.5px; height: 14px; width: 46px; flex: none; }
.aw-bars u { width: 3px; border-radius: 1px; display: block; }

.aw-dotline { flex: none; width: 34px; height: 1px; background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 6px); position: relative; }
.aw-dotline::after { content: ""; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }

.aw-strat i { font-style: normal; width: 15px; height: 15px; border-radius: 5px; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; background: rgba(255, 255, 255, 0.08); color: var(--color-text-secondary); flex: none; }
.aw-strat > span { flex: 1; color: var(--color-text-primary); }
.aw-fit { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; border: 1px solid transparent; }

.aw-changed span { display: flex; align-items: center; gap: 6px; color: var(--color-text-primary); }
.aw-changed svg { width: 12px; height: 12px; flex: none; }
.aw-risk-row u { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 7px; }
.aw-risk-row > span { display: flex; align-items: center; }

/* Las notas se recortan a tres líneas: la tarjeta tiene alto fijo y el texto
   del análisis es de largo variable. */
.aw-text {
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--color-text-secondary);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.aw-saved { font-size: 10px; color: var(--color-text-muted); margin-top: 4px; display: block; }

/* Adornos: viven sobre la tarjeta, no empujan el contenido. */
.aw-card-s { position: absolute; right: 10px; bottom: 8px; width: 62px; height: 30px; opacity: 0.9; pointer-events: none; }
.aw-card-ic {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	color: #93c5fd;
	background: rgba(59, 130, 246, 0.12);
	border: 1px solid rgba(96, 165, 250, 0.28);
}
.aw-card-ic svg { width: 17px; height: 17px; }
.aw-gauge-ring { position: absolute; right: 10px; bottom: 8px; width: 54px; height: 54px; pointer-events: none; }
.aw-gauge-ring svg { width: 100%; height: 100%; }
.aw-gauge { position: absolute; right: 6px; bottom: 4px; width: 82px; height: 52px; pointer-events: none; }
.aw-gauge svg { width: 100%; height: 100%; }
.aw-radar { position: absolute; right: 4px; top: 4px; width: 84px; height: 80px; pointer-events: none; }
.aw-radar svg { width: 100%; height: 100%; }

.aw-grid-3 .aw-card:nth-child(2) .aw-card-b { padding-right: 62px; }
.aw-grid-3 .aw-card:nth-child(3) .aw-card-b { padding-right: 90px; }
.aw-grid-4 .aw-card:nth-child(1) .aw-card-b { padding-right: 66px; }
.aw-grid-4 .aw-card:nth-child(2) .aw-card-b { padding-right: 88px; }
.aw-grid-4 .aw-card:nth-child(3) .aw-card-b,
.aw-grid-4 .aw-card:nth-child(4) .aw-card-b { padding-right: 46px; }
.aw-grid-5 .aw-card:nth-child(4) .aw-card-b { padding-right: 66px; }

/* ─── Chat ───────────────────────────────────────────────────────────────── */
.aw-chat { display: flex; flex-direction: column; min-height: 0; }
.aw-chat-h { display: flex; align-items: center; gap: 9px; padding: 11px 14px 8px; flex: none; }
.aw-chat-t { font-size: 13.5px; font-weight: 600; }
.aw-chat-ic {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	color: #c4b5fd;
	background: rgba(139, 92, 246, 0.14);
	border: 1px solid rgba(167, 139, 250, 0.32);
}
.aw-chat-ic svg { width: 15px; height: 15px; }

.aw-chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px; display: flex; flex-direction: column; gap: 10px; }
.aw-msg { display: flex; gap: 9px; }
.aw-msg-av {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
	color: #93c5fd;
	background: rgba(59, 130, 246, 0.16);
	border: 1px solid rgba(96, 165, 250, 0.3);
}
.aw-msg-av svg { width: 14px; height: 14px; }
.aw-msg.is-user .aw-msg-av { color: #6ee7b7; background: rgba(52, 211, 153, 0.16); border-color: rgba(52, 211, 153, 0.32); }
.aw-msg-b { min-width: 0; }
.aw-msg-h { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--color-text-muted); margin-bottom: 4px; }
.aw-msg-h em { font-style: normal; font-size: 10px; }
.aw-msg-b p {
	font-size: 12px;
	line-height: 1.45;
	color: var(--color-text-primary);
	padding: 8px 11px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.07);
}
.aw-msg.is-user .aw-msg-b p { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.24); }

.aw-chat-form { display: flex; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 7px 8px 7px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(96, 165, 250, 0.4); flex: none; }
.aw-chat-form input { flex: 1; min-width: 0; border: 0; background: none; color: var(--color-text-primary); font: inherit; font-size: 12.5px; outline: none; }
.aw-chat-form input::placeholder { color: var(--color-text-muted); }
.aw-chat-form button { width: 30px; height: 30px; border-radius: 9px; border: 0; background: rgba(59, 130, 246, 0.18); color: #93c5fd; display: grid; place-items: center; cursor: pointer; flex: none; }
.aw-chat-form button:hover { background: rgba(59, 130, 246, 0.32); color: #dbeafe; }
.aw-chat-form button svg { width: 15px; height: 15px; }
.aw-chat-note { font-size: 10px; color: var(--color-text-muted); text-align: center; padding: 7px 12px 10px; flex: none; }

@media (max-width: 1280px) {
	.aw-body { grid-template-columns: minmax(0, 1fr) 280px; }
	.aw-hero { grid-template-columns: 160px minmax(0, 1fr) 210px; }
	.aw-grid-5 { grid-template-columns: repeat(3, 1fr); height: auto; }
	.aw-grid-4 { grid-template-columns: repeat(2, 1fr); height: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.aw-sym, .aw-act { transition: none; }
}

/* ─── Formularios de conexión ────────────────────────────────────────────── */
.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.field label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.field .help {
	font-size: 12px;
	color: var(--color-text-muted);
	line-height: 1.5;
}

.field .input {
	width: 100%;
}

/* ─── Tarjeta de broker ──────────────────────────────────────────────────── */
.broker-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	padding: 20px;
	margin-bottom: 16px;
}

.broker-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}

.broker-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text-primary);
}

.broker-desc {
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin-bottom: 18px;
}

.broker-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ─── Insignias de estado ────────────────────────────────────────────────── */
.badge {
	display: inline-block;
	flex-shrink: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid transparent;
}

.badge-active {
	color: #6ee7b7;
	background: rgba(16, 185, 129, 0.12);
	border-color: rgba(16, 185, 129, 0.3);
}
.badge-pending {
	color: #fcd34d;
	background: rgba(245, 158, 11, 0.12);
	border-color: rgba(245, 158, 11, 0.3);
}
.badge-error {
	color: #fda4af;
	background: rgba(244, 63, 94, 0.12);
	border-color: rgba(244, 63, 94, 0.3);
}
.badge-off {
	color: var(--color-text-muted);
	background: rgba(148, 163, 184, 0.1);
	border-color: rgba(148, 163, 184, 0.24);
}

tbody tr.row-clickable {
	cursor: pointer;
}

/* ─── Modal de análisis ──────────────────────────────────────────────────── */
.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(3, 7, 15, 0.72);
	backdrop-filter: blur(6px);
}

/* Gana a `display: flex` por especificidad (clase + atributo). */
.modal-backdrop[hidden] {
	display: none;
}

.modal {
	width: 100%;
	max-width: 960px;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg-dark);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 24px 18px;
	border-bottom: 1px solid var(--color-border);
}

.modal-title {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--color-text-primary);
}

.modal-sub {
	font-size: 13px;
	color: var(--color-text-secondary);
	margin-top: 3px;
}

.modal-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.modal-body {
	padding: 22px 24px 26px;
	overflow-y: auto;
}

.icon-btn {
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.04);
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.icon-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-text-primary);
}

/* ─── Métricas del análisis ──────────────────────────────────────────────── */
/* 190px es el mínimo que evita que "Volatilidad anual" parta en dos líneas y
   descuadre la altura de su recuadro. Con 7 métricas da 4 + 3, sin huérfanos. */
.metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
	margin-bottom: 22px;
}

.metric {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	padding: 12px 14px;
}

.metric-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: 5px;
}

.metric-value {
	font-size: 17px;
	font-weight: 600;
	color: var(--color-text-primary);
	font-variant-numeric: tabular-nums;
}

.metric-value.up { color: #6ee7b7; }
.metric-value.down { color: #fda4af; }

/* ─── Gráfico ────────────────────────────────────────────────────────────── */
.chart-wrap {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.02);
	padding: 4px;
}

.chart {
	display: block;
	width: 100%;
	height: 280px;
	overflow: hidden;
}

.chart-line {
	fill: none;
	stroke: var(--color-cyan);
	stroke-width: 1.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.chart-area {
	fill: url(#chartFade);
	stroke: none;
}

.chart-grid {
	stroke: rgba(255, 255, 255, 0.07);
	stroke-width: 1;
	shape-rendering: crispEdges;
}

.chart-label {
	fill: var(--color-text-muted);
	font-family: inherit;
	font-size: 10px;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.modal-backdrop {
		padding: 12px;
	}
	.modal-head {
		flex-wrap: wrap;
		padding: 18px 18px 14px;
	}
	.modal-body {
		padding: 18px;
	}
	.chart {
		height: 220px;
	}
	/* Apiladas en una columna, las siete métricas empujan el gráfico fuera de
	   la pantalla. En dos columnas el gráfico entra sin hacer scroll. */
	.metrics {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.metric {
		padding: 10px 12px;
	}
	.metric-value {
		font-size: 15px;
	}
}

/* ─── Avisos y enlaces de texto ──────────────────────────────────────────── */
.notice {
	font-size: 12px;
	padding: 10px 14px;
	border-radius: var(--radius-sm, 8px);
	border: 1px solid rgba(245, 158, 11, 0.3);
	background: rgba(245, 158, 11, 0.08);
	color: #fcd34d;
	margin-bottom: 16px;
	line-height: 1.55;
}

.link {
	color: var(--color-text-secondary, #94a3b8);
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: all var(--transition-fast, 160ms ease);
}

.link:hover {
	color: var(--color-text-primary, #f1f5f9);
	border-bottom-color: rgba(255, 255, 255, 0.3);
}

/* ═══ Modal de símbolo del Dashboard ══════════════════════════════════════
   El marcado y el JS ya existían; faltaba la hoja de estilos, y por eso el
   modal salía sin formato (logo y gráfico a tamaño natural). Sigue los mismos
   tokens que las tarjetas de Top Symbols. */

.db-ov {
	position: fixed;
	inset: 0;
	/* Por encima del dock de navegación, que va en 1000. Mismo nivel que
	   .tw-modal, el otro modal del proyecto. */
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 24px;
	background: rgba(2, 4, 9, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Gana a `display: flex` por especificidad (clase + atributo). */
.db-ov[hidden] {
	display: none;
}

.db-mdl {
	width: 100%;
	max-width: 1080px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	background: rgba(8, 13, 24, 0.96);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}

/* ─── Cabecera ───────────────────────────────────────────────────────────── */
.db-m-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	flex: none;
}

.db-m-l {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.db-m-lg {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	flex: none;
	display: grid;
	place-items: center;
	overflow: hidden;
}

/* Sin esto el SVG del logo se dibuja a su tamaño intrínseco. */
.db-m-lg svg {
	width: 34px;
	height: 34px;
	transform: scale(1.25);
}

.db-m-t {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-text-primary);
	line-height: 1.2;
}

.db-m-sub {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 3px;
	font-size: 12px;
	min-width: 0;
}

.db-m-bias {
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 10px;
}

.db-m-name {
	color: var(--color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.db-m-r {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.db-m-conf {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.25;
}

.db-m-conf span {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.db-m-conf b {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text-primary);
	font-variant-numeric: tabular-nums;
}

.db-m-badge {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	border: 1px solid rgba(34, 211, 238, 0.28);
	background: rgba(34, 211, 238, 0.1);
	color: var(--color-cyan);
}

.db-m-badge svg {
	width: 18px;
	height: 18px;
}

.db-m-x {
	font-family: inherit;
	font-size: 20px;
	line-height: 1;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.04);
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.db-m-x:hover {
	background: rgba(255, 255, 255, 0.09);
	color: var(--color-text-primary);
}

/* ─── Gráfico de cabecera ────────────────────────────────────────────────── */
.db-m-chart {
	flex: none;
	height: 108px;
	padding: 0 24px;
	margin-top: 16px;
}

/* El JS inyecta un SVG con width/height propios; se fuerza a llenar la caja. */
.db-m-chart svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ─── Cuerpo ─────────────────────────────────────────────────────────────── */
.db-m-body {
	padding: 22px 24px 8px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.db-m-sec {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-primary);
	margin-bottom: 12px;
}

.db-m-sec i {
	width: 20px;
	height: 20px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 6px;
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.07);
	color: var(--color-text-secondary);
}

.db-g3,
.db-g4 {
	display: grid;
	gap: 10px;
}

.db-g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.db-g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ─── Tarjetas internas ──────────────────────────────────────────────────── */
.db-mc2 {
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.025);
	padding: 14px;
}

.db-mc2-h {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 8px;
}

.db-mc2-h b {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-text-primary);
	flex: 1;
	min-width: 0;
}

.db-mc2-ic {
	width: 26px;
	height: 26px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 8px;
}

.db-mc2-ic svg {
	width: 15px;
	height: 15px;
}

.db-mc2 p {
	font-size: 12px;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0;
}

.db-mc2-s {
	margin-top: 10px;
	height: 26px;
}

.db-mc2-s svg {
	display: block;
	width: 100%;
	height: 100%;
}

.db-pill,
.db-up-chip {
	flex: none;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid transparent;
}

.db-pill {
	color: var(--color-text-secondary);
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
}

.db-up-chip {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	padding: 0;
	color: #34d399;
	background: rgba(16, 185, 129, 0.14);
	border-color: rgba(16, 185, 129, 0.3);
}

.db-up-chip svg {
	width: 12px;
	height: 12px;
}

/* ─── Pie ────────────────────────────────────────────────────────────────── */
.db-m-ft {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 24px 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	flex: none;
}

.db-b {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.04);
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.db-b:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-text-primary);
}

.db-b-cy {
	border-color: rgba(34, 211, 238, 0.38);
	background: linear-gradient(135deg, rgba(14, 165, 233, 0.24), rgba(20, 184, 166, 0.2));
	color: #d8f7ff;
}

.db-b-vi {
	border-color: rgba(167, 139, 250, 0.38);
	background: linear-gradient(135deg, rgba(129, 140, 248, 0.22), rgba(167, 139, 250, 0.18));
	color: #e6e0ff;
}

.db-b-n { /* neutro: hereda .db-b */ }

.stg-mdl { max-width: 380px; }
.stg-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.stg-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

@media (max-width: 900px) {
	.db-ov { padding: 12px; }
	.db-m-hd { padding: 16px; gap: 12px; }
	.db-m-lg { width: 44px; height: 44px; }
	.db-m-t { font-size: 18px; }
	.db-m-badge { display: none; }
	.db-m-chart { padding: 0 16px; height: 84px; }
	.db-m-body { padding: 18px 16px 8px; }
	.db-g3, .db-g4 { grid-template-columns: 1fr; }
	/* Los tres botones no entran en una fila a 390px y "Close" quedaba
	   colgando solo. Apilados y a ancho completo, con la acción principal
	   arriba. */
	.db-m-ft {
		padding: 14px 16px 18px;
		flex-direction: column;
		align-items: stretch;
	}
}


/* ─── Modal del pipeline de análisis ──────────────────────────────────────── */
.pl-mdl { max-width: 1380px; height: 88vh; }
.pl-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 380px 1fr; }

.pl-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; }
.pl-check input { accent-color: var(--color-cyan); }

.pl-steps { list-style: none; margin: 0; padding: 14px; overflow-y: auto; border-right: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; gap: 10px; }
.pl-step { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 12px 14px; background: rgba(255, 255, 255, 0.025); }
.pl-step.is-running { border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 0 22px rgba(34, 211, 238, 0.12); }
.pl-step-h { display: flex; align-items: center; gap: 10px; }
.pl-step-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(34, 211, 238, 0.14); color: var(--color-cyan); flex: none; }
.pl-step-t { font-weight: 600; font-size: 14px; flex: 1; }
.pl-step-f { font-size: 11.5px; color: var(--color-cyan); background: rgba(34, 211, 238, 0.08); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.pl-step p { margin: 8px 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--color-text-secondary); }
.pl-step details { font-size: 12px; color: var(--color-text-muted); }
.pl-step summary { cursor: pointer; color: var(--color-text-secondary); margin-bottom: 4px; }
.pl-step dl { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.pl-step dt { color: var(--color-text-muted); text-transform: capitalize; }
.pl-step dd { margin: 0; color: var(--color-text-secondary); word-break: break-word; }
.pl-step-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.pl-last { font-size: 11.5px; color: var(--color-text-muted); }
.pl-last.ok { color: var(--color-green); }
.pl-last.error { color: var(--color-red); }
.pl-last.running { color: var(--color-cyan); }
.pl-step .db-b { padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }
.pl-step-ft .pl-last { flex: 1; }
.pl-steps, .pl-log { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
.pl-step .db-b[disabled], #plRunAll[disabled] { opacity: 0.45; cursor: not-allowed; }

.pl-log-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pl-log-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.pl-log-t { font-weight: 600; font-size: 13px; }
.pl-log-st { flex: 1; font-size: 12px; color: var(--color-text-muted); }
.pl-log {
	flex: 1;
	overflow: auto;
	padding: 12px 16px;
	font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
	background: rgba(0, 0, 0, 0.35);
	white-space: pre-wrap;
	word-break: break-word;
}
.pl-log.hide-calc .pl-l-calc { display: none; }
.pl-l { display: block; color: var(--color-text-secondary); }
.pl-l time { color: var(--color-text-muted); margin-right: 8px; }
.pl-l-step { color: var(--color-cyan); font-weight: 700; margin-top: 10px; }
.pl-l-calc { color: #94a3b8; }
.pl-l-ok { color: var(--color-green); }
.pl-l-warn { color: var(--color-amber); }
.pl-l-error { color: var(--color-red); font-weight: 600; }
.pl-log-empty { color: var(--color-text-muted); font-family: inherit; }


/* ─── Modal de card: sección E, recorrido por el pipeline ─────────────────── */
.tr-wrap { display: flex; flex-direction: column; gap: 10px; }
.tr-muted { color: var(--color-text-muted); font-size: 13px; margin: 0; }
.tr-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tr-stage { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 12px; background: rgba(255, 255, 255, 0.025); font-size: 12px; }
.tr-stage.is-pass { border-color: rgba(52, 211, 153, 0.3); }
.tr-stage.is-out { opacity: 0.7; }
.tr-stage header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tr-stage header b { flex: 1; font-size: 13px; }
.tr-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: rgba(52, 211, 153, 0.14); color: #34d399; flex: none; }
.tr-badge { font-size: 11px; color: var(--color-cyan); background: rgba(34, 211, 238, 0.08); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.tr-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; margin: 0 0 8px; }
.tr-kv dt { color: var(--color-text-muted); }
.tr-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.tr-bar { display: grid; grid-template-columns: 92px 1fr 32px; align-items: center; gap: 6px; margin: 3px 0; color: var(--color-text-muted); }
.tr-bar i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.tr-bar b { display: block; height: 100%; border-radius: 3px; }
.tr-bar em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.tr-sub { margin: 8px 0 2px; color: var(--color-text-secondary); font-weight: 600; }
.tr-warn { margin: 6px 0 0; color: var(--color-amber); }
.tr-h { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); }
.tr-tbl { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.tr-tbl th { text-align: left; font-weight: 500; color: var(--color-text-muted); padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
/* Encabezado fijo sólo dentro de la tabla con scroll propio (trades); en el
   scroll del modal se encimaba con las filas. */
.tr-scroll .tr-tbl th { position: sticky; top: 0; background: rgb(8, 13, 24); }
.tr-tbl td { padding: 5px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: var(--color-text-secondary); white-space: nowrap; }
.tr-tbl td.tr-p { white-space: normal; color: var(--color-text-muted); font-size: 11.5px; }
.tr-tbl tr.is-cur td { background: rgba(167, 139, 250, 0.1); color: var(--color-text-primary); }
.tr-tbl tr.is-neg td { opacity: 0.55; }
.tr-pos { color: #34d399 !important; }
.tr-neg { color: #fb7185 !important; }
.tr-scroll { max-height: 260px; overflow: auto; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
.tr-iv { height: 150px; display: flex; flex-direction: column; }
.tr-iv svg { flex: 1; min-height: 0; }
.tr-iv-lg { display: flex; gap: 16px; font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 4px; }
@media (max-width: 900px) { .tr-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ─── Modal de card: filas simétricas ──────────────────────────────────────
   A KPIs · B embudo (4 etapas en fila) · C|D|E tres paneles de igual alto ·
   F|G dos paneles de igual alto. Las listas tienen alto fijo y scroll propio. */
.db-mdl-wide { width: 94vw; max-width: 1560px; max-height: 94vh; }
.db-mdl-wide .db-m-hd .db-b { padding: 8px 14px; font-size: 13px; }
.db-mdl-wide .db-m-chart { height: 52px; margin-top: 6px; }
.db-mdl-wide .db-m-sec { margin-bottom: 10px; }

/* Todo scroll del modal: pulgar tenue sobre fondo transparente. */
.db-mdl-wide,
.db-mdl-wide * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
.db-mdl-wide ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
.db-mdl-wide ::-webkit-scrollbar-track { background: transparent; }
.db-mdl-wide ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 8px; }
.db-mdl-wide ::-webkit-scrollbar-corner { background: transparent; }

.dm-body { flex: 1 1 auto; min-height: 0; gap: 18px; padding: 16px 24px 22px; }
.dm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dm-kpis .db-mc2 { padding: 10px 12px; }
.dm-kpis .db-mc2 p { font-size: 11.5px; line-height: 1.4; }

.dm-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dm-stages .tr-stage { padding: 11px 12px; font-size: 11.5px; }

.dm-row { display: grid; gap: 12px; }
.dm-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dm-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dm-pn {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 236px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.02);
}
.dm-pn-tall { height: 310px; }
.dm-list { flex: 1; min-height: 0; overflow: auto; background: transparent; }
.dm-iv { flex: 1; min-height: 0; margin-top: 8px; }
.dm-iv .tr-iv { height: 100%; }

.db-rows { display: flex; flex-direction: column; gap: 6px; }
.db-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.02);
}
.db-row .db-mc2-ic { width: 24px; height: 24px; }
.db-row b { display: block; font-size: 12.5px; font-weight: 600; }
.db-row span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--color-text-secondary); }

/* Tablas dentro de paneles: encabezado fijo al hacer scroll, fondo del panel. */
.dm-list .tr-tbl th { position: sticky; top: 0; z-index: 1; background: rgb(12, 17, 28); }
.tr-tbl tr[title] { cursor: help; }
.db-m-sec .tr-muted { font-weight: 400; font-size: 11.5px; }

@media (max-width: 1100px) {
	.dm-kpis, .dm-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dm-row-3, .dm-row-2 { grid-template-columns: minmax(0, 1fr); }
}