/* =====================================================================
   Bot de trading semanal
   Interfaz original inspirada visualmente en Deltabadger: tipografía Montserrat,
   superficies claras, azul intenso, tarjetas redondeadas y navegación lateral.
   ===================================================================== */

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ui-height: 6rem;
	--ui-height-xl: 7rem;
	--ui-padding: 2rem;
	--ui-radius: 1.25rem;
	font-size: 8px;
	font-family: var(--font-family);
}

@media (min-width: 768px) {
	:root { --ui-padding: 3rem; }
}

/* ---------- Paleta clara ---------- */
:root {
	--sky: #0000ff;
	--link: var(--sky);
	--ink: #001933;
	--ash: #506181;
	--stone: #738197;
	--concrete: #9ca8b8;
	--steel: #c2cad4;
	--silver: #e2e6eb;
	--paper: #f8f9fa;
	--washed: #ffffff;
	--paper-on-washed: #f5f6f8;
	--white: #ffffff;
	--grass: #00b373;
	--berry: #ee0060;
	--warning: #ff8000;
	--autocomplete: #ccddee;
	--menulink: #778899;
	--menulink-active: #0000ff;
	--label: #061a4fba;
	--input-border: #8894b6;
	--input-text-inactive: #8894b6;
	--modal-backdrop: #bcc4d3aa;
	--modal-background: #ffffff;
	--dropdown-bg: #ffffff;
	--dropdown-border: #d9e0e7;
	--text-faded: #8b92a7;
	--widget-shadow-line: #00224411;
	--shadow-basic: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, .07), 0.25rem 0.25rem 1rem rgba(0, 0, 0, .05);
	--shadow-strong: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, .14), 0.25rem 0.25rem 1rem rgba(0, 0, 0, .1);
	--insight-background: #8098dd44;
	--insight-warning-background: #ffd7ab;
}

/* ---------- Paleta oscura ---------- */
@media (prefers-color-scheme: dark) {
	:root {
		--sky: #2b4bff;
		--link: #ddeeff;
		--ink: #ddeeff;
		--ash: #90aed7;
		--stone: #517095;
		--concrete: #4f6991;
		--steel: #1a395e;
		--silver: #021429;
		--paper: #001933;
		--washed: #0d223f;
		--paper-on-washed: #122949;
		--white: #ffffff;
		--grass: #00b373;
		--berry: #ee0060;
		--autocomplete: #122b49;
		--menulink: #3a5a81;
		--menulink-active: #ddeeff;
		--label: #b2d5ffc9;
		--input-border: #8894b6;
		--input-text-inactive: #8894b6;
		--modal-backdrop: #001122cc;
		--modal-background: #0d203c;
		--dropdown-bg: #172a46;
		--dropdown-border: #313c59;
		--text-faded: #44648d;
		--widget-shadow-line: #00112288;
		--insight-background: #0000ff44;
		--insight-warning-background: #884f00b0;
	}
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ash);
	font-size: 2rem;
	font-weight: 450;
	line-height: 3rem;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 600; }
p { margin: 0 0 2rem; }
p:last-child { margin-bottom: 0; }
b, strong { color: var(--ink); font-weight: 600; }
small { font-size: 1.75rem; }

/* ---------- Rail de menú ---------- */
.menu {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	padding: 1rem;
	width: 6rem;
	box-sizing: content-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	z-index: 100;
}

.menu__section { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.menu__logo {
	margin-top: 1rem;
	width: 6rem;
	height: 6rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--link);
	font-weight: 800;
	font-size: 2.5rem;
	letter-spacing: -0.05em;
}

.menu__item {
	height: 6rem;
	width: 6rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	border-radius: 2rem;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--menulink);
	padding: 0;
}
.menu button.menu__item { border: 0; cursor: pointer; font: inherit; }
.portfolio-select { width: auto; min-width: 16rem; height: var(--ui-height); }
.menu__item svg { width: 3rem; height: 3rem; fill: currentColor; }
.menu__item:hover { background: var(--silver); }
.menu__item--active {
	background: var(--washed);
	box-shadow: var(--shadow-basic);
	color: var(--menulink-active);
	cursor: default;
}
.menu__item .tooltip {
	position: absolute;
	left: 7rem;
	white-space: nowrap;
	padding: 0.5rem 1.25rem;
	line-height: 3rem;
	background: var(--sky);
	color: #fff;
	border-radius: var(--ui-radius);
	font-size: 1.75rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s ease;
	z-index: 10;
}
.menu__item:hover .tooltip { opacity: 1; }

