/* (11-01, Yurien: «analítica con una tabla que enseñe el nombre de la estrategia, el precio de entrada, precio de
   salida, el símbolo, cuánto dinero ganó, cuánto perdió, cuál es el win rate, el profit factor, el Sharpe») Los
   estilos de la maqueta aprobada (maqueta/maqueta_resultados_corporativa.html), sin el letrero de MAQUETA y con lo que
   la maqueta tenía escrito dentro de cada etiqueta pasado aquí (el servidor no deja estilos ni guiones sueltos). */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f8; --surface: #ffffff; --surface-2: #f7f9fc; --border: #e2e7ef; --grid: #edf1f6;
  --text: #0f1b2d; --text-2: #4a5a70; --muted: #7b889b;
  --brand: #0b2545; --brand-2: #13315c; --accent: #2a78d6; --accent-soft: #e8f1fc;
  --gain: #12844a; --gain-fill: #1f9d55; --loss: #c0392f; --loss-fill: #d64545; --neutral: #e6e9ee;
  --warn: #8a5a00; --warn-soft: #fff4d6; --warn-line: #f0dca0;
  --shadow: 0 1px 2px rgba(15,27,45,.06), 0 4px 16px rgba(15,27,45,.05);
  /* (11-01) el color FIJO de cada estrategia (por su lugar en la lista de estrategias, no por su puesto en la tabla):
     los 8 tonos de la paleta revisada, cada tema con su paso; de la novena en adelante, gris (nunca se repite un tono) */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --s0: #9aa6b8;
  --eq-line: #2a78d6; --dd-line: #c0392f;
}
/* (11-01, Yurien y su amigo: «el mismo formato que estamos manteniendo con TRAIZ… los mismos colores oscuros»)
   la paleta oscura de TRAIZ (traiq/ui/theme.py): fondo, paneles en capas, azul de la «A», menta sube y coral baja */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b14; --surface: #0d1422; --surface-2: #141e33; --border: #1f2c47; --grid: #172238;
  --text: #e6edf7; --text-2: #8696b3; --muted: #66779a;
  --brand: #0d1422; --brand-2: #8fd8ff; --accent: #1a9cf0; --accent-soft: rgba(26,156,240,.14);
  --gain: #2fd39a; --gain-fill: #2fd39a; --loss: #ff5d73; --loss-fill: #ff5d73; --neutral: #1c2943;
  --warn: #ffd27a; --warn-soft: #3b2a06; --warn-line: #5c4410;
  --shadow: none;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --s0: #4a5a78;
  --eq-line: #1a9cf0; --dd-line: #ff5d73;
}
[hidden] { display: none !important; }
[data-theme="dark"] .topbar { border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #0232b8, #0090f0 55%, #00c8f5) 1; }
[data-theme="dark"] .l-brand { background: radial-gradient(120% 90% at 0% 100%, rgba(2,50,184,.55), transparent 60%),
  linear-gradient(160deg, #070b14 0%, #0d1422 55%, #0a1f4a 100%); border-right: 1px solid #1f2c47; }
[data-theme="dark"] .btn.primary { background: linear-gradient(60deg, #0232b8, #0090f0 55%, #00c8f5); border-color: #0090f0; }
[data-theme="dark"] .seg button.on { background: rgba(26,156,240,.16); color: #e6edf7; box-shadow: inset 0 0 0 1px rgba(26,156,240,.55); }
[data-theme="dark"] .summary { border-left-color: #19c3f0; }
.wmimg { height: 30px; display: block; }
.brand { display: flex; align-items: center; gap: 10px; }
.wmicon { height: 38px; width: 38px; border-radius: 9px; display: block; }
.wmlogo { height: 34px; display: block; }
.brand em { margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--border); }
@media (max-width: 760px) { .wmlogo { height: 26px; } .wmicon { height: 32px; width: 32px; } .brand em { display: none; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 13.5px/1.5 "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif; }
button, input, select { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--gain); } .down { color: var(--loss); }
.mt10 { margin-top: 10px; } .mt12 { margin-top: 12px; } .mt14 { margin-top: 14px; }
.noscript { padding: 30px; text-align: center; color: var(--text-2); }

/* ---------- acceso ---------- */
#login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.l-brand { background: linear-gradient(160deg, #0b2545 0%, #13315c 60%, #1d4e89 100%); color: #e9f0fa; padding: 56px 56px 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.l-brand .wm { font-weight: 800; font-size: 28px; letter-spacing: .6px; }
.l-brand .wm span { color: #7fb2f0; }
.l-brand h2 { font-size: 30px; line-height: 1.2; margin: 0 0 12px; font-weight: 600; max-width: 460px; }
.l-brand p { color: #b8c9e1; max-width: 460px; margin: 0; }
.l-brand ul { list-style: none; padding: 0; margin: 26px 0 0; color: #d6e2f3; }
.l-brand li { margin: 8px 0; padding-left: 22px; position: relative; }
.l-brand li:before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 2px; background: #7fb2f0; }
.l-brand small { color: #8fa6c6; }
.l-form { display: grid; place-items: center; padding: 32px 20px; background: var(--surface); }
.l-form form { width: 100%; max-width: 360px; }
.l-form h1 { font-size: 22px; margin: 0 0 4px; }
.l-form p { color: var(--text-2); margin: 0 0 22px; }
.l-form label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .6px; }
.field { width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2);
  font-size: 18px; letter-spacing: 3px; text-transform: uppercase; }
.field:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn { border: 1px solid var(--border); background: var(--surface); border-radius: 7px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:disabled:hover { border-color: var(--border); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
[data-theme="dark"] .btn.primary { background: var(--accent); border-color: var(--accent); }
.l-form .btn.primary { width: 100%; margin-top: 14px; padding: 12px; font-size: 15px; }
.l-form .fine { margin-top: 16px; font-size: 12px; color: var(--muted); }
.err { color: var(--loss); font-size: 13px; min-height: 18px; margin-top: 8px; }
.err.info { color: var(--text-2); }
@media (max-width: 820px) { #login { grid-template-columns: 1fr; } .l-brand { padding: 32px 22px; } .l-brand h2 { font-size: 22px; } }

/* (11-01, Yurien: «agrégale la imagen del robot en el lado izquierdo que quede difundida en el color de la página y el
   logo e ícono que se vea más grande» → «ok realiza el cambio»; «el letrero blanco que baje un poco más abajo para que
   se vea la imagen») lo mismo que la maqueta aprobada: el robot fundido, logo e ícono grandes y el texto abajo */
.l-brand { position: relative; overflow: hidden; justify-content: flex-start; }
.l-brand::before { content: ""; position: absolute; inset: 0; background: url("img/robot.webp") 108% 42% / auto 112% no-repeat;
  opacity: .62; filter: saturate(.85) contrast(1.05);
  -webkit-mask-image: radial-gradient(60% 75% at 82% 46%, #000 30%, rgba(0,0,0,.55) 55%, transparent 80%);
          mask-image: radial-gradient(60% 75% at 82% 46%, #000 30%, rgba(0,0,0,.55) 55%, transparent 80%); }
.l-brand::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,11,20,.96) 0%, rgba(7,11,20,.80) 32%, rgba(7,11,20,.20) 62%, rgba(13,20,34,.55) 100%),
              radial-gradient(120% 90% at 0% 100%, rgba(2,50,184,.50), transparent 60%),
              linear-gradient(0deg, rgba(7,11,20,.85), transparent 30%, transparent 75%, rgba(7,11,20,.7)); }
.l-brand > * { position: relative; z-index: 1; }
.l-brand > div:nth-child(2) { margin-top: auto; margin-bottom: 34px; }
.l-brand > div:nth-child(2) h2 { text-shadow: 0 2px 18px rgba(0,0,0,.85); }
.lg { display: flex; align-items: center; gap: 16px; }
.lg-icon { height: 86px; width: 86px; border-radius: 18px; box-shadow: 0 0 28px rgba(26,156,240,.35); display: block; }
.lg-word { height: 78px; display: block; }
.lg > span { font-weight: 800; font-size: 40px; letter-spacing: .6px; }  /* sin la imagen: el nombre escrito */
.lg > span span { color: #7fb2f0; }
.wmicon { height: 46px; width: 46px; } .wmlogo { height: 42px; }
@media (max-width: 820px) { .lg-icon { height: 60px; width: 60px; } .lg-word { height: 54px; } .l-brand::before { opacity: .35; }
  .l-brand > div:nth-child(2) { margin-top: 40px; margin-bottom: 18px; } }
@media (max-width: 760px) { .wmlogo { height: 28px; } .wmicon { height: 34px; width: 34px; } }

/* ---------- reporte ---------- */
.topbar { background: var(--brand); color: #e9f0fa; }
.topbar .in { max-width: 1320px; margin: 0 auto; padding: 12px 20px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
.topbar .wm { font-weight: 800; font-size: 19px; letter-spacing: .5px; }
.topbar .wm span { color: #7fb2f0; }
.topbar .wm em { font-style: normal; font-weight: 500; color: #b8c9e1; font-size: 14px; margin-left: 8px; }
.topbar .meta { color: #b8c9e1; font-size: 12.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar .meta > span { white-space: nowrap; }
[data-theme="light"] .topbar .meta { color: #b8c9e1; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61,220,132,.2); flex: none; }
.pulse.stale { background: #f5b942; box-shadow: 0 0 0 3px rgba(245,185,66,.22); }
.pulse.off { background: #8696b3; box-shadow: none; }
/* (11-01) «sin datos nuevos desde…»: TRAIBOT puede estar cerrado (ámbar, como un aviso) */
.asof-stale { color: #ffd27a; }
.net { color: #ffd27a; }
.hello { margin-left: 10px; color: #8fd8ff; }
.role { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #8fd8ff;
  border: 1px solid rgba(143,216,255,.5); border-radius: 4px; padding: 0 6px; }
.topbar .btn { background: transparent; color: #e9f0fa; border-color: rgba(255,255,255,.22); }
.topbar .btn:hover { border-color: #7fb2f0; }
.tb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.subbar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow); }
.subbar .in { max-width: 1320px; margin: 0 auto; padding: 8px 20px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 5px 11px; border-radius: 6px; cursor: pointer; color: var(--text-2); }
.seg button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
[data-theme="dark"] .seg button.on { background: var(--accent-soft); }
select, .search { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; max-width: 100%; }
.nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--text-2); text-decoration: none; padding: 5px 9px; border-radius: 6px; font-size: 12.5px; }
.nav a:hover { background: var(--accent-soft); color: var(--text); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 18px 20px 30px; }
.sec { margin-top: 22px; scroll-margin-top: 64px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.sec-h h2 { font-size: 15px; margin: 0; letter-spacing: .3px; text-transform: uppercase; color: var(--brand-2); }
[data-theme="dark"] .sec-h h2 { color: #9fc3f0; }
.sec-h .d { color: var(--muted); font-size: 12px; text-align: right; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 14px 16px; min-width: 0; }
.card h3 { font-size: 13px; margin: 0; font-weight: 600; }
.card .ch { color: var(--muted); font-size: 12px; margin: 1px 0 8px; }
.empty-card { padding: 28px 24px; }
.empty-card h3 { font-size: 16px; }
.empty-card p { color: var(--text-2); margin: 8px 0 0; max-width: 640px; }
.summary { font-size: 14.5px; line-height: 1.6; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: 12px 16px; box-shadow: var(--shadow); }
.summary .hint { color: var(--text-2); }
.kgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.k { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; box-shadow: var(--shadow); min-width: 0; }
.k .l { color: var(--text-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; display: flex; justify-content: space-between; gap: 6px; }
.k .v { font-size: 21px; font-weight: 700; margin-top: 3px; overflow-wrap: anywhere; }
.k .s { color: var(--muted); font-size: 11.5px; }
.i { cursor: help; color: var(--muted); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.g21 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
@media (max-width: 1100px) { .kgrid { grid-template-columns: repeat(3, 1fr); } .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .kgrid { grid-template-columns: repeat(2, 1fr); } .g2, .g3, .g21 { grid-template-columns: 1fr; } .nav { display: none; }
  /* (11-01) en el teléfono la barra de filtros no se queda pegada arriba: ocuparía media pantalla */
  .subbar { position: static; }
  .subbar .in, .topbar .in, .wrap { padding-left: 12px; padding-right: 12px; }
  .topbar .in { gap: 8px 12px; }
  .hello { margin-left: 0; }
  .k .v { font-size: 18px; }
  .sec-h { flex-direction: column; gap: 2px; }
  .sec-h .d { text-align: left; }
  .tb-actions .btn { padding: 6px 9px; font-size: 12.5px; }
  .search { min-width: 0; width: 100%; }
}
.chart { position: relative; }
.chart svg { display: block; width: 100%; }
/* (11-01) los colores de las gráficas por clase (sirven con los dos temas y con la regla del servidor) */
.chart .gl { stroke: var(--grid); }
.chart .gt { fill: var(--muted); font-size: 10.5px; }
.chart .z { stroke: var(--muted); stroke-width: 1; }
.chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .ln.eq { stroke: var(--eq-line); } .chart .ln.dd { stroke: var(--dd-line); }
.chart .st.eq { stop-color: var(--eq-line); } .chart .st.dd { stop-color: var(--dd-line); }
.chart .cx { stroke: var(--muted); }
.chart .cd { stroke: var(--surface); stroke-width: 2; }
.chart .cd.eq { fill: var(--eq-line); } .chart .cd.dd { fill: var(--dd-line); }
.chart .b-up { fill: var(--gain-fill); } .chart .b-down { fill: var(--loss-fill); }
.chart .hit { fill: transparent; }
.nodata { color: var(--muted); font-size: 12.5px; padding: 26px 0; text-align: center; border: 1px dashed var(--border); border-radius: 8px; }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 12.5px; }
.stats div:nth-child(odd) { color: var(--text-2); }
.stats div:nth-child(even) { text-align: right; font-weight: 600; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--grid); white-space: nowrap; }
th { color: var(--text-2); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; background: var(--surface-2); position: sticky; top: 0; }
th.s { cursor: pointer; user-select: none; } th.s:hover { color: var(--text); }
td.n, th.n { text-align: right; }
td.empty-row { color: var(--muted); }
tbody tr:hover { background: var(--surface-2); }
.scroll { overflow-x: auto; }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.tag.open { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; background: var(--s0); }
.small-mu { font-size: 11px; color: var(--muted); }
.cbar { position: relative; height: 8px; background: var(--grid); border-radius: 4px; min-width: 90px; }
.cbar i { position: absolute; top: 0; height: 8px; border-radius: 4px; }
.cbar i.up { background: var(--gain-fill); } .cbar i.down { background: var(--loss-fill); }
.hb { display: grid; grid-template-columns: 120px 1fr 110px; gap: 8px; align-items: center; margin: 7px 0; font-size: 12.5px; }
.hb > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb .bar { height: 12px; border-radius: 3px; background: var(--accent); min-width: 2px; }
.hb .r { text-align: right; }
/* el calendario: una columna por semana, una fila por día (lunes arriba) */
.cal-w { display: flex; gap: 6px; align-items: flex-start; }
.cal-d { display: grid; grid-template-rows: repeat(5, 18px); gap: 3px; font-size: 10.5px; color: var(--muted); line-height: 18px; }
.cal-d.c7 { grid-template-rows: repeat(7, 18px); }
.cal { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, 18px); grid-auto-columns: 18px; justify-content: start; gap: 3px; overflow-x: auto; padding-bottom: 4px; min-width: 0; flex: 1; }
.cal.c7 { grid-template-rows: repeat(7, 18px); }
.cal.none { display: block; }  /* (11-01) sin días: el aviso «Sin operaciones…» a lo ancho, no en una columna de 18 px */
.cal.none div { width: auto; height: auto; background: transparent; border-radius: 8px; }
.cal div { width: 18px; height: 18px; border-radius: 3px; background: var(--neutral); }
.cal div.empty { background: transparent; }
.cal div.gain { background: var(--gain-fill); }
.cal div.loss { background: var(--loss-fill); }
.cal div.idle { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cal-l { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.cal-l span { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.lg-l1 { background: var(--loss-fill); } .lg-l2 { background: var(--loss-fill); opacity: .45; } .lg-n { background: var(--neutral); }
.lg-g2 { background: var(--gain-fill); opacity: .45; } .lg-g1 { background: var(--gain-fill); }
.ops-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.search { min-width: 260px; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; color: var(--text-2); font-size: 12.5px; flex-wrap: wrap; }
.compare td:first-child { color: var(--text-2); }
.legal { color: var(--muted); font-size: 12px; line-height: 1.65; }
.legal b { color: var(--text-2); }
.tt { position: absolute; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 7px;
  padding: 7px 9px; font-size: 12px; white-space: nowrap; display: none; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
@media print { .subbar, .tb-actions, .pager button, #moreNav, .ops-bar { display: none !important; } .card, .k, .summary { box-shadow: none; } .sec { break-inside: avoid; } }