/* Terminal MetaTrader animado (CP.mtDemo): un dedo arrastra un Expert Advisor del Navegador al gráfico y el gráfico se convierte en el panel real. */
.mtd { --mt-bg: #161b26; --mt-bar: #1d2433; --mt-line: #2b3447; --mt-txt: #c9d3e3; --mt-ease: cubic-bezier(.22, 1, .36, 1); position: relative; }
/* ventana del terminal */
.mt { position: relative; border-radius: 12px; overflow: hidden; background: var(--mt-bg); border: 1px solid #2c3a57; box-shadow: 0 50px 90px -40px rgba(47,140,255,.55), 0 0 0 1px rgba(95,178,255,.08); user-select: none; }
.mt-title { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; background: #0f141e; border-bottom: 1px solid var(--mt-line); font: 600 11.5px var(--font); color: var(--mt-txt); }
.mt-title .mt-ico { width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #1fa1ff, #0b5fd6); display: grid; place-items: center; font: 800 9px var(--font); color: #fff; }
.mt-title .wbtn { margin-left: auto; display: flex; gap: 12px; color: #6f7c94; font-size: 12px; }
.mt-menu { display: flex; gap: 14px; height: 24px; align-items: center; padding: 0 10px; background: var(--mt-bar); font: 500 11px var(--font); color: #9aa6bb; border-bottom: 1px solid var(--mt-line); }
.mt-tools { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; background: var(--mt-bar); border-bottom: 1px solid var(--mt-line); }
.mt-tools i.tb { width: 20px; height: 20px; border-radius: 4px; background: rgba(255,255,255,.05); display: block; }
.mt-tools .sep { width: 1px; height: 18px; background: var(--mt-line); margin: 0 3px; }
.mt-tools .algo { margin-left: 6px; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 5px; font: 600 11px var(--font); color: #9aa6bb; background: rgba(255,255,255,.05); border: 1px solid var(--mt-line); transition: .3s; }
.mt-tools .algo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #e0524f; transition: .3s; }
.mt.algo-on .mt-tools .algo { color: #d6ffe9; border-color: rgba(47,211,138,.5); background: rgba(47,211,138,.12); }
.mt.algo-on .mt-tools .algo::before { background: #2fd38a; box-shadow: 0 0 8px #2fd38a; }
.mt-tools .tf { margin-left: auto; display: flex; gap: 2px; font: 600 10.5px var(--mono); color: #7f8ba2; }
.mt-tools .tf span { padding: 2px 5px; border-radius: 3px; } .mt-tools .tf .on { background: rgba(47,140,255,.25); color: #fff; }
.mt-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); height: 470px; }
.mt-nav { background: var(--mt-bg); border-right: 1px solid var(--mt-line); font: 500 11.5px var(--font); color: var(--mt-txt); overflow: hidden; display: flex; flex-direction: column; }
.mt-nav .hd { height: 24px; display: flex; align-items: center; padding: 0 8px; font-weight: 700; font-size: 11px; color: #fff; background: var(--mt-bar); border-bottom: 1px solid var(--mt-line); }
.mt-nav ul { list-style: none; margin: 0; padding: 6px 0; }
.mt-nav li { display: flex; align-items: center; gap: 6px; height: 23px; padding: 0 8px; white-space: nowrap; color: #9aa6bb; }
.mt-nav li .tw { width: 9px; color: #6f7c94; font-size: 9px; }
.mt-nav li.ea { padding-left: 26px; color: var(--mt-txt); border-radius: 4px; margin: 1px 4px; transition: background .2s, color .2s; }
.mt-nav li.ea img { width: 16px; height: 16px; border-radius: 4px; }
.mt-nav li.ea span { overflow: hidden; text-overflow: ellipsis; }
.mt-nav li.ea.hot { background: rgba(47,140,255,.28); color: #fff; }
.mt-nav li.ea.loaded::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #2fd38a; flex-shrink: 0; }
.mt-nav .tabs-b { margin-top: auto; display: flex; border-top: 1px solid var(--mt-line); font-size: 10.5px; }
.mt-nav .tabs-b span { flex: 1; text-align: center; padding: 5px 0; color: #7f8ba2; } .mt-nav .tabs-b .on { color: #fff; background: var(--mt-bar); }

.mt-chartwrap { position: relative; display: flex; flex-direction: column; min-width: 0; }
.mt-chart { position: relative; flex: 1; background: #fff; overflow: hidden; }
.mt-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mt-chart .sym { position: absolute; left: 6px; top: 4px; font: 600 10.5px var(--font); color: #222; z-index: 2; }
.mt-chart .eaname { position: absolute; right: 8px; top: 4px; font: 600 10.5px var(--font); color: #222; z-index: 4; opacity: 0; transition: opacity .3s; }
.mt-chart .eaname::after { content: "\263A"; margin-left: 4px; color: #1d8f4e; }
.mt.has-ea .mt-chart .eaname { opacity: 1; }
.mt-chart .panel { position: absolute; inset: 0; z-index: 3; clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%)); transition: clip-path .75s var(--mt-ease); }
.mt-chart .panel img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.mt-chart .panel.open { clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); }
.mt-chart .panel.fade { transition: opacity .45s; opacity: 0; clip-path: circle(150% at 50% 50%); }
.mt-chart .drop { position: absolute; inset: 10px; border: 2px dashed rgba(47,140,255,.7); border-radius: 8px; background: rgba(47,140,255,.06); z-index: 5; opacity: 0; transition: opacity .2s; pointer-events: none; }
.mt.dragging .mt-chart .drop { opacity: 1; }
.mt-ctabs { display: flex; height: 22px; background: var(--mt-bar); border-top: 1px solid var(--mt-line); font: 600 10.5px var(--font); }
.mt-ctabs span { padding: 0 12px; display: grid; place-items: center; color: #7f8ba2; border-right: 1px solid var(--mt-line); } .mt-ctabs .on { color: #fff; background: var(--mt-bg); }
.mt-tbox { height: 46px; background: var(--mt-bg); border-top: 1px solid var(--mt-line); font: 500 10.5px var(--mono); color: #8d99ae; padding: 5px 10px; overflow: hidden; }
.mt-tbox .tb-tabs { display: flex; gap: 12px; font: 600 10.5px var(--font); color: #6f7c94; margin-bottom: 4px; } .mt-tbox .tb-tabs .on { color: #fff; }
.mt-tbox .log { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; } .mt-tbox .log.ok { color: #7fe3b3; }

/* diálogo de carga del EA */
.mt-dlg { position: absolute; z-index: 6; left: 50%; top: 50%; width: 236px; transform: translate(-50%, -50%) scale(.92); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; background: #1d2433; border: 1px solid #3a4763; border-radius: 8px; box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); font: 500 11px var(--font); color: var(--mt-txt); }
.mt-dlg.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mt-dlg .dt { padding: 7px 10px; border-bottom: 1px solid var(--mt-line); font-weight: 700; color: #fff; display: flex; gap: 6px; align-items: center; } .mt-dlg .dt img { width: 14px; height: 14px; border-radius: 3px; }
.mt-dlg .dtabs { display: flex; gap: 12px; padding: 6px 10px 0; color: #7f8ba2; font-weight: 600; } .mt-dlg .dtabs .on { color: #fff; }
.mt-dlg .db { padding: 8px 10px; display: grid; gap: 6px; }
.mt-dlg .ck { display: flex; gap: 7px; align-items: center; } .mt-dlg .ck i { width: 12px; height: 12px; border-radius: 3px; background: #2f8cff; position: relative; } .mt-dlg .ck i::after { content: ""; position: absolute; left: 3px; top: 1px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mt-dlg .df { display: flex; justify-content: flex-end; gap: 6px; padding: 0 10px 9px; }
.mt-dlg .df span { padding: 4px 14px; border-radius: 4px; border: 1px solid var(--mt-line); color: #c9d3e3; } .mt-dlg .df .ok { background: #2f8cff; border-color: #2f8cff; color: #fff; transition: filter .15s; } .mt-dlg .df .ok.press { filter: brightness(1.35); }

/* cursor y elemento arrastrado */
.mtd .cursor { position: absolute; z-index: 10; left: 0; top: 0; width: 38px; height: 38px; pointer-events: none; transition: transform .8s var(--mt-ease); filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.mtd .cursor.fast { transition-duration: 1.05s; transition-timing-function: cubic-bezier(.45, 0, .25, 1); }
.mtd .cursor svg { width: 38px; height: 38px; transition: transform .14s; transform-origin: 18px 6px; }
.mtd .cursor.down svg { transform: scale(.86) translateY(1px); }
.mtd .cursor::before { content: ""; position: absolute; left: 18px; top: 6px; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(95,178,255,.9); background: rgba(95,178,255,.18); opacity: 0; transform: scale(.3); }
.mtd .cursor.down::before { animation: tap .55s ease-out; }
.mtd .cursor.hold::before { opacity: .9; transform: scale(.75); animation: none; transition: opacity .2s, transform .2s; }
@keyframes tap { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.25); } }
.mtd .ghost { position: absolute; z-index: 9; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: rgba(29,36,51,.92); border: 1px solid rgba(95,178,255,.6); font: 600 11px var(--font); color: #fff; white-space: nowrap; pointer-events: none; opacity: 0; transition: transform 1.05s cubic-bezier(.45, 0, .25, 1), opacity .15s; box-shadow: 0 10px 22px -8px rgba(0,0,0,.6); }
.mtd .ghost img { width: 14px; height: 14px; border-radius: 3px; }
.mtd .ghost.on { opacity: 1; }

.mt-replay { position: absolute; z-index: 11; right: 12px; bottom: 58px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(95,178,255,.5); background: rgba(6,13,26,.82); color: #fff; font: 600 12px var(--font); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s, background .2s; backdrop-filter: blur(4px); }
.mt-replay.on { opacity: 1; pointer-events: auto; } .mt-replay:hover { background: var(--accent); border-color: var(--accent); }
.mt-replay:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mt-replay svg { width: 14px; height: 14px; }
@media (max-width: 1180px) { .mt-body { height: 400px; } }
@media (max-width: 640px) { .mt-body { grid-template-columns: 112px minmax(0, 1fr); height: 300px; } .mt-menu, .mt-tools .tf { display: none; } .mt-nav li.ea { padding-left: 10px; } }
@media (prefers-reduced-motion: reduce) { .mt-chart .panel, .mtd .cursor, .mtd .ghost { transition: none !important; } }