/* Menú inferior en móvil */
@media only screen and (max-width: 767.9px) {
	.menu {
		top: auto;
		right: 0;
		flex-direction: row;
		width: auto;
		background: var(--washed);
		box-shadow: var(--shadow-strong);
		padding: 0.5rem 1rem;
		justify-content: space-around;
	}
	.menu__section { flex-direction: row; }
	.menu__logo { display: none; }
	.menu__item .tooltip { display: none; }
}

/* ---------- Estructura ---------- */
.main {
	display: flex;
	justify-content: center;
	padding: 0 1rem 1rem;
	min-height: 100vh;
}
@media only screen and (min-width: 768px) {
	.main { padding: 1rem 2rem 2rem 9.125rem; }
}
@media only screen and (max-width: 767.9px) {
	.main { padding-bottom: 9rem; }
}
.main-content { flex: 1; min-width: 0; max-width: 192rem; }

.page-head {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 1rem 0;
	margin-bottom: 1rem;
	font-weight: 600;
	justify-content: space-between;
	flex-wrap: wrap;
}
.page-head__title { font-size: 3rem; line-height: 4rem; color: var(--ink); }
.page-head__subtitle { color: var(--stone); font-weight: 500; font-size: 1.875rem; }
.page-head__controls { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }

.columns { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.columns--3 { grid-template-columns: repeat(3, 1fr); }
@media only screen and (max-width: 1023.9px) {
	.columns, .columns--3 { grid-template-columns: 1fr; }
}
/* min-width:0 en todo lo que es celda de grid o flex: sin esto una tabla ancha
   (un mensaje largo del registro) estira la columna y desborda la página entera
   hacia la derecha, tapando el rail del menú. */
.columns > *, .columns--3 > * { min-width: 0; }
.column { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* ---------- Widgets ---------- */
.widget {
	color: var(--ash);
	background: var(--washed);
	padding: var(--ui-padding);
	display: flex;
	flex-direction: column;
	gap: 3rem;
	border-radius: 2rem;
	box-shadow: var(--shadow-basic);
}
.widget--tight { gap: 1.5rem; }
.widget--thin { padding: 1.5rem 2rem; }
.widget--info { background: var(--insight-background); }
.widget--warning { background: var(--insight-warning-background); }
.widget__title { font-size: 2.25rem; line-height: 3rem; color: var(--ink); font-weight: 600; }
.widget__head { display: flex; justify-content: space-between; gap: 2rem; align-items: center; flex-wrap: wrap; }
.widget-group {
	border-radius: 2rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	box-shadow: var(--shadow-basic);
}
.widget-group .widget { border-radius: 0; box-shadow: none; }

/* ---------- Rejilla de datos ---------- */
.data-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 0.25rem;
	border-radius: 2rem;
	overflow: hidden;
}
.data-grid__item {
	background: var(--washed);
	padding: 2rem var(--ui-padding);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.data-grid__item__label { color: var(--concrete); font-size: 1.75rem; font-weight: 600; line-height: 2.5rem; }
.data-grid__item__value { color: var(--ink); font-size: 3rem; font-weight: 600; line-height: 4rem; }
.data-grid__item__value--sm { font-size: 2.25rem; line-height: 3rem; }
.value--up { color: var(--grass); }
.value--down { color: var(--berry); }

/* ---------- Botones ---------- */
.button {
	font-family: inherit;
	font-size: 2rem;
	font-weight: 600;
	line-height: 2rem;
	border: 0;
	cursor: pointer;
	align-items: center;
	border-radius: var(--ui-radius);
	height: var(--ui-height);
	display: inline-flex;
	justify-content: center;
	white-space: nowrap;
	color: var(--white);
	background: var(--sky);
	padding: 0 2rem;
	gap: 0.75rem;
	text-decoration: none !important;
	box-shadow: var(--shadow-strong);
	min-width: 8rem;
}
.button:hover { filter: brightness(1.08); }
.button--large { font-size: 2rem; padding: 0 4rem; height: var(--ui-height-xl); }
.button--success { background: var(--grass); }
.button--danger { background: var(--berry); }
.button--secondary { background: var(--washed); color: var(--link); }
.button--outline {
	background: none;
	color: var(--link);
	border: 0.25rem solid var(--link);
	padding: 0 calc(2rem - 0.25rem);
	box-shadow: none;
}
.button--link {
	background: none;
	color: var(--link);
	box-shadow: none;
	padding: 0;
	min-width: 0;
	height: auto;
}
.button--small { height: 4.5rem; font-size: 1.75rem; padding: 0 1.5rem; min-width: 0; }
.button[disabled] {
	cursor: not-allowed;
	pointer-events: none;
	opacity: .5;
	background: none;
	color: var(--stone) !important;
	border: 0.25rem solid var(--stone);
	box-shadow: none;
}
.buttons { display: flex; gap: 2rem; flex-wrap: wrap; }

/* ---------- Formularios ---------- */
.form { display: flex; flex-direction: column; gap: 2rem; }
.form__row { display: flex; flex-direction: column; gap: 0.75rem; }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 2rem; }
.form__row--wide { grid-column: 1 / -1; }
.form__label { color: var(--label); font-size: 1.75rem; font-weight: 600; line-height: 2.5rem; }
.form__input,
.form__select,
.form__textarea {
	font-family: inherit;
	font-size: 2rem;
	line-height: 3rem;
	color: var(--ink);
	background: var(--washed);
	border: 0.25rem solid var(--input-border);
	border-radius: var(--ui-radius);
	padding: 1rem 1.5rem;
	width: 100%;
	min-height: var(--ui-height);
}
.form__textarea { min-height: 12rem; resize: vertical; }
.form__input:focus,
.form__select:focus,
.form__textarea:focus { outline: none; border-color: var(--sky); }
.form__input::placeholder { color: var(--input-text-inactive); }
/* Secreto de IBKR: input de texto (ningún gestor de contraseñas lo autorrellena) pero
   enmascarado visualmente. Donde text-security no exista se ve en claro, que es preferible
   a que el navegador machaque el valor pegado con la contraseña del panel. */
.form__input--secret {
	-webkit-text-security: disc;
	text-security: disc;
	letter-spacing: 0.1em;
}
.form__info { color: var(--stone); font-size: 1.75rem; line-height: 2.75rem; }
.form__error { color: var(--berry); font-size: 1.875rem; font-weight: 600; }

/* ---------- Tabla ---------- */
.table-wrap { overflow-x: auto; margin: 0 calc(var(--ui-padding) * -1); min-width: 0; max-width: 100%; }
table.table { width: 100%; border-collapse: collapse; white-space: nowrap; line-height: 3rem; }
/* El registro es texto, no cifras: se parte en varias líneas en vez de estirar la tabla. */
table.table--wrap { white-space: normal; }
table.table--wrap td:first-child { min-width: 24rem; }
table.table th {
	color: var(--concrete);
	font-weight: 600;
	text-align: right;
	padding: 1.5rem 0 1rem var(--ui-padding);
	font-size: 1.75rem;
}
table.table td {
	text-align: right;
	padding: 0.75rem 0 0.75rem var(--ui-padding);
	border: none;
	color: var(--ash);
}
table.table th:first-child, table.table td:first-child { text-align: left; }
table.table th:last-child, table.table td:last-child { padding-right: var(--ui-padding); }
table.table tbody tr:hover td { background: var(--paper-on-washed); }
table.table td.strong { color: var(--ink); font-weight: 600; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- Fichas de bot ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(34rem, 1fr)); gap: 1rem; }
.bot-tile {
	padding: 2rem;
	gap: 1rem;
	position: relative;
	overflow: hidden;
	background: var(--washed);
	border-radius: 2rem;
	box-shadow: var(--shadow-basic);
	display: flex;
	flex-direction: column;
}
.bot-tile__header { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; }
.bot-tile__title {
	font-weight: 550;
	font-size: 2.125rem;
	line-height: 2.5rem;
	color: var(--ink);
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.bot-tile__subtitle { color: var(--ash); font-size: 1.75rem; line-height: 3rem; }
.bot-tile__meta { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.bot-tile__footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	margin-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.bot-tile__footer .buttons { width: 100%; }
.bot-tile::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 0.5rem;
	width: 100%;
	background: var(--silver);
}
.bot-tile--running::after { background: var(--grass); }

/* ---------- Tarjetas de estrategia (solo lectura) ---------- */
.strategy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34rem, 1fr)); gap: 1.5rem; }
.strategy-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2.5rem;
	background: var(--paper-on-washed);
	border-radius: 2rem;
	box-shadow: var(--shadow-basic);
}
.strategy-card__name { color: var(--ink); font-weight: 600; font-size: 2.25rem; line-height: 3rem; }
.strategy-card__desc { color: var(--ash); font-size: 1.75rem; line-height: 2.75rem; }
.strategy-card__figure {
	color: var(--grass);
	font-weight: 700;
	font-size: 4.5rem;
	line-height: 5rem;
	margin-top: 0.5rem;
}
.strategy-card__unit { color: var(--ash); font-weight: 600; font-size: 1.75rem; margin-left: 0.5rem; }
.strategy-card__figure--empty { color: var(--stone); font-weight: 600; font-size: 2.25rem; line-height: 3rem; }
.strategy-card__samples { color: var(--stone); font-size: 1.625rem; line-height: 2.5rem; }
.strategy-card__chip { align-self: flex-start; margin-top: 0.5rem; }

/* ---------- Chips y estados ---------- */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 1.25rem;
	border-radius: 2rem;
	background: var(--silver);
	color: var(--ash);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 2.75rem;
}
.chip--sky { background: var(--sky); color: #fff; }
.chip--grass { background: var(--grass); color: #fff; }
.chip--berry { background: var(--berry); color: #fff; }
.chip--warning { background: var(--warning); color: #fff; }
.chip--ghost { background: none; border: 0.25rem solid var(--steel); }

.status-dot { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--steel); display: inline-block; }
.status-dot--ok { background: var(--grass); }
.status-dot--warn { background: var(--warning); }
.status-dot--bad { background: var(--berry); }

/* ---------- Pasos del asistente ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3rem; counter-reset: step; }
.steps > li { display: flex; gap: 2rem; }
.steps > li::before {
	counter-increment: step;
	content: counter(step);
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--sky);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 2rem;
}
.steps__body { display: flex; flex-direction: column; gap: 1.5rem; flex: 1; min-width: 0; }
.steps__title { color: var(--ink); font-weight: 600; font-size: 2.125rem; }

/* ---------- Modal ---------- */
.modal-backdrop {
	position: fixed;
	inset: 0;
	background: var(--modal-backdrop);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	z-index: 200;
	overflow-y: auto;
}
.modal {
	background: var(--modal-background);
	border-radius: 2rem;
	box-shadow: var(--shadow-strong);
	padding: var(--ui-padding);
	width: 100%;
	max-width: 80rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin: auto;
}
.modal__title { font-size: 2.75rem; line-height: 3.5rem; color: var(--ink); font-weight: 700; }

/* ---------- Avisos ---------- */
.toast-host { position: fixed; right: 2rem; bottom: 2rem; display: flex; flex-direction: column; gap: 1rem; z-index: 300; }
.toast {
	background: var(--ink);
	color: var(--paper);
	padding: 1.25rem 2rem;
	border-radius: var(--ui-radius);
	box-shadow: var(--shadow-strong);
	font-size: 1.875rem;
	max-width: 46rem;
}
.toast--bad { background: var(--berry); color: #fff; }
.toast--ok { background: var(--grass); color: #fff; }

/* ---------- Varios ---------- */
.empty {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: flex-start;
	color: var(--stone);
}
.spinner {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 0.375rem solid var(--steel);
	border-top-color: var(--sky);
	animation: spin 0.8s linear infinite;
	display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.muted { color: var(--stone); }
.faded { color: var(--text-faded); }
.pem {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.5rem;
	line-height: 2.25rem;
	background: var(--paper-on-washed);
	border-radius: var(--ui-radius);
	padding: 1.5rem;
	overflow-x: auto;
	white-space: pre;
	color: var(--ash);
}
.hidden { display: none !important; }

.login-shell {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 3rem;
}
.login-card { width: min(48rem, 100%); gap: 2rem; }
.login-card h1 { color: var(--ink); font-size: 3.5rem; margin: 0; }
.login-mark {
	width: 7rem;
	height: 7rem;
	display: grid;
	place-items: center;
	border-radius: 2rem;
	background: var(--sky);
	color: white;
	font-size: 2.5rem;
	font-weight: 800;
}