section[aria-hidden="true"],main[aria-hidden="true"] { 
    display: none !important;
    visibility: hidden; 
}
.u-hidden{
  display: none !important;
}
.cursor-notallowed{
  cursor: not-allowed !important;
}

/* Pill BUY/SELL del modal "New Order" cuando la dirección no tiene margen
   disponible (ver calculatemarginsvolum en m7.marcx.js). NO aplicamos
   pointer-events:none porque queremos que el click siga flipando la dirección
   activa — el gate real de submit vive en #btncreateoperation.disabled y en
   #divbtnssellbuy.cursor-notallowed. */
[data-actionop-modal].pill-unfeasible{
  cursor: not-allowed !important;
  opacity: 0.45 !important;
  filter: grayscale(0.6);
  text-decoration: line-through;
}
[data-actionop-modal].pill-unfeasible:hover{
  opacity: 0.55 !important;
}

.ml-100{
  margin-left:30px !important;
}
.is-busy {
  position: relative;
  color: transparent !important;
  cursor: progress;
  pointer-events: none;
  user-select: none;
}
/* MARC: con is-busy, ocultar TODO el contenido del botón (texto + iconos/spans) y dejar SOLO la bolita.
   El color:transparent de .is-busy lo pisaban los color:!important de id (#btncreateoperation, pills),
   así que se fuerza aquí con id+clase; y los hijos (spans/iconos) se ocultan con visibility. */
#btncreateoperation.is-busy,
#btncreateoperationpartialclosure.is-busy,
#divbtnssellbuy [data-actionop-modal].is-busy{ color: transparent !important; }
.is-busy > *{ visibility: hidden !important; }

.is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;            /* centrado real (solo rota, sin translate) */
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  background: none;
  animation: marc-btn-spin .7s linear infinite;
  visibility: visible !important;   /* sobre la regla de ocultar hijos (por si acaso) */
}

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


/*
 * === VARIABLES ===
 */

.global-login {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 20px !important;
    text-align: center;
  }
  
  .global-login[aria-hidden="false"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .global-login__inner {
    position: relative;
    text-align: center;
  }
  
  .global-login__content {
    position: relative;
    display: inline-block;
    flex-direction: column;
    width: min(25rem, 92vw);
    padding: 1.25rem;
    padding-top: 2rem;
    margin-top: 0rem;
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 5%);
  }
  
  .global-login__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .global-login__brand-link {
    position: relative;
    width: auto;
    max-width: 340px;
    height: auto;
  }
  
  .global-login__brand-image > img {
    width: auto;
    height: auto;
    max-height: 40px;
    vertical-align: middle;
  }
  
  .global-login__brand-badge {
    position: absolute;
    top: -10px;
    right: 0;
    font-size: 8px;
    font-weight: 800;
    line-height: 15px;
    letter-spacing: 1px;
    padding: 1px 5px 0;
    border-radius: 3px;
  }
  
  .global-login__description {
    display: block;
    text-align: center;
  }
  
  
  .global-login__form {
    display: flex;
    flex-direction: column;
  }
  
  .global-login__form-message {
    position: relative;
    color:rgb(190, 12, 12);
    top: 0;
    right: -1px;
    line-height: 21px;
    border-radius: 3px;
    border-bottom-right-radius: 0;
    visibility: hidden;
  }
  
  .global-login__form-control {
    position: relative;
    display: block;
    margin-bottom: 2px;
  }
  
  .global-login__form-control label {
    color: #7f858d;
    font-size: 15px;
    font-weight: 500;
    display: block;
    letter-spacing: 0.03rem;
    margin-bottom: 8px;
  }
  
  .global-login__form-control input {
    font-size: 1rem;
    border: 1px solid rgb(116, 116, 117) !important;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    padding: 12px 10px;
    width: 100%;
  }
  
  .global-login__form-control input:focus {
    border: 1px solid rgb(12, 12, 88);
    box-shadow: 0 0 0 1px rgb(12, 12, 88);
    outline: none;
  }
  
  .global-login__form-control.is-errored input {
    border: 1px solid red !important;
    box-shadow: 0 0 0 1px red !important;
  }
  
  .global-login__form-control.is-errored .global-login__form-message {
    visibility: visible;
  }
  
  .global-login__form-control .control--checkbox,
  .global-login__form-control .control--checkbox + label {
    display: inline-block;
    vertical-align: middle;
    user-select: none;
  }
  
  .global-login__form-control .control--checkbox {
    margin-right: 5px;
  }
  
  .global-login__form-control .control--checkbox .control__indicator {
    background: #f7f7f7;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
  }
  
  
  .global-login .btn--login > .btn__icon {
    position: relative;
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    margin-top: -4px;

    transform: translateX(0px);
    transition: transform 0.2s cubic-bezier(0.1, 0.82, 0.25, 1);
  }
  
  .global-login .btn--login:hover > .btn__icon {
    transform: translateX(4px);
  }
  
  .global-login .btn--login > .btn__text {
    font-size:14px;
  }
  
  
  .global-login__footer {
    position: absolute;
    left: 0;
    width: 100%;
    font-size: 14px;
    padding: 5px;
    text-align: center;
  }
  
  .global-login__footer-link {
    color: rgb(12, 12, 88);
  }
  
  .global-login__footer-link:hover {
    text-decoration: underline;
  }
  
  .global-login__footer-link:not(:first-child)::before {
    content: "";
    position: relative;
    display: inline-block;
    width: 2px;
    height: 2px;
    line-height: 10px;
    margin: 0 5px;
    background: #fff;
    border-radius: 50%;
    vertical-align: middle;
  }
  .global-login__form-control.is-errored input {
    border: 1px solid red !important;
    box-shadow: 0 0 0 1px red !important;
}

.global-login__form-control.is-errored .global-login__form-message {
    visibility: visible;
}
.marcnowrap{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}
.marcnowrap2{
display: -webkit-box;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: 40px;
}


#iframedatatrade{
  transition: opacity 500ms linear;
}

#iframedatatradeoffcanvas{
  width:100%;
  height:200px;
  transition: opacity 500ms linear;
}
.error_reconectandoFLOTANTE{
    position:fixed;
    z-index:99999999999999;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:100% !important;
    color: #fff !important;
    background-color: rgba(0,0,0,0.7);
    opacity:0.7;
    user-select:none;
}
#muestromsgflota_msgaki{
  width: 100% !important;
height: 100% !important;
display: flex !important;
text-align: center;
flex-direction: column;
justify-content: space-around;
}
#btncreateoperation:disabled {
  cursor: not-allowed !important;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Para Firefox */
input[type="number"] {
appearance: textfield;
}

.tbgred{
  color:#ea4343 !important;
  font-weight:bolder;
}
.tbggreen{
  color:#00bea0 !important;
  font-weight:bolder;
}
.activeoffcanvas label.form-label{
  color:#4285F4 !important;
}
.select-none{
  user-select: none;
}
.pr-2{
  padding-right:10px !important;
}
.u-hiddencalendar{
  display:inline;
}
#calendar:not(.calendarexpand){
max-height: 80px;
overflow:hidden;
}
#calendar.calendarexpand .calendareventt{
  padding-top:10px !important;
  padding-bottom:10px !important;
}
.u-hiddencalendaryes{
display:none;
}
.page-wrapper{
margin-left:0px !important;
}
.accordion-button{
padding:10px;
}
.accordion-button i{
margin-right:10px;
}
.minancho{
  min-width:300px;
}
.minaltura{
  min-height:max-content;
}
.link:Hover{
  text-decoration: underline;
}
.float-left{
  float:left;
}
.tooltip {
  font-size: 1rem;  /* Extra large text size */
  padding: 0px 0px 0px 0px; /* Extra padding for a bigger tooltip */
  max-width: none;    /* No max-width to allow tooltip to grow */
}
.accordion .accordion-button:focus,
.accordion .accordion-button:active {
outline: none !important;
box-shadow: none !important;
}
.toast-container{
margin-top:15px;
}
.accordion-collapse {
transition: none !important;
}
#main-wrapper .imgESLOGO{
max-width:50px !important;
position:absolute;
left:15px;
top:15px;
height: auto !important;
}
/* #main-wrapper.show-sidebar .imgESLOGO{
max-width:150px !important;
} */
.u-hiddenpage{
visibility: hidden;
max-height:1px;
overflow:hidden;
display:none;
}
.positionpapage{
position:absolute;
}
.no-hover-bg:hover {
background-color: inherit !important; /* No cambiar el fondo al hacer hover */
color: inherit !important; /* No cambiar el fondo al hacer hover */
}

:root[data-bs-theme="dark"] .ag-center-cols-viewport{
color: #f0f0f0;
}
:root[data-bs-theme="dark"] .ag-overlay-no-rows-center{
color: #f0f0f0;
}
/* :root[data-bs-theme="dark"] .page-wrapper,:root[data-bs-theme="dark"] .topbar{
background: #1a2335;
} */
:root[data-bs-theme="dark"] .ag-theme-custom {
  --ag-background-color: #1f2836;
  --ag-header-foreground-color: #FFF;
  --ag-border-color: #2b3748;
  --ag-odd-row-background-color: #232f3f;
  --ag-even-row-background-color: #1f2836;
  --ag-font-size: 14px;
}
:root[data-bs-theme="dark"] .ag-cell,
:root[data-bs-theme="dark"] .ag-icon,
:root[data-bs-theme="dark"] .ag-picker-field-display, 
:root[data-bs-theme="dark"] .ag-label, 
 :root[data-bs-theme="dark"] .ag-text-field, 
 :root[data-bs-theme="dark"] .ag-picker-field-wrapper, 
 :root[data-bs-theme="dark"] .ag-text-option, 
 :root[data-bs-theme="dark"] .ag-text-field-input,
 :root[data-bs-theme="dark"] .ag-paging-panel,
 :root[data-bs-theme="dark"] .ag-popup{
  color:#fff;
}

:root[data-bs-theme="dark"] .custom-header {
  background-color: #1f2836;
  color: #fff;
}


button:disabled {
cursor: not-allowed !important;
}
#toolbarresponsivebottom{
position:fixed; bottom:0px;left:0px;width:100%;display:none;
background: var(--bs-body-bg);
}
.uhiddenvisibleresponsive {
visibility: visible;
max-height: none;
overflow: none;
display: block !important; /* Visible solo cuando el atributo data-pageis tiene el valor "positions" */
}
  .u-hiddenendeskop{
    display: none;
  }
  
  .offcanvas .nav li .nav-link{
    padding:5px !important;
    margin:5px !important;
  }
  #iframedatatradeoffcanvas{
    margin-top:0px;
    height:180px;
  }
  @media (min-width: 768px) {
    .vh100{
      min-height:70vh;
    }
    .vh100graf{
      max-height:100dvh;
      min-height:70vh;
    }
    .offcanvas.offcanvas-end.show{
      width:768px !important;
    }

  }

  @media (max-width: 1268px) {
    #tableyesresultspositions{
      padding-bottom:200px;
    }

  }
@media (max-width: 768px) {
#iframedatatrade{
display:none !important;
}
body{
margin-bottom:calc(62px + env(safe-area-inset-bottom, 0px)) !important; /* MARC: + safe-area (notch/home indicator iPhone) para que el contenido no quede bajo la toolbar inferior */
}

  .u-hiddenendeskop{
    display: block;
  }
  .u-hiddenmobile{
    display: none;
  }
  .uhiddenvisibleresponsive{
visibility: hidden;
max-height:1px;
overflow:hidden;
display:none;
}

#toolbarresponsivebottom{
position:fixed; bottom:0px;left:0px;width:100%;display:inline;
}
.searchtopnavv {
    display: none !important;
}

.container-fluid{
transition: none !important;
padding:0px !important;
}
.sinmarginresponsive{
margin:0px !important;
padding:0px !important;
}
.accordion-item{
border-radius: 0px !important;
}

.offcanvas.offcanvas-end.show{
  width:100% !important;
}

.row{
  margin-left:0px !important;
  margin-right:0px !important;
}
}




.global-login{
  opacity:0;
  animation: globalloginhidden 200ms linear 1;
  animation-fill-mode: forwards; /* Mantiene el último estado de la animación */
  
}
@keyframes globalloginhidden {
0% {
    opacity: 0;
    zoom:1;
}
100% {
    opacity: 1;
}
}
@keyframes btn-action-busy {
0% {
    opacity: 0;
}
70% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes showcharts {
0% {
    opacity: 0;
}
70% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
.cursor-pointer{
  cursor:pointer !important;
}
.bg-hover-light-black .cursor-pointer{
  cursor:default;
}
.offcanvas{
  width: 768px !important; 
}
@media (max-width: 450px) {
.offcanvas{
  min-width: 100% !important; 
}
}

  @media (min-width: 769px) {
  
.accordion-collapse:not(#calendar){
  max-height:calc(100vh - 410px) !important;
  overflow-x:hidden !important;
}

.accordion-collapse{
  max-height: calc(100vh - 310px);
  overflow-x:hidden !important;
}
.hnsidebarm{
  height:calc(100vh - 75px);
}
}

@media (max-width: 768px) {
  

.hnsidebarm{
  height:calc(100vh - 75px) !important;
}

#calendar:not(.calendarexpand){
  max-height: 40px;
  overflow:hidden;
  }
.accordion-collapse{
  max-height:calc(100dvh - 300px);
  overflow-x:hidden !important;
}
}

.bggreen,.bgred{
  min-height:65px !important;
  min-width: 100% !important;
}
#iframedatatrade{
  background:transparent !important;
  width:100%;
  height: 100%;
}

/* Estilos mejorados para la tabla de posiciones */

#active-positions{
  overflow:auto;
  max-width:100%;
}
.positions-table {
width: 100%;
border-radius: var(--bs-border-radius-lg);
overflow: hidden;
padding: 10px;
background: var(--bs-body-bg);
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.ticker-row{
  
}
.tickerstotsscroll{
  overflow:auto;
}

.scrollbar {
  /* Si quieres forzar un ancho/alto fijo y permitir el scroll, asegúrate de tener overflow */
  overflow-y: auto;
}

/* Estilos del scrollbar en navegadores basados en WebKit */
.scrollbar::-webkit-scrollbar {
  width: 9px;             /* Ancho del scrollbar */
  height: 9px;             /* Ancho del scrollbar */
}
.scrollbar::-webkit-scrollbar-track {
  background: transparent;    /* Fondo del track o "canal" del scrollbar */
}
.scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3); /* Color de la barra de desplazamiento */
  border-radius: 5px;        /* Redondeado para que se vea más elegante */
}
/* Encabezado con efecto elegante */
.ticker-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: var(--bs-accordion-btn-bg);
color: var(--bs-accordion-color);
font-weight: bold;
cursor: pointer;
overflow:hidden;
transition: background 0.3s ease, transform 0.2s ease;
}

.ticker-header:hover {
background-color: var(--bs-light-bg-subtle) !important;
}

/* Icono de desplegar con animación */
.toggle-icon {
transition: transform 0.3s ease;
}

.ticker-header.active {
background-color: var(--bs-light-bg-subtle) !important;
}
.ticker-header.active .toggle-icon {
transform: rotate(90deg);
}

/* Contenedor con animación de apertura */
.positions-content {
display: table; 
background: var(--bs-accordion-bg);
color: var(--text-dark);
border-radius: var(--bs-border-radius-sm);
box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.1);
overflow-x: auto;
display: flex;
flex-direction: column; /* Alinea los elementos en columna */
align-items: center; /* Centra horizontalmente */
justify-content: flex-start; /* Alinea desde arriba */
width: 100%; /* Para ocupar todo el ancho disponible */
}

/* Diseño mejorado para las filas de datos */
.position-row {
  display: table-row;
align-items: center; /* Centra horizontalmente */
text-align: center;
padding: 8px;
font-size: 0.9rem;
font-weight: 500;
white-space: nowrap;
justify-content: space-between;
padding: 4px;
color: var(--text-dark);
background: var(--ag-background-color);
transition: background 0.3s ease, transform 0.2s ease;
}

.position-row:not(.sinhoverrow):hover {
background: var(--bs-light-bg-subtle);
}

.tomoney{
  flex: 1;
  text-align: right;
  margin-right: 20px;
}

/* Estilos para las celdas */
.position-cell {
  display: table-cell;
text-align: center;
padding: 8px;
font-size: 0.9rem;
font-weight: 500;
white-space: nowrap;
}

/* Estilos de texto para valores positivos y negativos */
.text-success {
color: var(--bs-success);
font-weight: bold;
}

.text-danger {
color: var(--bs-danger);
font-weight: bold;
}

/* Scroll responsivo con mejor visualización */
@media (max-width: 768px) {
.positions-content {
    overflow-x: auto;
    display: block;
    white-space: nowrap;
    padding: 10px;
}
}


/* .body-wrapper{
    padding-top:90px;
} */
.u-hiddeniframe{
  opacity:0.08;
  transition:none !important;
}
/* MARC: fundido del gráfico al CAMBIAR DE TEMA -> 2s oculto + fade-in de 2s (tapa el redibujado del
   iframe con el nuevo tema). id+clase + !important para ganar a .u-hiddeniframe (transition:none!). */
#iframedatatrade.marc-chart-fadeout{ opacity:0 !important; transition:none !important; }
#iframedatatrade.marc-chart-fadein{ opacity:1 !important; transition:opacity 2s linear !important; }
.u-hidden,.u-hiddencotizacion{
    display: none !important;
}

@media (max-width: 575.98px) {
.convertiraw100 {
width: 100% !important; /* Cambia el ancho a 100% */
}
}
.app-chat .chat-users {
    height: calc(100vh - 495px) !important;
}
.marcnowrap3{
display: -webkit-box;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: 30px;
}
.marcnowrap {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important; /* Evita el salto de línea */
}

.bard-hello {
  font-family: 'Google Sans', sans-serif; 
  font-size: 2em; 
  font-weight: normal;
  /* Degradado de colores */
  background-image: linear-gradient(to right, #4285F4, #5d26b1, #D96570);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; 
  text-align: center;
}

.bard-hello-name {
  font-weight: bold; 
}

.flagv2 {
margin-top:4px;
margin-bottom:4px;
width: 22px;
height: 22px;
border-radius: 5px;
background-size: cover; /* Cambia a cover para llenar el contenedor */
background-repeat: no-repeat;
background-position: center;
background-image: var(--flag-url);
}
.impact-indicators {
display: flex;
}

.indicator {
width: 8px;
height: 8px;
background-color: rgba(255,255,255,0.2); /* Color gris para indicadores inactivos */
margin-right: 4px;
}
.indicator.low {
background-color: #28a745 !important; /* Color verde de Bootstrap para el activo */
}
.indicator.medium {
background-color: #cf6f2f !important; /* Color verde de Bootstrap para el activo */
}
.indicator.high {
background-color: #b32f2f !important; /* Color verde de Bootstrap para el activo */
}
:root[data-bs-theme="light"] .indicator {
background-color: rgba(0,0,0,0.2); /* Color gris para indicadores inactivos */
}



.flages1{
  width:18px !important;height:18px !important;position:absolute; margin-top:-5px; margin-left:-5px; z-index:2;
}
.flages2{
  width:18px !important;
  height:18px !important;
  margin-top:5px; margin-left:5px; position:relative; z-index:1;
}
/* ÉXITO (verde) - Rebote sutil */
.textanim-success {
display: inline-block;
/* animation: [nombre] [duración] [función de tiempo] [delay] */
animation: success-bounce 1s ease-out 0.5s;
}

@keyframes success-bounce {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05); /* Rebote muy leve */
}
}

/* PÉRDIDA (rojo) - Vibración leve */
.textanim-danger {
display: inline-block;
/* animation: [nombre] [duración] [función de tiempo] [delay] */
animation: danger-shake 1s ease-in-out 0.5s;
}

@keyframes danger-shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-1px);
}
50% {
transform: translateX(1px);
}
75% {
transform: translateX(-1px);
}
}
.btnfavs{
  font-size: 1.2rem;
}
.ti-star-full {
    color: #f39c12; /* Color dorado para estrellas rellenadas */
}
.ti-star-full {
  font-size: 1.2rem;
  color: transparent;
  background: linear-gradient(90deg, #f39c12 50%, rgb(255, 198, 9) 50%);
  -webkit-background-clip: text;
  background-clip: text;
}
#botonmoreoptionstrade[aria-expanded="true"]{
  display:none;
}

/* =====================================================================
 * MARC MODERN LAYER — additive visual refresh
 * Mantiene TODOS los colores existentes (#ea4343, #00bea0, #4285F4,
 * #1f2836, #232f3f, #2b3748). Solo mejora radios, sombras, transiciones,
 * estados hover/focus y densidad. No cambia estructura ni colores base.
 * ===================================================================== */

:root{
  /* Paleta alineada con el gráfico (estilo TradingView) — válida para ambos temas */
  --marc-accent: #2962ff;
  --marc-accent-soft: rgba(41,98,255,0.16);
  --marc-buy: #26a69a;
  --marc-buy-soft: rgba(38,166,154,0.16);
  --marc-sell: #ef5350;
  --marc-sell-soft: rgba(239,83,80,0.16);
  /* Superficies/bordes por defecto (oscuro, como el gráfico) */
  --marc-surface-1: #1b2434;
  --marc-surface-2: #212c3e;
  --marc-surface-3: #2a3344;
  --marc-border: rgba(255,255,255,0.08);
  --marc-border-strong: rgba(255,255,255,0.14);
  --marc-radius-sm: 8px;
  --marc-radius: 12px;
  --marc-radius-lg: 16px;
  --marc-shadow-sm: 0 1px 2px rgba(0,0,0,0.18), 0 1px 1px rgba(0,0,0,0.12);
  --marc-shadow: 0 6px 20px -8px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.22);
  --marc-shadow-lg: 0 20px 40px -12px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.28);
  --marc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Tema OSCURO: fondo de página igual que el gráfico (#131722) */
:root[data-bs-theme="dark"]{
  --marc-surface-1: #1b2434;
  --marc-surface-2: #212c3e;
  --marc-surface-3: #2a3344;
  --marc-border: rgba(255,255,255,0.08);
  --marc-border-strong: rgba(255,255,255,0.14);
  --bs-body-bg: #131722;
  --bs-body-color: #d1d4dc;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: #8b94a8;
}

/* Tema CLARO: variables marc claras + fondo claro (igual que el gráfico en light) */
:root[data-bs-theme="light"]{
  --marc-accent-soft: rgba(41,98,255,0.10);
  --marc-buy-soft: rgba(38,166,154,0.12);
  --marc-sell-soft: rgba(239,83,80,0.12);
  --marc-surface-1: #f4f6fa;
  --marc-surface-2: #eef1f6;
  --marc-surface-3: #e6eaf1;
  --marc-border: rgba(0,0,0,0.08);
  --marc-border-strong: rgba(0,0,0,0.14);
  --bs-body-bg: #ffffff;
  --bs-body-color: #131722;
  --bs-secondary-color: #5d6677;
}

/* Transiciones globales suaves */
.btn,
.form-control,
.form-select,
.nav-link,
.accordion-button,
.card,
.offcanvas,
.position-row,
.ticker-header,
.dropdown-item{
  transition: background-color .18s var(--marc-ease),
              border-color .18s var(--marc-ease),
              color .18s var(--marc-ease),
              box-shadow .18s var(--marc-ease),
              transform .18s var(--marc-ease) !important;
}

/* -------- Botones -------- */
.btn{
  border-radius: var(--marc-radius-sm) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.btn:not(.btn-link):not(.is-busy):hover{
  transform: translateY(-1px);
  box-shadow: var(--marc-shadow-sm);
}
.btn:not(.btn-link):active{
  transform: translateY(0);
  box-shadow: none;
}
.btn-primary,
.btn-outline-primary:hover{
  background-image: linear-gradient(180deg, #5a97f6 0%, #4285F4 100%);
  border-color: #4285F4;
}
.btn-outline-primary{
  border-color: rgba(66,133,244,0.6);
  color: #8fb8ff;
}
.btn-outline-primary:hover{
  color: #fff;
}
.btn-success,
.bggreen .btn,
.btn.bggreen{
  background-image: linear-gradient(180deg, #1bd5b4 0%, #00bea0 100%);
  border-color: #00bea0;
}
.btn-danger,
.bgred .btn,
.btn.bgred{
  background-image: linear-gradient(180deg, #ff5c5c 0%, #ea4343 100%);
  border-color: #ea4343;
}
.bggreen,.bgred{
  border-radius: var(--marc-radius) !important;
  box-shadow: var(--marc-shadow-sm);
}
.bggreen:hover{ box-shadow: 0 8px 24px -10px rgba(0,190,160,0.55); }
.bgred:hover{   box-shadow: 0 8px 24px -10px rgba(234,67,67,0.55); }

/* -------- Inputs y form fields -------- */
.form-control,
.form-select{
  border-radius: var(--marc-radius-sm) !important;
  border-color: var(--marc-border-strong) !important;
}
.form-control:focus,
.form-select:focus{
  border-color: var(--marc-accent) !important;
  box-shadow: 0 0 0 3px var(--marc-accent-soft) !important;
}
:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select{
  background-color: var(--marc-surface-1);
}
.input-group .btn.border{
  border-color: var(--marc-border-strong) !important;
}

/* -------- Tarjetas / page surfaces -------- */
.card,
.accordion-item,
.modal-content{
  border-radius: var(--marc-radius) !important;
  border-color: var(--marc-border) !important;
  box-shadow: var(--marc-shadow-sm);
}
.modal-content{
  box-shadow: var(--marc-shadow-lg);
}

/* -------- Topbar / navbar -------- */
.topbar,
.app-header,
header.topbar{
  backdrop-filter: saturate(140%) blur(6px);
}
:root[data-bs-theme="dark"] .topbar,
:root[data-bs-theme="dark"] .app-header{
  background: var(--bs-body-bg) !important;   /* MARC: mismo color que el contenido de abajo (#131722) */
  border-bottom: 1px solid var(--marc-border);
}
.topbar .nav-link{
  border-radius: var(--marc-radius-sm);
}
.topbar .nav-link:hover{
  background: rgba(255,255,255,0.04);
}

/* -------- Account summary strip -------- */
[data-accequityd],
[data-accbalanced],
[data-accprofitd],
[data-accmarginleveld]{
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* -------- Accordion / positions -------- */
.accordion-button{
  border-radius: var(--marc-radius-sm) !important;
}
.accordion-button:not(.collapsed){
  background: rgba(66,133,244,0.08);
  color: inherit;
}
.accordion-item{
  margin-bottom: 6px;
  overflow: hidden;
}

.positions-table{
  border-radius: var(--marc-radius) !important;
  box-shadow: var(--marc-shadow-sm) !important;
  padding: 8px !important;
}
.ticker-header{
  border-radius: var(--marc-radius-sm);
  padding: 12px 14px !important;
}
.ticker-header:hover{
  transform: translateY(-1px);
  box-shadow: var(--marc-shadow-sm);
}
:root[data-bs-theme="dark"] .ticker-header{
  background: linear-gradient(180deg, var(--marc-surface-2) 0%, var(--marc-surface-1) 100%) !important;
  border: 1px solid var(--marc-border);
}
:root[data-bs-theme="dark"] .ticker-header.active,
:root[data-bs-theme="dark"] .ticker-header:hover{
  background: linear-gradient(180deg, #2a3648 0%, #232f3f 100%) !important;
  border-color: var(--marc-border-strong) !important;
}
.position-row{
  border-bottom: 1px solid var(--marc-border);
}
.position-row:last-child{
  border-bottom: none;
}
:root[data-bs-theme="dark"] .position-row:not(.sinhoverrow):hover{
  background: rgba(66,133,244,0.06) !important;
}

/* -------- AG Grid refinamiento -------- */
:root[data-bs-theme="dark"] .ag-theme-custom{
  --ag-header-background-color: #1a2230;
  --ag-row-hover-color: rgba(66,133,244,0.08);
  --ag-selected-row-background-color: rgba(66,133,244,0.14);
  --ag-border-radius: 10px;
  --ag-wrapper-border-radius: 12px;
  --ag-header-column-separator-display: none;
  --ag-cell-horizontal-padding: 14px;
}
:root[data-bs-theme="dark"] .ag-theme-custom .ag-root-wrapper{
  border-radius: var(--marc-radius) !important;
  border-color: var(--marc-border) !important;
  box-shadow: var(--marc-shadow-sm);
  overflow: hidden;
}
:root[data-bs-theme="dark"] .ag-theme-custom .ag-header{
  border-bottom: 1px solid var(--marc-border-strong);
}
:root[data-bs-theme="dark"] .ag-theme-custom .ag-row{
  border-bottom-color: var(--marc-border) !important;
}

/* -------- Offcanvas (trading drawer) -------- */
.offcanvas{
  border: none !important;
}
:root[data-bs-theme="dark"] .offcanvas{
  background: linear-gradient(180deg, #222d3d 0%, #1b2431 100%) !important;
  box-shadow: -24px 0 60px -20px rgba(0,0,0,0.6);
}
.offcanvas-header{
  border-bottom: 1px solid var(--marc-border);
}
.offcanvas .nav-underline .nav-link.active{
  border-bottom-color: var(--marc-accent) !important;
  color: var(--marc-accent) !important;
}

/* -------- Progress bar (free funds indicator) -------- */
.progress{
  border-radius: 999px !important;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.progress-bar{
  border-radius: inherit !important;
  background-image: linear-gradient(90deg, #4285F4 0%, #00bea0 100%);
}

/* -------- Alerts -------- */
.alert{
  border-radius: var(--marc-radius) !important;
  border: 1px solid var(--marc-border);
}
.alert.alert-light-danger,
.alert.bg-danger-subtle{
  border-color: rgba(234,67,67,0.35);
}

/* -------- Toasts -------- */
.toast,
#toast-container > div{
  border-radius: var(--marc-radius) !important;
  box-shadow: var(--marc-shadow) !important;
}

/* -------- Badges / pills -------- */
.badge{
  border-radius: 999px !important;
  letter-spacing: 0.02em;
  padding: 0.35em 0.7em;
}

/* -------- Scrollbars refinados -------- */
:root[data-bs-theme="dark"] .scrollbar::-webkit-scrollbar-thumb,
:root[data-bs-theme="dark"] .accordion-collapse::-webkit-scrollbar-thumb,
:root[data-bs-theme="dark"] .offcanvas-body::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,0.12);
  border-radius: 999px;
}
:root[data-bs-theme="dark"] .scrollbar::-webkit-scrollbar-thumb:hover,
:root[data-bs-theme="dark"] .accordion-collapse::-webkit-scrollbar-thumb:hover,
:root[data-bs-theme="dark"] .offcanvas-body::-webkit-scrollbar-thumb:hover{
  background-color: rgba(255,255,255,0.22);
}
.accordion-collapse::-webkit-scrollbar,
.offcanvas-body::-webkit-scrollbar{
  width: 9px;
  height: 9px;
}

/* -------- Tablas generales -------- */
.table{
  --bs-table-border-color: var(--marc-border);
}
.table > :not(caption) > * > *{
  padding: 0.7rem 0.85rem;
}

/* -------- Dropdown / menus -------- */
.dropdown-menu{
  border-radius: var(--marc-radius) !important;
  border-color: var(--marc-border) !important;
  box-shadow: var(--marc-shadow) !important;
  padding: 6px;
}
.dropdown-item{
  border-radius: var(--marc-radius-sm);
  padding: 0.5rem 0.75rem;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(66,133,244,0.1);
  color: inherit;
}

/* -------- Login screen -------- */
.global-login__content{
  border-radius: var(--marc-radius-lg);
  box-shadow: var(--marc-shadow-lg);
  background: linear-gradient(180deg, rgba(35,47,63,0.96) 0%, rgba(27,36,49,0.96) 100%);
  clip-path: none;
  padding: 2rem 1.75rem 1.75rem !important;
}
.global-login__form-control input{
  border-radius: var(--marc-radius-sm) !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,0.04) !important;
  color: #eaeef5;
}
.global-login__form-control input:focus{
  border-color: #00bea0 !important;
  box-shadow: 0 0 0 3px rgba(0,190,160,0.25) !important;
}
.global-login__form-control label{
  color: #a9b1bd;
  font-weight: 600;
  font-size: 13px;
}
.global-login .btn--login{
  border-radius: var(--marc-radius-sm) !important;
  padding: 12px 16px;
  background-image: linear-gradient(180deg, #12d2b2 0%, #00bea0 100%);
  border: none;
  color: #fff;
  box-shadow: 0 6px 20px -10px rgba(0,190,160,0.7);
}
.global-login .btn--login:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -10px rgba(0,190,160,0.85);
}

/* -------- Text weight for monetary values (nunca cambia el color) -------- */
[data-accequity],[data-accbalance],[data-accprofit],[data-accmarginfree],
[data-accequityd],[data-accbalanced],[data-accprofitd],[data-accmarginleveld]{
  font-variant-numeric: tabular-nums;
}

/* -------- Focus visible accesible -------- */
.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible{
  outline: 2px solid var(--marc-accent) !important;
  outline-offset: 2px;
}

/* -------- Tooltips -------- */
.tooltip .tooltip-inner{
  border-radius: var(--marc-radius-sm);
  box-shadow: var(--marc-shadow);
  padding: 6px 10px;
}

/* -------- Modal backdrop más limpio -------- */
.modal-backdrop.show{
  opacity: 0.55;
  backdrop-filter: blur(2px);
}

/* -------- Responsive: padding del positions-table -------- */
@media (max-width: 768px){
  .positions-table{
    border-radius: var(--marc-radius-sm) !important;
    padding: 4px !important;
  }
  .ticker-header{
    padding: 10px 12px !important;
  }
}
/* =====================================================================
 * FIN MARC MODERN LAYER
 * ===================================================================== */


/* =====================================================================
 * MARC ACTIVTRADER LAYER — riel lateral, watchlist en tarjetas,
 * sparklines, top bar y tablas estilo ActivTrader. 100% aditivo:
 * no cambia IDs/clases/data-attrs que usa el JS; solo presentación.
 * ===================================================================== */

:root{
  --marc-rail-w: 72px;
}

/* ---------- Riel lateral de iconos (desktop) ---------- */
.marc-rail{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--marc-rail-w);
  z-index: 1045;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 49px 0 10px;
  gap: 2px;
  background: linear-gradient(180deg, #1b2330 0%, #161d28 100%);
  border-right: 1px solid var(--marc-border);
}
:root[data-bs-theme="light"] .marc-rail{
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%);
  border-right: 1px solid rgba(0,0,0,0.08);
}
.marc-rail__brand{
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--marc-accent) 0%, #2f6fe0 100%);
  color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 6px 16px -8px rgba(66,133,244,0.8);
  overflow: hidden;
}
.marc-rail__brand img{ max-width: 100%; max-height: 100%; }
.marc-rail__item{
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 9px 2px;
  color: #93a0b2;
  cursor: pointer;
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: color .15s var(--marc-ease), background-color .15s var(--marc-ease);
}
.marc-rail__item i{ font-size: 22px; }
.marc-rail__item:hover{ color: #fff; background: rgba(255,255,255,0.05); }
:root[data-bs-theme="light"] .marc-rail__item{ color:#5a6675; }
:root[data-bs-theme="light"] .marc-rail__item:hover{ color:#1f2836; background: rgba(0,0,0,0.04); }
.marc-rail__item.active{
  color: var(--marc-accent);
  border-left-color: var(--marc-accent);
  background: var(--marc-accent-soft);
}
.marc-rail__item.active i{ filter: drop-shadow(0 2px 6px rgba(66,133,244,0.5)); }
.marc-rail__spacer{ margin-top: auto; }

/* Desplaza el contenido para dejar sitio al riel (solo desktop ≥992).
   .topbar es position:fixed;width:100% en el tema, así que hay que moverla
   también o quedaría tapada por el riel. */
@media (min-width: 992px){
  .page-wrapper{ margin-left: var(--marc-rail-w) !important; }
  header.topbar{
    left: var(--marc-rail-w);
    width: calc(100% - var(--marc-rail-w));
  }
}
@media (max-width: 991.98px){
  .marc-rail{ display: none !important; }
}

/* ---------- Watchlist en tarjetas ---------- */
/* MARC: contenedor de la vista plana cross-market (Favoritos/Mercados abiertos/Listas).
   Scroll nativo propio (no simplebar) con scrollbar fino estilo simplebar. El alto lo fijan
   las reglas por breakpoint (.marc-ws__list #crypt-tab > .marc-flatlist / móvil). */
.marc-flatlist{ overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--marc-border-strong, #5a6675) transparent; }
.marc-flatlist::-webkit-scrollbar{ width: 9px; }
.marc-flatlist::-webkit-scrollbar-thumb{ background: var(--marc-border-strong, #5a6675); border-radius: 6px; }
.marc-flatlist::-webkit-scrollbar-track{ background: transparent; }

#crypt-tab [data-trquote]{
  display: block;
  padding: 5px 16px 0 8px; /* +8px a la derecha: separa la tarjeta del scrollbar de simplebar */
  /* MARC: la seccion abierta puede tener cientos de tarjetas, cada una con el odometro completo
     (~80 nodos por precio). content-visibility:auto hace que el navegador NO maquete/pinte las
     tarjetas fuera de pantalla -> simplebar mide un placeholder barato y desaparece el reflow de
     scroll. El casino sigue intacto en las visibles. contain-intrinsic-size reserva el alto
     (`auto` memoriza el real tras pintarse una vez). */
  content-visibility: auto;
  contain-intrinsic-size: auto 130px;
}
.marc-quote-card{
  position: relative;
  background: linear-gradient(180deg, var(--marc-surface-2) 0%, var(--marc-surface-1) 100%);
  border: 1px solid var(--marc-border);
  border-radius: var(--marc-radius);
  padding: 10px 12px 8px;
  overflow: hidden;
}
:root[data-bs-theme="light"] .marc-quote-card{
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.marc-quote-card:hover{
  border-color: var(--marc-border-strong);
  box-shadow: var(--marc-shadow-sm);
  transform: translateY(-1px);
}
[data-trquote].bg-light-subtle .marc-quote-card{
  border-color: var(--marc-accent);
  box-shadow: 0 0 0 1px var(--marc-accent-soft), var(--marc-shadow-sm);
}
[data-trquote].bg-light-subtle{ background: transparent !important; }

.marc-qc-head{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 7px;
}
.marc-qc-title{
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  display: block; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 16px;
}
.marc-qc-fav{
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
.marc-qc-body{
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
}
.marc-qc-side{
  display: flex; flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
}
.marc-qc-sell{ align-items: flex-start; }
.marc-qc-buy{ align-items: flex-end; }
.marc-qc-lbl{
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  opacity: 0.8;
}
.marc-qc-sell .marc-qc-lbl{ color: var(--marc-sell); }
.marc-qc-buy  .marc-qc-lbl{ color: var(--marc-buy); }
.marc-qc-price{
  font-size: 1.18rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.marc-qc-price strong{ font-weight: 700; }

/* MARC: precio estilo odometro — entero grande / decimales pequenos; los digitos ruedan al cambiar */
.marc-odo{ display:inline-flex; align-items:baseline; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; contain:layout paint; }
.marc-odo-int{ display:inline-flex; font-weight:700; }
.marc-odo-dec{ display:inline-flex; align-self:flex-start; font-size:.62em; font-weight:600; opacity:.85; }
.marc-odo-sep{ display:inline-block; }
.marc-odo-d{ display:inline-block; height:1em; overflow:hidden; }
.marc-odo-reel{ display:flex; flex-direction:column; transition:transform .42s cubic-bezier(.2,.85,.25,1); }
.marc-odo-reel > span{ display:block; height:1em; line-height:1; text-align:center; }
.marc-odo--up{ animation: marcOdoUp .5s ease; }
.marc-odo--down{ animation: marcOdoDown .5s ease; }
@keyframes marcOdoUp{ 0%{ color: var(--bs-success,#16a34a); } 100%{ color: inherit; } }
@keyframes marcOdoDown{ 0%{ color: var(--bs-danger,#dc2626); } 100%{ color: inherit; } }
.marc-qc-flag{
  position: relative;
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 46px; min-height: 26px;
}
/* MARC: tickermtt encima del logo, centrado y pequeñito */
.marc-qc-flag .marc-qc-mtt{
  font-size: 9px; line-height: 1; font-weight: 600;
  color: var(--marc-text-2, #8b94a8);
  text-align: center; margin-bottom: 3px;
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.marc-qc-flag .flagv2{ margin-top: 0; margin-bottom: 0; }
.marc-qc-flag .marc-qc-crypto-ic{ font-size: 19px; line-height: 1; opacity: .7; color: var(--marc-text-2, #8b94a8); } /* (legado) icono cripto neutro */
.marc-qc-flag .marc-qc-logo{ width: 28px; height: 28px; border-radius: 7px; object-fit: contain; display: block; } /* logo por ticker (/imagesymbols/<tickermtt>.webp) */

/* Sparkline */
.marc-qc-spark{ margin: 8px 0 4px; height: 36px; }
.marc-spark{ width: 100%; height: 36px; display: block; }
.marc-qc-spark.is-empty{ height: 6px; margin: 4px 0 2px; }
.marc-qc-spark.is-empty .marc-spark{ display: none; }

/* Pie Low / % / High */
.marc-qc-foot{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.72rem; gap: 6px;
  margin-top: 2px;
}
.marc-qc-foot .marc-qc-low,
.marc-qc-foot .marc-qc-high{
  color: var(--bs-secondary-color, #93a0b2);
  white-space: nowrap;
}
.marc-qc-foot b{ font-weight: 700; font-variant-numeric: tabular-nums; }
.marc-qc-diff{ flex: 1; text-align: center; }

/* MARC: VENDER/COMPRAR con aspecto de botón */
.marc-qc-side{
  padding: 6px 8px; border-radius: var(--marc-radius-sm);
  border: 1px solid transparent; transition: background-color .12s var(--marc-ease), border-color .12s var(--marc-ease);
}
.marc-qc-sell{ background: var(--marc-sell-soft); border-color: rgba(239,83,80,.28); }
.marc-qc-buy{ background: var(--marc-buy-soft); border-color: rgba(38,166,154,.28); }
.marc-qc-sell:hover{ background: rgba(239,83,80,.26); }
.marc-qc-buy:hover{ background: rgba(38,166,154,.26); }

/* MARC: acciones (Símbolo / Nueva orden / Gráfico) reveladas al pasar por encima */
.marc-qc-actions{
  display: flex; gap: 6px; margin-top: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .18s var(--marc-ease), opacity .18s var(--marc-ease), margin-top .18s var(--marc-ease);
}
.marc-quote-card:hover .marc-qc-actions{ max-height: 64px; opacity: 1; margin-top: 8px; }
.marc-qc-act{
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; border: 1px solid var(--marc-border); border-radius: var(--marc-radius-sm);
  background: var(--marc-surface-1); color: var(--bs-secondary-color, #93a0b2);
  font-size: .58rem; font-weight: 600; cursor: pointer; line-height: 1.1;
}
.marc-qc-act i{ font-size: .95rem; }
.marc-qc-act:hover{ border-color: var(--marc-border-strong); color: var(--bs-body-color); background: var(--marc-surface-2); }

/* MARC: VENDER/COMPRAR (con bandera/logo) SIEMPRE visibles, aunque el cursor
   no esté encima. Solo la fila de acciones (.marc-qc-actions) se revela al hover. */
.marc-qc-body{
  opacity: 1;
  margin-bottom: 4px;
}
.marc-qc-diff strong{ font-size: 0.74rem; }
.marc-qc-diff [data-diferencerealnoesopen] small{ font-size: 0.62rem; }

/* Panel inline de trade rápido (data-qrexpand) del ticker seleccionado */
[data-qrexpand]{
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--marc-border-strong);
}
[data-qrexpand] .btn-group{ gap: 0; }

/* ---------- Top bar (pulido, sin reordenar HTML) ---------- */
header.topbar .navbar{ padding-left: 6px; padding-right: 6px; min-height: 48px !important; justify-content: flex-start !important; flex-wrap: nowrap; }
header.topbar .nav-link{ padding-top: 3px !important; padding-bottom: 3px !important; }
header.topbar .nav-link h3{ margin-top: 0 !important; margin-bottom: 0 !important; }
/* Financieros a la IZQUIERDA, cuenta (último li) a la DERECHA */
header.topbar #navbarNav{ flex: 1 1 auto; min-width: 0; }
header.topbar #navbarNav > .d-flex{ width: 100%; }
header.topbar .navbar-nav.flex-row{ width: 100%; flex-wrap: nowrap; }
header.topbar .navbar-nav.flex-row > li:last-child{ margin-left: auto; }

/* ===== Cuenta: badges + píldora del topbar + dropdown (estilo app) ===== */
.marc-acc-badge{ display:inline-block; padding:2px 7px; border-radius:6px; font-size:10px; font-weight:600; letter-spacing:.03em; line-height:1.2; }
.marc-acc-badge--real{ background:rgba(0,190,160,.18); color:#1fd6b3; }
.marc-acc-badge--demo{ background:rgba(255,167,38,.18); color:#ffb74d; }

#marcAccPill{ display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid var(--marc-border); font-size:12px; line-height:1; white-space:nowrap; color:var(--bs-body-color); }
#marcAccPill:empty{ display:none; }
.marc-acc-pill-num{ font-weight:600; }
.marc-acc-pill-cur{ color:var(--bs-secondary-color); font-weight:600; }
:root[data-bs-theme="light"] #marcAccPill{ background:rgba(0,0,0,.04); }

#drop1 + .dropdown-menu{ min-width:300px; padding:0; overflow:hidden; border-radius:14px; }
:root[data-bs-theme="dark"] #drop1 + .dropdown-menu{ background:#1b2434; border:1px solid var(--marc-border); }
.marc-acc-head{ display:flex; align-items:center; gap:11px; padding:15px 16px; }
.marc-acc-avatar{ width:40px; height:40px; flex:0 0 40px; border-radius:50%; background:#00bea0; color:#06231e;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; }
.marc-acc-avatar i{ font-size:20px; }
.marc-acc-headtxt{ min-width:0; }
.marc-acc-cli{ font-size:14px; font-weight:600; color:var(--bs-body-color); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.marc-acc-cli-mail{ font-size:11px; color:var(--bs-secondary-color); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.marc-acc-sep{ height:1px; background:var(--marc-border); }
.marc-acc-label{ font-size:10px; letter-spacing:.07em; color:var(--bs-secondary-color); padding:11px 16px 6px; text-transform:uppercase; }
#akiaccounts .marc-acc-row{ display:flex; align-items:center; gap:11px; padding:10px 16px; text-decoration:none;
  color:var(--bs-body-color); border-left:2px solid transparent; }
#akiaccounts .marc-acc-row:hover{ background:rgba(255,255,255,.05); }
:root[data-bs-theme="light"] #akiaccounts .marc-acc-row:hover{ background:rgba(0,0,0,.04); }
.marc-acc-ava{ width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; color:#aeb6c4; }
:root[data-bs-theme="light"] .marc-acc-ava{ background:rgba(0,0,0,.05); color:#5a6675; }
.marc-acc-ava i{ font-size:17px; }
.marc-acc-main{ flex:1 1 auto; min-width:0; }
.marc-acc-line1{ display:flex; align-items:center; gap:7px; }
.marc-acc-num{ font-size:14px; font-weight:600; }
.marc-acc-line2{ font-size:11px; color:var(--bs-secondary-color); margin-top:2px; }
.marc-acc-check{ display:none; font-size:18px; color:#00bea0; }
#akiaccounts .marc-acc-row.bg-light-subtle{ background:rgba(0,190,160,.10) !important; border-left-color:#00bea0; }
#akiaccounts .marc-acc-row.bg-light-subtle .marc-acc-check{ display:block; }

/* ===== Menú de cuenta (acciones) dentro del dropdown del avatar ===== */
.marc-acc-mi{ display:flex; align-items:center; gap:12px; padding:10px 16px; text-decoration:none; color:var(--bs-body-color); font-size:14px; }
.marc-acc-mi > i:first-child{ font-size:19px; width:22px; flex:0 0 22px; text-align:center; color:var(--bs-secondary-color); }
.marc-acc-mi > span{ flex:1 1 auto; }
.marc-acc-mi:hover{ background:rgba(255,255,255,.05); }
:root[data-bs-theme="light"] .marc-acc-mi:hover{ background:rgba(0,0,0,.04); }
.marc-acc-mi--cta{ color:#00bea0; font-weight:600; }
.marc-acc-mi--cta > i:first-child{ color:#00bea0; }
.marc-acc-mi-arr{ font-size:15px !important; opacity:.45; }

/* ===== CTAs de cuenta en el topbar (visibles también en responsive) ===== */
.marc-top-ctas{ gap:8px; }
.marc-top-cta{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:9px;
  background:#00bea0; color:#06231e; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
.marc-top-cta:hover{ background:#00a98e; color:#06231e; }
.marc-top-cta i{ font-size:17px; }
.marc-top-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:9px;
  background:rgba(245,158,11,.12); color:#f59e0b; border:1px solid rgba(245,158,11,.35);
  font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
.marc-top-chip:hover{ background:rgba(245,158,11,.2); color:#f59e0b; }
.marc-top-chip i{ font-size:16px; }

/* ===== Panel de cuenta (donut) del dropdown de finanzas (#drop2) ===== */
.marc-accpanel{ min-width:300px; padding:0; overflow:hidden; border-radius:16px; }
:root[data-bs-theme="dark"] .marc-accpanel{ background:#1b2434; border:1px solid var(--marc-border); }
.marc-ap{ padding:4px 0 14px; }
.marc-ap-head{ display:flex; align-items:center; justify-content:center; gap:9px; padding:14px 14px 4px; }
.marc-ap-num{ font-size:13px; color:var(--bs-secondary-color); }
.marc-ap-donut{ position:relative; width:172px; height:172px; margin:6px auto 6px; }
.marc-ap-svg{ width:172px; height:172px; display:block; }
.marc-ap-track{ stroke:rgba(0,0,0,.08); }
:root[data-bs-theme="dark"] .marc-ap-track{ stroke:#21303f; }
.marc-ap-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.marc-ap-c-lbl{ font-size:11px; color:var(--bs-secondary-color); }
.marc-ap-c-val{ font-size:16px; font-weight:600; color:var(--bs-body-color); margin-top:2px; }
.marc-ap-c-sub{ font-size:11px; color:var(--bs-secondary-color); margin-top:1px; }
.marc-ap-row{ display:flex; align-items:center; gap:10px; padding:8px 16px; }
.marc-ap-ico{ width:30px; height:30px; flex:0 0 30px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.05); color:var(--bs-secondary-color); }
:root[data-bs-theme="dark"] .marc-ap-ico{ background:rgba(255,255,255,.05); color:#aeb6c4; }
.marc-ap-ico i{ font-size:17px; }
.marc-ap-lbl{ flex:1; font-size:13px; color:var(--bs-body-color); }
.marc-ap-val{ font-size:13px; font-weight:600; color:var(--bs-body-color); white-space:nowrap; }
.marc-ap-bar{ height:4px; border-radius:3px; background:rgba(0,0,0,.08); margin:2px 16px 4px 56px; overflow:hidden; }
:root[data-bs-theme="dark"] .marc-ap-bar{ background:rgba(255,255,255,.08); }
.marc-ap-bar i{ display:block; height:100%; width:0; border-radius:3px; background:#00bea0; transition:width .3s ease; }
.marc-ap-metrics{ display:flex; padding:10px 8px 6px; margin-top:6px; border-top:1px solid var(--marc-border); }
.marc-ap-metrics > div{ flex:1; text-align:center; }
.marc-ap-m-val{ font-size:14px; font-weight:600; color:var(--bs-body-color); }
.marc-ap-m-lbl{ font-size:10px; color:var(--bs-secondary-color); display:flex; align-items:center; justify-content:center; gap:4px; margin-top:2px; }
.marc-ap-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.marc-ap-foot{ display:flex; align-items:center; justify-content:space-between; padding:8px 16px 2px; font-size:12px; color:var(--bs-secondary-color); }
.marc-ap-foot > span:last-child{ font-weight:600; color:var(--bs-body-color); }
.marc-ap-switch{ display:block; width:calc(100% - 28px); margin:10px 14px 2px; border:none; background:#2f6df0; color:#fff; font-size:13px; font-weight:600; padding:11px; border-radius:10px; cursor:pointer; }
.marc-ap-switch:hover{ background:#2a62d8; }
header.topbar #dropacceqtyd,
header.topbar #dropacccreditd,
header.topbar #drop44,
header.topbar #drop2{
  border-radius: var(--marc-radius-sm);
  padding: 4px 12px !important;
  position: relative;
}
header.topbar #dropacccreditd::before,
header.topbar #drop44::before,
header.topbar #drop2::before{
  content: "";
  position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px; background: var(--marc-border);
}
header.topbar #dropacceqtyd:hover,
header.topbar #dropacccreditd:hover,
header.topbar #drop44:hover,
header.topbar #drop2:hover{ background: rgba(255,255,255,0.04); }

/* MARC: compactar TODOS los datos de cuenta inline (por clase, porque hay
   id="drop44" duplicado en Margin/Balance) para que SIEMPRE quepa a la derecha
   el icono de SELECCIONAR CUENTA (perfil). Antes se salía del viewport. */
header.topbar .nav-link.cursor-pointer{ padding: 3px 9px !important; }
header.topbar .nav-link.cursor-pointer h3{ margin-top: 0 !important; }
header.topbar .nav-link.cursor-pointer h3:nth-of-type(1){
  font-size: .58rem !important; opacity: .6; text-transform: uppercase; letter-spacing: .03em;
}
header.topbar .nav-link.cursor-pointer h3:nth-of-type(2){
  font-size: .9rem !important; font-weight: 600;
}
header.topbar .nav-link.cursor-pointer .ti-chevron-down{ font-size: .75rem !important; }
/* MARC: flechas direccionales del strip de cuenta atenuadas (gris neutro, mas pequeñas)
   para un header mas sobrio/formal. El color real de P/L (verde/rojo) vive en la tabla. */
header.topbar .nav-link.cursor-pointer .ti-arrow-up-right,
header.topbar .nav-link.cursor-pointer .ti-arrow-down-right{ font-size: .68rem !important; color: var(--bs-secondary-color, #93a0b2) !important; opacity: .8; }
/* el selector de cuenta (perfil) no se encoge y queda SIEMPRE visible */
header.topbar .navbar-nav.flex-row{ flex-wrap: nowrap; }
header.topbar .nav-item.dropdown:has(#drop1){ flex: 0 0 auto; margin-right: 2px; }
header.topbar #drop1 .ti-user-circle{ font-size: 1.5rem; }
/* Red de seguridad: si la ventana es estrecha, ocultar inline los datos menos
   críticos (siguen disponibles en el desplegable). El icono nunca se pierde. */
@media (max-width: 1500px){ header.topbar #dropacceqtyd{ display: none !important; } }
@media (max-width: 1300px){ header.topbar #drop44{ display: none !important; } }

/* CAUSA RAÍZ: la cabecera se salía del viewport por la derecha (≈57px), cortando
   el icono de cuenta. La limitamos al ancho real disponible (viewport - rail). */
@media (min-width: 992px){
  header.topbar{ max-width: calc(100vw - var(--marc-rail-w)) !important; }
}
body{ overflow-x: hidden; }

/* ---------- Tabs y tabla de posiciones estilo ActivTrader ---------- */
.nav-underline .nav-link{
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.7;
}
.nav-underline .nav-link.active{
  opacity: 1;
  color: var(--marc-accent) !important;
  border-bottom-color: var(--marc-accent) !important;
}
.position-row.sinhoverrow .position-cell{
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color, #93a0b2);
  font-weight: 700;
}
.position-cell{ font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .marc-quote-card{ padding: 9px 10px 7px; }
}
@media (max-width: 768px){
  #crypt-tab [data-trquote]{ padding: 4px 6px 0; }
  .marc-qc-price{ font-size: 1.05rem; }
}
/* =====================================================================
 * MARC TICKET — rediseño del drawer de orden (#offcanvasExample) tipo
 * ActivTrader. Reordena/reestiliza el contenido existente por CSS sin
 * mover/renombrar ningún hook de JS. Los nodos siguen ahí; cambia su
 * presentación y orden visual.
 * ===================================================================== */

/* Backdrop del offcanvas TRANSPARENTE: no oscurece la página pero sigue capturando
   el clic-fuera para cerrar el ticket (Bootstrap cierra al pulsar el backdrop). */
.offcanvas-backdrop{ background-color: transparent !important; }

/* Drawer del ticket en desktop: más ancho para ver bien el mini-chart */
@media (min-width: 992px){
  #offcanvasExample.offcanvas-end{ width: 460px !important; }
}

/* Botón de acción (Partial closure / SAVE) SIEMPRE visible abajo en el ticket;
   el resto del formulario scrollea por encima si no cabe (simplebar). */
#offcanvasExample .row:has(#btncreateoperation){
  position: sticky;
  bottom: 0;
  z-index: 6;
  padding: 10px 0 6px;
  /* divisor fino en vez del recuadro/sombra oscura que envolvía al botón */
  border-top: 1px solid var(--marc-border);
}

/* El cuerpo del ticket se centra y se limita al ancho ActivTrader */
#offcanvasExample .tab-content > #home.active{
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

/* MARC: aviso de mercado cerrado. Con el ticker cerrado se muestra TODO el ticket
   (precios, tamaño, SL/TP, etc.); solo se ocultan los botones de acción y se ve el aviso. */
.marc-mkt-closed{ display: none; }
#offcanvasExample.marc-market-closed .marc-mkt-closed{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 12px; margin: 8px 0; border-radius: var(--marc-radius);
  background: var(--marc-surface-1); border: 1px solid var(--marc-border);
  color: var(--bs-body-color); font-weight: 600; text-align: center;
}
.marc-mkt-closed i{ color: var(--marc-sell); font-size: 1.15rem; }
/* Mercado cerrado: se VE todo el ticket (entrada de orden visible y rellenable para consulta);
   solo se ocultan los botones de acción (no se puede abrir ni cerrar parcial) y el aviso ocupa su
   sitio. Mercado abierto = al revés (botones visibles, aviso oculto por defecto).
   La validación real sigue en create_operation. */
#offcanvasExample.marc-market-closed #btncreateoperation,
#offcanvasExample.marc-market-closed #btncreateoperationpartialclosure{ display: none !important; }

/* Cierre parcial: texto de ayuda más claro */
.marc-partial-help{ font-size: .8rem; color: var(--bs-secondary-color, #93a0b2); line-height: 1.3; }
.marc-partial-help span{ display: block; }

/* EDICIÓN: no se puede cambiar compra/venta (la dirección de la posición es fija) */
#offcanvasExample[data-tickermodaloffcanvasidposition] #divbtnssellbuy{ pointer-events: none; }
#offcanvasExample[data-tickermodaloffcanvasidposition] #divbtnssellbuy [data-actionop-modal]:not(.active){ opacity: .38; }
/* Header VENDER/COMPRAR arriba del todo; segmented justo debajo */
#offcanvasExample .tab-content > #home > .marc-ticket-head{ order: -2; }
#offcanvasExample .tab-content > #home > .marc-ordertype{ order: -1; }

/* Compactar la nav de tabs (Order Entry / Instrument Details) */
/* ===== MARC: TABS del offcanvas (Order Entry / Instrument Details) — diseño ultracode ===== */
#offcanvasExample .nav-underline.showincreateposition {
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
  border-bottom: 1px solid var(--marc-border);
  padding-bottom: 12px;
}
#offcanvasExample .nav-underline.showincreateposition .nav-item {
  flex: 0 1 auto;
  position: relative;
}
#offcanvasExample .nav-underline.showincreateposition .nav-link {
  padding: 8px 0 !important;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  border: none !important;
  border-bottom: 2px solid transparent;
  color: var(--bs-secondary-color) !important;
  transition: all 0.18s var(--marc-ease);
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
#offcanvasExample .nav-underline.showincreateposition .nav-link:hover {
  color: var(--bs-body-color) !important;
  border-bottom-color: var(--marc-border-strong);
}
#offcanvasExample .nav-underline.showincreateposition .nav-link.active {
  color: var(--marc-accent) !important;
  border-bottom-color: var(--marc-accent) !important;
}
#offcanvasExample .nav-underline.showincreateposition .nav-link span {
  line-height: 1;
}

/* ========== MARC: INSTRUMENT DETAILS — diseño ultracode (definition-list + grafts) ========== */
#offcanvasExample .marc-id-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
/* HEADER: Ticker + Name + Asset Badge */
#offcanvasExample .marc-id-header {
  padding: 16px 0 20px;
  border-bottom: 1px solid var(--marc-border);
  margin-bottom: 20px;
}
#offcanvasExample .marc-id-ticker {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--bs-body-color);
  margin-bottom: 4px;
}
#offcanvasExample .marc-id-name {
  font-size: 0.95rem;
  color: var(--bs-secondary-color);
  margin-bottom: 12px;
  line-height: 1.4;
  word-break: break-word;
}
#offcanvasExample .marc-id-asset-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--marc-accent-soft);
  color: var(--marc-accent);
  border-radius: var(--marc-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
#offcanvasExample .marc-id-asset-badge i {
  font-size: 0.8rem;
  opacity: 0.85;
}
/* SECTIONS */
#offcanvasExample .marc-id-section {
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--marc-border);
  margin-bottom: 20px;
}
#offcanvasExample .marc-id-section--last {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
#offcanvasExample .marc-id-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bs-secondary-color);
  padding-bottom: 8px;
  line-height: 1;
}
#offcanvasExample .marc-id-section-header i {
  font-size: 0.9rem;
  color: var(--marc-accent);
  opacity: 0.8;
  flex-shrink: 0;
}
/* Rows: Label + Value */
#offcanvasExample .marc-id-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--marc-border);
  min-height: 32px;
}
#offcanvasExample .marc-id-row--last {
  border-bottom: none;
}
#offcanvasExample .marc-id-label {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: capitalize;
}
#offcanvasExample .marc-id-value {
  flex: 1 1 auto;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bs-body-color);
  word-break: break-word;
}
#offcanvasExample .marc-id-value:empty::before {
  content: '—';
  opacity: 0.5;
}
#offcanvasExample .marc-id-value--accent {
  color: var(--marc-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#offcanvasExample .marc-id-value--buy {
  color: var(--marc-buy);
  font-weight: 600;
}
#offcanvasExample .marc-id-value--sell {
  color: var(--marc-sell);
  font-weight: 600;
}
#offcanvasExample .marc-id-trading-hours {
  font-size: 0.9rem;
  line-height: 1.6;
}
#offcanvasExample .marc-id-trading-hours > * {
  margin: 0;
}
/* Responsive: apila etiqueta/valor en pantallas estrechas */
@media (max-width: 480px) {
  #offcanvasExample .marc-id-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 0;
  }
  #offcanvasExample .marc-id-value {
    text-align: left;
    width: 100%;
    margin-top: 2px;
  }
  #offcanvasExample .marc-id-ticker { font-size: 1.35rem; }
  #offcanvasExample .marc-id-name { font-size: 0.9rem; }
}

/* "More Options" siempre visible; se oculta su botón toggle */
#botonmoreoptionstrade{ display: none !important; }
#moreOptions.collapse{ display: block !important; height: auto !important; visibility: visible !important; overflow: visible !important; }
#moreOptions > .w-100{ display: flex; flex-direction: column; gap: 2px; }

/* Ocultar el checkbox "Execute When Price Hits" (lo sustituye el segmented);
   #startonprice sigue en el DOM para create_operation */
.marc-startoncheck{ display: none !important; }

/* ---------- Header VENDER / COMPRAR ---------- */
.marc-ticket-head{ background: transparent !important; box-shadow: none !important; border: none !important; margin: 0 !important; }
#divbtnssellbuy{ display: flex !important; align-items: stretch; gap: 10px; width: 100%; }
#divbtnssellbuy [data-actionop-modal]{
  flex: 1 1 0; display: flex; flex-direction: column; gap: 2px;
  border: none !important; border-radius: var(--marc-radius) !important;
  padding: 12px 16px !important; min-height: 66px; box-shadow: none !important;
}
/* MARC: cabecera SELL/BUY "bold" tipo referencia — fondo más marcado en reposo y
   relleno SÓLIDO con texto blanco en el lado ACTIVO (el pill elegido). */
#divbtnssellbuy [data-actionop-modal="sell"]{ background: rgba(239,83,80,0.22) !important; color: var(--marc-sell) !important; align-items: flex-start; }
#divbtnssellbuy [data-actionop-modal="buy"]{ background: rgba(38,166,154,0.22) !important; color: var(--marc-buy) !important; align-items: flex-end; }
#divbtnssellbuy [data-actionop-modal="sell"].active{ background: var(--marc-sell) !important; color: #fff !important; box-shadow: 0 6px 16px -8px var(--marc-sell) !important; }
#divbtnssellbuy [data-actionop-modal="buy"].active{ background: var(--marc-buy) !important; color: #fff !important; box-shadow: 0 6px 16px -8px var(--marc-buy) !important; }
#divbtnssellbuy [data-actionop-modal] > span:first-child,
.marc-bs-lbl{ font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .85; }
.marc-bs-price{ font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.marc-bs-spread{
  align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 40px; font-size: .62rem; color: var(--bs-secondary-color, #93a0b2);
}
.marc-bs-spread b{ font-weight: 700; font-size: .8rem; }

/* MARC: logo del símbolo en el centro del header (entre SELL y BUY), espeja .marc-qc-flag.
   El centro ya es columna centrada -> el logo va arriba y el spread queda pequeño debajo. */
.marc-bs-spread{ min-width: 52px; gap: 3px; }
.marc-bs-logo{ position: relative; display: flex; align-items: center; justify-content: center; min-width: 58px; min-height: 48px; }
.marc-bs-logo > div{ margin: 0 !important; }   /* neutraliza el .mx-2 del wrapper de dameiconoflag */
/* logo por ticker (cripto/acciones/índices): más grande y con marco bonito en el offcanvas */
.marc-bs-logo .marc-qc-logo{ width: 46px; height: 46px; border-radius: 12px; object-fit: contain; display: block;
  background: var(--bs-body-bg); box-shadow: 0 0 0 1px var(--marc-border), 0 4px 10px rgba(0,0,0,.30); }
/* fx: dos banderas IGUAL que en .marc-qc-flag. position:relative ancla la .flages1 absoluta aquí
   (si no, se escapa al offcanvas fixed); solo se resetea el margen vertical base, conservando los
   offsets margin-left de flages1/flages2 que crean el solapamiento. */
.marc-bs-logo .flagv2{ margin-top: 0; margin-bottom: 0; }
/* fx en el offcanvas: banderas más grandes y bonitas (la izquierda flages1 queda encima por su z-index) */
.marc-bs-logo .flages1, .marc-bs-logo .flages2{ width: 26px !important; height: 26px !important; border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,.30); }
.marc-bs-logo .flages1{ margin-left: -7px; }
.marc-bs-logo .flages2{ margin-left: 7px; }
/* spread como chip pequeño debajo del logo (estilo referencia) */
.marc-bs-spread [data-marc-spread-modal]{
  font-weight: 700; font-size: .68rem; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 999px; line-height: 1.5;
  background: var(--marc-surface-2, rgba(0,0,0,.35)); color: var(--bs-body-color);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.marc-bs-spread small{ opacity: .65; }

/* ---------- Selector tipo de orden: BOTONES tipo grupo (título + descripción) ----------
   MARC: a petición, se restaura el estilo "card" con icono+título y subtítulo descriptivo
   (iba perfecto aquí), en vez de las tabs underline. Activo = acento + fondo suave. */
.marc-ordertype{
  display: flex; gap: 8px; padding: 0; margin: 8px 0 4px;
  background: transparent; border: none; border-radius: 0;
}
.marc-ordertype button{
  flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1px solid var(--marc-border-strong); background: var(--marc-surface-1); cursor: pointer;
  color: var(--bs-secondary-color, #93a0b2);
  padding: 10px 12px; border-radius: var(--marc-radius);
  transition: color .15s var(--marc-ease), border-color .15s var(--marc-ease), background-color .15s var(--marc-ease);
}
.marc-ordertype button:hover{ color: var(--bs-body-color); }
.marc-ordertype button.active{ background: var(--marc-accent-soft); color: var(--marc-accent); border-color: var(--marc-accent); }
.marc-ot-title{ display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; line-height: 1.1; white-space: nowrap; }
.marc-ot-title i{ display: inline-flex; font-size: 16px; }
.marc-ot-sub{ display: block; font-size: .68rem; opacity: .72; line-height: 1.15; }
.marc-ordertype button.active .marc-ot-sub{ opacity: .9; }

/* ---------- Importe (Amount) compacto arriba + Lotes (Volume) grande + slider ----------
   Se puede introducir por Importe/unidades O por Lotes (ambos enlazados por JS). */
/* Apilar Amount (arriba) y Volume (abajo), ambos a todo el ancho */
#offcanvasExample .tab-content > #home > .w-100.showincreateposition .row > .col-12.col-md-6{ flex: 0 0 100%; max-width: 100%; }
/* (separador eliminado: Importe/Volumen ahora se alternan con un toggle) */
/* Etiquetas tipo caption, centradas (Importe y Lotes) */
#offcanvasExample label[for="modalamount"], #offcanvasExample label[for="modalvolume"]{
  display: block; text-align: center; width: 100%;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; opacity: .65; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Inputs centrados sin borde */
#offcanvasExample .input-group:has(#modalamount), #offcanvasExample .input-group:has(#modalvolume){
  border: none; justify-content: center; align-items: center; gap: 8px;
}
/* Importe (Amount): compacto */
#modalamount{
  text-align: center; font-size: 1.15rem !important; font-weight: 700;
  border: none !important; background: transparent !important; max-width: 130px; padding: 2px 4px !important;
}
#offcanvasExample .input-group:has(#modalamount) .btn.border{
  border-radius: 50% !important; width: 28px; height: 28px; padding: 0 !important;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
  border-color: var(--marc-border-strong) !important;
}
/* Lotes (Volume): grande (diseño nuevo) */
#modalvolume{
  text-align: center; font-size: 1.7rem !important; font-weight: 700;
  border: none !important; background: transparent !important; max-width: 130px; padding: 2px 4px !important;
}
#offcanvasExample .input-group:has(#modalvolume) .btn.border{
  border-radius: 50% !important; width: 34px; height: 34px; padding: 0 !important;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  border-color: var(--marc-border-strong) !important;
}
/* Slider de lotes — diseño moderno: track con relleno (--marc-lots-fill) + thumb propio */
.marc-lots-slider{
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 10px 0 0;
  border-radius: 999px; cursor: pointer; outline: none;
  background: linear-gradient(90deg,
    var(--marc-accent,#3d8bfd) 0%, var(--marc-accent,#3d8bfd) var(--marc-lots-fill,0%),
    rgba(128,128,128,.28) var(--marc-lots-fill,0%), rgba(128,128,128,.28) 100%);
}
/* MARC: handle tipo "grip" (pill con 3 rayitas verticales) como en la referencia. Las rayas se
   dibujan con 3 gradientes (no hay ::before en un thumb de range). */
.marc-lots-slider::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none; width: 28px; height: 18px; border-radius: 6px;
  background-color: var(--marc-accent,#3d8bfd); border: none; cursor: pointer;
  background-image: linear-gradient(#fff,#fff), linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);
  background-size: 2px 8px; background-repeat: no-repeat;
  background-position: calc(50% - 4px) center, center, calc(50% + 4px) center;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .12s var(--marc-ease,ease);
}
.marc-lots-slider::-webkit-slider-thumb:hover{ transform: scale(1.12); }
.marc-lots-slider:active::-webkit-slider-thumb{ transform: scale(1.18); }
.marc-lots-slider::-moz-range-thumb{
  width: 28px; height: 18px; border-radius: 6px; background-color: var(--marc-accent,#3d8bfd);
  border: none; cursor: pointer;
  background-image: linear-gradient(#fff,#fff), linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);
  background-size: 2px 8px; background-repeat: no-repeat;
  background-position: calc(50% - 4px) center, center, calc(50% + 4px) center;
}
.marc-lots-slider::-moz-range-track{ height: 6px; border-radius: 999px; background: transparent; }
.marc-lots-slider:focus-visible{ box-shadow: 0 0 0 3px var(--marc-accent-soft, rgba(61,139,253,.25)); }
/* Meta del slider: mínimo a la izquierda + botón "Máx" a la derecha */
/* MARC: ocultado a petición -> fuera el "min 0.01" y el botón "Max" para un slider más limpio
   (los <b data-marc-minlots/maxlots> siguen en el DOM; el JS los escribe con guardas if(...)). */
.marc-lots-meta{ display: none; }
.marc-lots-min{ font-size: .68rem; color: var(--bs-secondary-color, #93a0b2); }
.marc-lots-min b, .marc-lots-maxbtn b{ font-weight: 700; font-variant-numeric: tabular-nums; }
.marc-lots-maxbtn{
  border: none; background: var(--marc-accent-soft, rgba(61,139,253,.16)); color: var(--marc-accent,#3d8bfd);
  font-size: .68rem; font-weight: 700; padding: 4px 10px; border-radius: var(--marc-radius-sm, 8px);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: background-color .15s var(--marc-ease,ease), color .15s var(--marc-ease,ease);
}
.marc-lots-maxbtn:hover{ background: var(--marc-accent,#3d8bfd); color: #fff; }
.marc-lots-maxbtn i{ font-size: 13px; line-height: 1; }
/* Contenedor compartido del slider (visible en modo Lots y Amount) */
.marc-lots-sliderwrap{ margin-top: 2px; }

/* ---------- Lots simple: caption + número grande centrado + botón confirmar ---------- */
.marc-lots-head{ text-align: center; }
.marc-lots-caption{ display: block; text-align: center; width: 100%;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; opacity: .65; font-weight: 700; margin-bottom: 2px; }
.marc-lots-valuerow{ display: flex; align-items: center; justify-content: center; gap: 10px; }
/* el tamaño/centrado del número lo da la regla #modalvolume (1.7rem, sin borde, centrado) */
.marc-lots-value{ flex: 0 1 auto; }
.marc-lots-ok-spacer{ flex: 0 0 34px; width: 34px; height: 34px; }
.marc-lots-ok{ flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--marc-border-strong); background: transparent;
  color: var(--bs-secondary-color, #93a0b2); cursor: pointer;
  transition: background-color .15s var(--marc-ease,ease), color .15s var(--marc-ease,ease), border-color .15s var(--marc-ease,ease), transform .1s var(--marc-ease,ease); }
.marc-lots-ok:hover{ background: var(--marc-accent,#3d8bfd); border-color: var(--marc-accent,#3d8bfd); color: #fff; }
.marc-lots-ok:active{ transform: scale(.94); }
.marc-lots-ok i{ font-size: 1.05rem; line-height: 1; }

/* ---------- Margen / Fondos: fila compacta a dos lados ---------- */
.marc-funds-row{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 10px 0 6px; }
.marc-funds-row .marc-fund--right{ text-align: right; }
.marc-funds-row .form-label{ display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin-bottom: 1px; }
.marc-fund-val{ font-weight: 700; font-variant-numeric: tabular-nums; font-size: .98rem; }

/* ---------- Botón "Show mini-graph" (carga bajo demanda del datachartsv8 del offcanvas) ---------- */
.marc-showminigraph{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 6px 0 8px; padding: 10px 12px;
  border: 1px dashed var(--marc-border-strong); border-radius: var(--marc-radius);
  background: var(--marc-surface-1); color: var(--bs-body-color);
  font-weight: 600; font-size: .85rem; cursor: pointer;
  transition: background-color .15s var(--marc-ease,ease), border-color .15s var(--marc-ease,ease), color .15s var(--marc-ease,ease);
}
.marc-showminigraph:hover{ border-color: var(--marc-accent,#3d8bfd); color: var(--marc-accent,#3d8bfd); }
.marc-showminigraph i{ font-size: 1.05rem; line-height: 1; }

/* ---------- Margen / Disponible / barra ---------- */
#offcanvasExample .row.showincreateposition .form-label{ font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
#modalrequiredmargin, #modalfreefunds{ font-weight: 700; font-variant-numeric: tabular-nums; }
#barraprogress .progress{ height: 6px !important; border-radius: 999px; }
#modalpercentrequiredspan{ display: none !important; }

/* ---------- TP / SL / Trailing como switches en filas ---------- */
#offcanvasExample .showtakeyproft{ display: flex; flex-direction: column; }
#offcanvasExample .showtakeyproft > .col-sm-6{ flex: 0 0 100%; max-width: 100%; width: 100%; }
#offcanvasExample .showtakeyproft .form-check{
  display: flex !important; flex-direction: row-reverse; justify-content: space-between; align-items: center;
  height: auto !important; padding: 12px 2px !important; margin: 0 !important; border-top: 1px solid var(--marc-border);
}
#offcanvasExample .showtakeyproft .form-check-input{ float: none; margin: 0 !important; width: 2.6em; height: 1.4em; cursor: pointer; }
#offcanvasExample .showtakeyproft .form-check-label{ font-weight: 600; margin: 0; }
.marc-trow{
  display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center;
  padding: 12px 2px; border-top: 1px solid var(--marc-border);
}
.marc-trow.is-disabled{ opacity: .45; }
.marc-trow .form-check-input{ width: 2.6em; height: 1.4em; margin: 0; }
.marc-trow .form-check-input:disabled{ cursor: not-allowed; }

/* ---------- Sentimiento del mercado (placeholder, sin datos) ---------- */
.marc-sentiment{ padding-top: 6px; }
.marc-sentiment__title{ font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; opacity: .55; text-align: center; margin-bottom: 6px; }
.marc-sentiment__bar{ height: 8px; border-radius: 999px; overflow: hidden; display: flex; opacity: .45; }
.marc-sentiment__bar i{ display: block; height: 100%; }
.marc-sentiment__bar .s-buy{ width: 50%; background: var(--marc-buy); }
.marc-sentiment__bar .s-sell{ width: 50%; background: var(--marc-sell); }

/* Submit buttons full-width tipo ActivTrader */
#btncreateoperation, #btncreateoperationpartialclosure{ min-width: 46%; }

/* MARC: botón principal "Colocar Orden" — full width, color según lado activo.
   El pill VENDER/COMPRAR selecciona el lado; este botón confirma (dos pasos). */
#btncreateoperation{
  width: 100%; min-width: 100% !important; margin: 0 !important;
  border: none !important; color: #fff !important; font-weight: 700;
  font-size: 1rem; letter-spacing: .02em;
  padding: 14px 16px !important; border-radius: var(--marc-radius) !important;
  background: var(--marc-buy) !important;
  box-shadow: 0 4px 14px -6px var(--marc-buy);
  transition: filter .15s var(--marc-ease), transform .05s var(--marc-ease), box-shadow .15s var(--marc-ease);
}
#btncreateoperation:hover{ filter: brightness(1.06); }
#btncreateoperation:active{ transform: translateY(1px); }
#btncreateoperation.marc-submit-sell{ background: var(--marc-sell) !important; box-shadow: 0 4px 14px -6px var(--marc-sell); }
#btncreateoperation:disabled{ opacity: .5; box-shadow: none; }

/* MARC: steppers -/+ de los input-group (SL/TP, cierre parcial) -> redondos con hover de acento, en
   vez del botón Bootstrap básico rectangular. */
#offcanvasExample .input-group .btn.border{
  border-radius: 50% !important; width: 34px; height: 34px; padding: 0 !important; flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--marc-surface-1); color: var(--bs-body-color);
  border: 1px solid var(--marc-border-strong) !important; font-size: 1.15rem; line-height: 1; font-weight: 600;
  transition: background-color .15s var(--marc-ease), color .15s var(--marc-ease), border-color .15s var(--marc-ease), transform .06s var(--marc-ease);
}
#offcanvasExample .input-group .btn.border:hover{ background: var(--marc-accent-soft); color: var(--marc-accent); border-color: var(--marc-accent) !important; }
#offcanvasExample .input-group .btn.border:active{ transform: scale(.9); }

/* MARC: botón "Partial closure" -> superficie con borde y hover de acento (no el outline-secondary básico). */
#btncreateoperationpartialclosure{
  border-radius: var(--marc-radius) !important; padding: 12px 16px !important; font-weight: 600;
  border: 1px solid var(--marc-border-strong) !important;
  background: var(--marc-surface-2) !important; color: var(--bs-body-color) !important;
  transition: background-color .15s var(--marc-ease), border-color .15s var(--marc-ease), color .15s var(--marc-ease), transform .06s var(--marc-ease);
}
#btncreateoperationpartialclosure:hover{ background: var(--marc-accent-soft) !important; border-color: var(--marc-accent) !important; color: var(--marc-accent) !important; }
#btncreateoperationpartialclosure:active{ transform: translateY(1px); }

/* MARC: precio de activación (Limit/Stop) reubicado bajo las pestañas */
.marc-startonprice-wrap{ margin-top: 2px; }
.marc-field-label{
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
  opacity: .65; font-weight: 700; display: block; margin-bottom: 2px; text-align: center;
}
.marc-startonprice-wrap .input-group{ justify-content: center; align-items: center; gap: 8px; border: none; }
.marc-startonprice-wrap .btn.border{
  border-radius: 50% !important; width: 34px; height: 34px; padding: 0 !important;
  display: flex; align-items: center; justify-content: center; border-color: var(--marc-border-strong) !important;
}
.marc-startonprice-wrap #modalstartonprice{
  text-align: center; font-weight: 700; border: none !important; background: transparent !important;
  max-width: 150px; font-size: 1.2rem;
}

/* MARC: Trailing Stop oculto por ahora. El Sentimiento del mercado YA se muestra
   (datos calculados en backend por cron). */
.marc-trow{ display: none !important; }

/* ===== MARC TICKET v2 — pulido extra del offcanvas ===== */
/* +/- simétricos en Importe y Volumen (- valor +), igual que el resto de campos */
#offcanvasExample .input-group:has(#modalamount) > .btn.border:nth-of-type(1),
#offcanvasExample .input-group:has(#modalvolume) > .btn.border:nth-of-type(1){ order: 0; }
#offcanvasExample .input-group:has(#modalamount) > #modalamount,
#offcanvasExample .input-group:has(#modalvolume) > #modalvolume{ order: 1; }
#offcanvasExample .input-group:has(#modalamount) > .btn.border:nth-of-type(2),
#offcanvasExample .input-group:has(#modalvolume) > .btn.border:nth-of-type(2){ order: 2; }

/* Precio de activación: tarjeta sutil que resalta el dato clave de la orden pendiente */
.marc-startonprice-wrap{
  background: var(--marc-surface-1); border: 1px solid var(--marc-border);
  border-radius: var(--marc-radius-sm); padding: 8px 10px;
}

/* SL/TP: la fila "Precio" es el valor secundario → etiqueta y valor más tenues,
   dejando el importe (USD) como dato principal */
#offcanvasExample label[for="modalstoplosscoti"], #offcanvasExample label[for="modaltakeprofitcoti"]{
  font-size: .58rem !important; opacity: .5; text-transform: uppercase; letter-spacing: .05em; margin: 2px 0 0 !important;
}
#offcanvasExample #modalstoplosscoti, #offcanvasExample #modaltakeprofitcoti{ font-size: .95rem; opacity: .85; }

/* Separadores sutiles entre bloques de tamaño y de SL/TP para dar ritmo */
.marc-startonprice-wrap{ margin-bottom: 2px; }

/* Toggle tipo tab para alternar Importe/Volumen y USD/Precio (más pequeño que el de Market/Order) */
.marc-fieldtoggle{
  display: flex; gap: 3px; padding: 2px; margin: 0 0 6px;
  background: var(--marc-surface-1); border: 1px solid var(--marc-border); border-radius: var(--marc-radius-sm);
}
:root[data-bs-theme="light"] .marc-fieldtoggle{ background: #eef1f6; border-color: rgba(0,0,0,.08); }
.marc-fieldtoggle button{
  flex: 1; border: none; background: transparent; cursor: pointer;
  color: var(--bs-secondary-color, #93a0b2); font-weight: 700; font-size: .6rem;
  letter-spacing: .05em; text-transform: uppercase; padding: 4px 0;
  border-radius: calc(var(--marc-radius-sm) - 3px);
  transition: background-color .15s var(--marc-ease), color .15s var(--marc-ease);
}
.marc-fieldtoggle button.active{ background: var(--marc-accent); color: #fff; }

/* MARC: selector de unidad de tamaño (Volume/Import) como DROPDOWN con kebab "..." (igual que SL/TP).
   Reusa .marc-unitmenu/.marc-unitmenu__btn/.__list. La opción activa la marca .active (no aria-checked,
   que driftaría con un solo menú); el menú abre alineado a la izquierda. */
/* MARC: kebab de unidad (Volume/Import) PEGADO a la derecha del caption ("LOTS"/"Amount"), ambos
   centrados juntos en una fila. Va uno por columna; solo se ve el de la columna visible. */
.marc-lots-captionrow{ display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 2px; }
/* gana a #offcanvasExample label[for=modalvolume]{width:100%} (~2097): el caption se ajusta al texto
   (flex:0 0 auto) para que el kebab quede pegado a su derecha, no estirado al extremo. */
#offcanvasExample .marc-lots-captionrow .marc-lots-caption{ width: auto !important; flex: 0 0 auto; margin-bottom: 0; }
.marc-sizesel{ display: inline-flex; }
.marc-sizesel .marc-unitmenu__list{ left: 50%; right: auto; transform: translateX(-50%); min-width: 150px; }
/* check de la unidad activa por COLUMNA visible (no por .active, que driftaría entre los 2 menús) */
.marc-col-volume .marc-sizesel .marc-unitmenu__list button:first-child,
.marc-col-amount .marc-sizesel .marc-unitmenu__list button:last-child{ color: var(--marc-accent); font-weight: 700; }
.marc-col-volume .marc-sizesel .marc-unitmenu__list button:first-child::after,
.marc-col-amount .marc-sizesel .marc-unitmenu__list button:last-child::after{ content: "\2713"; font-size: .82rem; font-weight: 700; line-height: 1; }

/* ===== MARC: popover/tooltip VANILLA (sin Bootstrap/jQuery). Lo dispara cualquier [data-marc-pop];
   lo gestiona marcPopover() en m7.marcx.js. Uno a la vez, hover/focus + tap, reposicionado en scroll. */
.marc-pop{
  position: fixed; z-index: 20000; max-width: 244px;
  background: var(--marc-surface-2, #212c3e); color: var(--bs-body-color);
  border: 1px solid var(--marc-border-strong); border-radius: var(--marc-radius-sm, 8px);
  box-shadow: var(--marc-shadow, 0 8px 24px -8px rgba(0,0,0,.5));
  padding: 9px 11px; font-size: .76rem; line-height: 1.45; font-weight: 500;
  opacity: 0; transform: translateY(3px); pointer-events: none;
  transition: opacity .14s var(--marc-ease, ease), transform .14s var(--marc-ease, ease);
}
.marc-pop.is-shown{ opacity: 1; transform: translateY(0); }
.marc-pop__arrow{
  position: absolute; width: 9px; height: 9px; background: var(--marc-surface-2, #212c3e);
  border-right: 1px solid var(--marc-border-strong); border-bottom: 1px solid var(--marc-border-strong);
  transform: rotate(45deg);
}
.marc-pop__arrow.is-below{ border: 0; border-left: 1px solid var(--marc-border-strong); border-top: 1px solid var(--marc-border-strong); }
[data-marc-pop]{ cursor: help; }
i.ti[data-marc-pop]{ opacity: .7; transition: opacity .15s var(--marc-ease, ease); }
i.ti[data-marc-pop]:hover{ opacity: 1; color: var(--marc-accent); }

/* ===== MARC: caja de campo con menú "..." (kebab) para la unidad =====
   Sustituye a .marc-fieldtoggle: caja con borde, etiqueta de unidad arriba-izq,
   valor, y un "..." arriba-dcha que despliega las unidades (check en la activa).
   La unidad activa la refleja el <label> de la columna visible (u-hidden oculta
   la otra) -> sin JS. Los <button> del menú llaman a marcSizeTab/marcSLTPtab. */
/* MARC: a petición, SL/TP sin "card" -> sin fondo ni borde, sobre el fondo del offcanvas (más limpio).
   El relieve lo aportan los propios botones del input-group. Más aire arriba/abajo. */
.marc-fieldbox{
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 2px 0 4px;
}
/* MARC: fila informativa (solo lectura) bajo el importe de SL/TP: Distancia en puntos + nivel de precio */
.marc-fieldbox__meta{
  display: flex; justify-content: space-between; gap: 8px; margin-top: 6px;
  font-size: .62rem; color: var(--bs-secondary-color,#93a0b2); font-variant-numeric: tabular-nums;
}
.marc-fieldbox__meta b{ color: var(--bs-body-color); font-weight: 700; }
.marc-fieldbox__head{
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-bottom: 7px; min-height: 22px;
}
/* MARC: al activar Stop Loss / Take Profit, el campo se ve como LOTS -> caption+kebab centrados,
   número GRANDE centrado sin borde y steppers redondos (los ± ya son redondos por la regla de
   .input-group .btn.border). */
#offcanvasExample .marc-fieldbox .input-group{ border: none; justify-content: center; align-items: center; gap: 10px; }
#offcanvasExample #modalstoploss, #offcanvasExample #modaltakeprofit{
  text-align: center; font-size: 1.7rem !important; font-weight: 700; color: var(--bs-body-color) !important;
  border: none !important; background: transparent !important; box-shadow: none !important;
  max-width: 150px; padding: 2px 4px !important;
}
#offcanvasExample #modalstoplosscoti, #offcanvasExample #modaltakeprofitcoti{
  text-align: center; font-size: 1.35rem !important; font-weight: 700; opacity: 1; color: var(--bs-body-color) !important;
  border: none !important; background: transparent !important; box-shadow: none !important;
  max-width: 175px; padding: 2px 4px !important;
}
/* ocultar las flechas nativas del input number en SL/TP (como en el campo de lots) */
#offcanvasExample .marc-fieldbox input[type="number"]::-webkit-outer-spin-button,
#offcanvasExample .marc-fieldbox input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
#offcanvasExample .marc-fieldbox input[type="number"]{ -moz-appearance: textfield; }
/* el <label> por-columna pasa a caption arriba-izquierda (vence al centrado Amount/Volume) */
.marc-fieldbox__head .form-label{
  display: inline-block !important; width: auto !important; text-align: left !important;
  margin: 0 !important; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
  opacity: .65; font-weight: 700; white-space: nowrap;
}
/* el caption "Price" (coti) se lee igual que "Amount" (vence a la regla que lo atenuaba a .5) */
#offcanvasExample .marc-fieldbox__head label[for="modalstoplosscoti"],
#offcanvasExample .marc-fieldbox__head label[for="modaltakeprofitcoti"]{
  font-size: .62rem !important; opacity: .65; letter-spacing: .06em; margin: 0 !important; text-align: left;
}

/* kebab "..." vía <details> */
.marc-unitmenu{ position: relative; flex: 0 0 auto; }
.marc-unitmenu__btn{
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--marc-radius-sm);
  border: 1px solid var(--marc-border); color: var(--bs-secondary-color, #93a0b2);
  transition: background-color .15s var(--marc-ease), color .15s var(--marc-ease), border-color .15s var(--marc-ease);
}
.marc-unitmenu__btn::-webkit-details-marker{ display: none; }
.marc-unitmenu__btn::marker{ content: ""; }
.marc-unitmenu__btn:hover{ color: var(--bs-body-color); border-color: var(--marc-border-strong); }
.marc-unitmenu[open] .marc-unitmenu__btn{ background: var(--marc-accent-soft); color: var(--marc-accent); border-color: transparent; }
.marc-unitmenu__btn i{ font-size: 15px; line-height: 1; }

/* lista desplegable */
.marc-unitmenu__list{
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 7;   /* por encima del footer sticky (z6) */
  min-width: 132px; padding: 4px; display: flex; flex-direction: column;
  background: var(--marc-surface-2); border: 1px solid var(--marc-border-strong);
  border-radius: var(--marc-radius-sm); box-shadow: 0 8px 24px -8px rgba(0,0,0,.45);
}
:root[data-bs-theme="light"] .marc-unitmenu__list{ box-shadow: 0 8px 24px -10px rgba(0,0,0,.18); }
.marc-unitmenu__list button{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; border: none; background: transparent; cursor: pointer; text-align: left;
  padding: 7px 10px; border-radius: calc(var(--marc-radius-sm) - 4px);
  color: var(--bs-body-color); font-weight: 600; font-size: .8rem;
  transition: background-color .12s var(--marc-ease), color .12s var(--marc-ease);
}
.marc-unitmenu__list button:hover{ background: var(--marc-surface-1); }
/* El check va por aria-checked (estático: marca la unidad propia de la columna visible).
   NO usar .active aquí: marcSLTPtab/marcSizeTab togglean .active y haría drift al cambiar. */
.marc-unitmenu__list button[aria-checked="true"]{ color: var(--marc-accent); }
.marc-unitmenu__list button[aria-checked="true"]::after{ content: "\2713"; font-size: .82rem; font-weight: 700; line-height: 1; }

/* ===== MARC: Calendario económico (sección propia, lista compacta a color) ===== */
.marc-cal{ max-width: 820px; margin: 0 auto; }
.marc-cal__list{ max-height: calc(100dvh - 210px); overflow-y: auto; padding-right: 4px; }
.marc-cal__day{
  position: sticky; top: 0; z-index: 1; background: var(--marc-surface-1);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 6px 12px; border-bottom: 1px solid var(--marc-border); color: var(--text-accent, #4285F4);
}
.marc-cal__row{
  border-left: 3px solid var(--marc-border); border-bottom: 1px solid var(--marc-border);
}
.marc-cal__rowhead{
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  cursor: pointer;
  transition: background-color .12s var(--marc-ease);
}
.marc-cal__rowhead:hover{ background: var(--marc-surface-1); }
.marc-cal__row.imp-low{ border-left-color: #16a34a; }
.marc-cal__row.imp-medium{ border-left-color: #f59e0b; }
.marc-cal__row.imp-high{ border-left-color: #dc2626; }
.marc-cal__time{ font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; min-width: 46px; }
.marc-cal__flag{ width: 24px !important; height: 18px !important; flex: 0 0 auto; border-radius: 3px; background-size: cover; background-position: center; }
.marc-cal__main{ flex: 1 1 auto; min-width: 0; }
.marc-cal__event{ font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marc-cal__vals{ display: flex; gap: 14px; font-size: .74rem; opacity: .65; margin-top: 1px; }
.marc-cal__vals b{ opacity: 1; font-weight: 700; }
.marc-cal__imp{ display: flex; gap: 3px; flex: 0 0 auto; align-items: center; }
.marc-cal__imp span{ width: 7px; height: 7px; border-radius: 50%; background: var(--marc-border-strong, #555); }
.marc-cal__row.imp-low .marc-cal__imp span:nth-child(1){ background: #16a34a; }
.marc-cal__row.imp-medium .marc-cal__imp span:nth-child(-n+2){ background: #f59e0b; }
.marc-cal__row.imp-high .marc-cal__imp span{ background: #dc2626; }
/* Chevron + detalle expandible por fila (recupera el detalle "de antes") */
.marc-cal__chev{ flex: 0 0 auto; opacity: .45; font-size: 1rem; transition: transform .2s var(--marc-ease); }
.marc-cal__row.cal-open .marc-cal__chev{ transform: rotate(180deg); opacity: .8; }
.marc-cal__detail{
  max-height: 0; opacity: 0; overflow: hidden;
  padding: 0 14px 0 calc(12px + 24px + 46px);
  transition: max-height .22s var(--marc-ease), opacity .22s var(--marc-ease), padding-bottom .22s var(--marc-ease);
}
.marc-cal__row.cal-open .marc-cal__detail{ max-height: 320px; opacity: 1; padding-bottom: 11px; }
.marc-cal__drow{
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: .82rem; padding: 4px 0; border-bottom: 1px dashed var(--marc-border);
}
.marc-cal__drow:last-child{ border-bottom: 0; }
.marc-cal__drow > span{ opacity: .65; }
.marc-cal__drow > b{ font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.marc-cal__impword{ text-transform: capitalize; }
.marc-cal__impword.imp-low{ color: #16a34a; }
.marc-cal__impword.imp-medium{ color: #f59e0b; }
.marc-cal__impword.imp-high{ color: #dc2626; }
.marc-cal__desc{ font-size: .8rem; opacity: .8; line-height: 1.45; padding-top: 7px; }

/* ===== MARC: ajustes responsive extra ===== */
/* Grids de Órdenes/Historial: altura dinámica (la inline usaba 100vh-285px y
   quedaba minúscula en móvil con la toolbar inferior).
   El alto en ESCRITORIO lo gobierna ahora el layout de rejilla .marc-ws (panel
   inferior redimensionable). En móvil lo gobierna el bloque "RESPONSIVE ALTO". */
@media (max-width: 768px){
  #myGridorders, #myGridhistory{ height: calc(100dvh - 175px) !important; }
  /* Calendario: ocupar el ancho y casi todo el alto disponible en móvil */
  .marc-cal{ max-width: 100%; }
  .marc-cal__list{ max-height: calc(100dvh - 150px); }
  /* El detalle del evento puede crecer un poco más con texto de descripción */
  .marc-cal__row.cal-open .marc-cal__detail{ max-height: 460px; }
}
/* Móvil estrecho: compactar la cabecera sin perder el icono de cuenta ni la
   búsqueda (los datos siguen en el desplegable de perfil). */
@media (max-width: 575.98px){
  header.topbar .nav-link.cursor-pointer h3{ font-size: .74rem !important; }
  header.topbar .nav-link.cursor-pointer h3:nth-of-type(1){ font-size: .5rem !important; }
  header.topbar #drop1 .ti-user-circle{ font-size: 1.35rem; }
}
/* Toolbar inferior: que entren los 5 ítems en pantallas muy estrechas */
@media (max-width: 360px){
  #toolbarresponsivebottom span{ font-size: .62rem; letter-spacing: 0; } /* MARC: subido de .56 -> .62rem (legibilidad) */
  #toolbarresponsivebottom .fs-9{ font-size: .95rem !important; }
  /* CTAs del topbar (Depósito / Verify) compactos en pantallas muy estrechas para no desbordar */
  .marc-top-ctas{ gap: 4px !important; }
  .marc-top-cta, .marc-top-chip{ padding: 5px 8px !important; }
}

/* ============================================================================
   MARC (2026-06-28): pulido TÁCTIL del watchlist (≤768px, sin :hover).
   - La fila de acciones (Símbolo / Nueva orden / GRÁFICO) por defecto solo se
     revela con :hover (max-height:0; opacity:0) -> en móvil NO existe hover y el
     botón "Gráfico" quedaba inaccesible. Aquí se muestra SIEMPRE en táctil.
   - Tarjetas algo más compactas en pantallas estrechas (<450px) para que el
     título y los precios no se recorten con puntos suspensivos.
   ============================================================================ */
@media (max-width: 768px){
  /* Acciones SIEMPRE visibles en táctil (incluye el botón Gráfico) */
  .marc-qc-actions{ max-height: 64px !important; opacity: 1 !important; margin-top: 8px !important; overflow: visible; }
  .marc-qc-act{ padding: 8px 2px; }            /* objetivo táctil un poco más alto */
}
@media (max-width: 450px){
  .marc-quote-card{ padding: 8px 8px 6px; }
  .marc-qc-title{ font-size: .85rem; padding-right: 14px; }
  .marc-qc-price{ font-size: 1rem; }
  .marc-qc-side{ padding: 5px 6px; }
}

@media (max-width: 991.98px){
  #offcanvasExample .tab-content > #home{ max-width: 100%; }
}
/* MARC: el mini-chart del ticket SÍ se muestra (antes oculto estilo ActivTrader).
   Tamaño definido arriba: 200px (#iframedatatradeoffcanvas base) / 300px en media query.
   Se ve al cargar datachartsv8 -> graphloaded('y') le quita el fade u-hiddeniframe. */
/* #iframedatatradeoffcanvas{ display: none !important; }  -- regla retirada (mini-chart visible) */
/* =====================================================================
 * FIN MARC TICKET
 * ===================================================================== */

/* =====================================================================
 * MARC CATEGORÍAS — selector tipo dropdown (Forex/Crypto/Indices/…)
 * que controla los acordeones de #crypt-tab. Se ocultan las cabeceras
 * de acordeón; el dropdown abre la categoría (dispara el fetch existente
 * webtrade_getquotesisexpanded vía click programático del botón).
 * ===================================================================== */
.marc-cat-bar{ display: flex; align-items: center; gap: 4px; padding: 6px 8px 2px; }
.marc-cat-btn{
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: none; cursor: pointer;
  color: var(--bs-body-color, #e7ecf3); font-weight: 600; font-size: .95rem;
  padding: 6px 8px; border-radius: var(--marc-radius-sm);
}
.marc-cat-btn:hover{ background: rgba(255,255,255,.05); }
:root[data-bs-theme="light"] .marc-cat-btn:hover{ background: rgba(0,0,0,.04); }
/* MARC: icono de categoria atenuado a gris neutro (deja de ser un punto azul saturado) */
.marc-cat-ic{ color: var(--bs-secondary-color, #93a0b2); font-size: 1rem; }
.marc-cat-caret{ font-size: .8rem; opacity: .5; }
.marc-cat-action{
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--bs-secondary-color, #93a0b2); text-decoration: none;
}
.marc-cat-action:first-of-type{ margin-left: auto; }
.marc-cat-action:hover{ background: rgba(255,255,255,.06); color: var(--bs-body-color, #e7ecf3); }
.marc-cat-disabled{ opacity: .45; pointer-events: none; }
.marc-cat-menu{ min-width: 264px; }
.marc-cat-menu .dropdown-item{ display: flex; align-items: center; gap: 10px; }
.marc-cat-menu .dropdown-item.active{ background: var(--marc-accent-soft); color: var(--marc-accent); }
.marc-cat-menu .dropdown-item i{ width: 18px; text-align: center; }

/* Ocultar cabeceras de acordeón de categorías (las controla el dropdown) */
#crypt-tab .accordion-header{ display: none !important; }
#crypt-tab .accordion-item{ border: none !important; background: transparent !important; margin-bottom: 0 !important; box-shadow: none !important; }
/* =====================================================================
 * FIN MARC CATEGORÍAS
 * ===================================================================== */

/* =====================================================================
 * FIN MARC ACTIVTRADER LAYER
 * ===================================================================== */

/* =====================================================================
 * MARC RESPONSIVE 100% — móvil a ancho completo
 * Garantiza que TODAS las secciones se vean al 100% de ancho en móvil, sin
 * recorte por la derecha ni huecos laterales. No altera el layout de PC.
 * ===================================================================== */

/* Seguridad global: nada desborda el viewport horizontalmente */
html{ max-width: 100%; overflow-x: hidden; }
body{ max-width: 100%; }

/* En móvil/tablet (sin rail lateral) el contenido y la cabecera ocupan todo
   el ancho (en PC el rail desplaza 72px; eso queda intacto, ver :1419/:1620). */
@media (max-width: 991.98px){
  .page-wrapper{ margin-left: 0 !important; }
  header.topbar{ left: 0 !important; width: 100% !important; max-width: 100% !important; }
}

@media (max-width: 768px){
  /* Contenedores principales a ancho completo, sin padding/margin que desborde */
  .body-wrapper,
  .container-fluid,
  .page-wrapper,
  .container-fluid > .row{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  /* Cada página/sección edge-to-edge al 100% */
  [data-pageis]{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* Overview: la columna del watchlist a ancho completo; la del gráfico
     (iframe oculto en móvil) se retira por completo del flujo. */
  [data-pageis="overview"] > [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  [data-pageis="overview"] .col-lg-8.col-xl-9{ display: none !important; }

  /* Tablas/grids/calendario: 100% de ancho; el scroll horizontal del contenido
     ancho queda DENTRO del componente, nunca en el body. */
  #tableyesresultspositions,
  #active-positions,
  #myGridorders,
  #myGridhistory,
  .marc-cal,
  .marc-cal__list{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #active-positions{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* El gran padding-bottom de posiciones (pensado para ≤1268 en PC, :490) sobra
     en móvil; basta con dejar hueco para la toolbar inferior (+ safe-area iOS)
     para que la última posición no quede tapada. */
  #tableyesresultspositions{
    padding-bottom: calc(var(--marc-bottombar-h, 66px) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* =====================================================================
 * MARC RESPONSIVE ALTO — ajustar al alto disponible menos el menú inferior
 * El usuario reportaba un hueco vacío abajo en iPhone. En móvil la cabecera
 * (≈71px) es fija y la toolbar (≈66px) es fija abajo; cada zona scrolleable
 * debe llenar EXACTAMENTE desde su tope hasta justo encima de la toolbar
 * (+ safe-area del home indicator de iOS), sin hueco ni solape.
 * ===================================================================== */
:root{ --marc-bottombar-h: 66px; }

@media (max-width: 768px){
  /* Reservar exactamente la altura de la toolbar (incl. safe-area iOS) */
  body{ margin-bottom: calc(var(--marc-bottombar-h) + env(safe-area-inset-bottom, 0px)) !important; }
  /* Subir los botones de la toolbar por encima del home indicator iOS */
  #toolbarresponsivebottom{ padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Markets/watchlist: la lista llena hasta la toolbar (antes dejaba ~120px de hueco) */
  #crypt-tab .accordion-collapse{
    max-height: calc(100dvh - 116px - var(--marc-bottombar-h) - env(safe-area-inset-bottom, 0px)) !important;
  }
  /* MARC: lista plana cross-market en móvil (mismo alto que la categoría) */
  #crypt-tab > .marc-flatlist{
    max-height: calc(100dvh - 116px - var(--marc-bottombar-h) - env(safe-area-inset-bottom, 0px));
  }
  /* Órdenes / Historial: el grid llena el alto disponible sin solapar la toolbar */
  #myGridorders, #myGridhistory{
    height: calc(100dvh - 122px - var(--marc-bottombar-h) - env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Calendario: la lista llena el alto disponible sin tapar la última fila */
  .marc-cal__list{
    max-height: calc(100dvh - 118px - var(--marc-bottombar-h) - env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* =====================================================================
 * MARC CALENDAR FULLPAGE — el calendario se ve como PÁGINA COMPLETA
 * (100% de ancho y alto) superpuesta SOBRE la sección principal, en PC y
 * móvil. Se abre desde el rail (PC) / toolbar inferior (móvil); al elegir
 * otra sección, loadmodule le re-añade .u-hiddenpage y el overlay desaparece.
 * Deja visibles la cabecera (≈71px), el rail (PC) y la toolbar (móvil) para
 * poder navegar/cerrar.
 * ===================================================================== */
[data-pageis="calendar"]:not(.u-hiddenpage){
  position: fixed !important;
  top: 40px !important;                 /* bajo la cabecera fija */
  left: 0; right: 0; bottom: 0;
  width: auto !important;     /* el ancho lo definen left/right */
  max-width: none !important;
  z-index: 8;
  display: flex !important;
  flex-direction: column;
  background: var(--bs-body-bg);
  padding: 10px 14px !important;
  margin: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
}
@media (min-width: 992px){
  /* a la derecha del rail lateral (que sigue visible para navegar) */
  [data-pageis="calendar"]:not(.u-hiddenpage){ left: var(--marc-rail-w, 72px); }
}
@media (max-width: 768px){
  /* deja sitio a la toolbar inferior (+ safe-area iOS) para cambiar de sección */
  [data-pageis="calendar"]:not(.u-hiddenpage){
    bottom: calc(var(--marc-bottombar-h, 66px) + env(safe-area-inset-bottom, 0px));
  }
  #toolbarresponsivebottom{ z-index: 1046; }   /* siempre por encima del overlay */
}
/* h3 fijo arriba; el resto (lista) llena el alto al 100% */
[data-pageis="calendar"]:not(.u-hiddenpage) > h3{ flex: 0 0 auto; margin: 0 0 8px !important; }
[data-pageis="calendar"]:not(.u-hiddenpage) .marc-cal{
  flex: 1 1 auto; min-height: 0;
  width: 100% !important; max-width: 100% !important; margin: 0 !important;
  display: flex; flex-direction: column;
}
[data-pageis="calendar"]:not(.u-hiddenpage) .marc-cal__list{
  flex: 1 1 auto; min-height: 0;
  height: auto !important; max-height: none !important;
  overflow-y: auto;
}

/* Menú inferior: mantener las etiquetas en mayúsculas aunque se traduzcan
   (p.ej. idi('Calendar') -> "Calendario" se muestra como "CALENDARIO"). */
#toolbarresponsivebottom span{ text-transform: uppercase; }

/* =====================================================================
 * MARC FUSION (2026-06-28): el login SÍ se muestra cuando NO hay sesion.
 * Se ELIMINO el viejo `.global-login{ display:none !important }` (kill rule
 * que lo ocultaba siempre). La visibilidad la controla ahora cabinetfusion.css
 * via aria-hidden: oculto por .u-hidden / body.bodylogeado ; visible con
 * aria-hidden="false" (lo pone showlogin()/badlogin en s7.marcx.js).
 * ===================================================================== */

/* =====================================================================
 * MARC WORKSPACE — layout escritorio tipo ActivTrader
 *  ┌──────────┬┬───────────────────────┐
 *  │ WATCHLIST ││  GRÁFICO (1fr)        │
 *  │ (overview)││┄┄ divisor + chevron ┄┄│ ← arrastrar = alto panel
 *  │ alto 100% ││  PANEL: tabs + grid   │
 *  └──────────┴┴───────────────────────┘
 *   ↑ ancho --marc-list-w   ↑ divisor vertical (arrastrar = ancho lista)
 * Dos divisores de 2px que se iluminan al pasar el ratón; chevron contrae el
 * panel dejando solo las tabs. En móvil (≤768) NO aplica: layout apilado.
 * ===================================================================== */
@media (min-width: 769px){
  .marc-ws{
    display: grid;
    height: calc(100dvh - 40px);                 /* fila completa hasta abajo: la cabecera fija ocupa 40px (.body-wrapper padding-top); antes 71px dejaba ~31px de hueco abajo */
    grid-template-columns: var(--marc-list-w, 320px) 6px minmax(0, 1fr);
    grid-template-rows: minmax(120px, 1fr) 6px var(--marc-bottom-h, 300px);
    grid-template-areas:
      "list vdiv chart"
      "list vdiv hdiv"
      "list vdiv bottom";
    gap: 0;
    transition: grid-template-columns .2s var(--marc-ease), grid-template-rows .2s var(--marc-ease);
  }
  .marc-ws.marc-bottom-collapsed{
    grid-template-rows: minmax(120px, 1fr) 6px var(--marc-tabbar-h, 42px);
  }
  /* Lista minimizada: la columna se va a 0 y se oculta su contenido */
  .marc-ws.marc-list-collapsed{
    grid-template-columns: 0 6px minmax(0, 1fr);
  }
  .marc-ws.marc-list-collapsed .marc-ws__list{ display: none !important; }

  /* LISTA (watchlist) a altura completa; los símbolos llenan y scrollean */
  .marc-ws__list{ grid-area: list; min-width: 0; min-height: 0; overflow: visible;
    display: none; flex-direction: column; max-height: calc(100% - 5px); }
  .marc-ws__list:not(.u-hiddenpage){ display: flex; }
  .marc-ws__list .marc-cat-bar,
  .marc-ws__list .marc-watchfilter{ flex: 0 0 auto; }
  /* #crypt-tab es una columna flex: el contenido visible (la categoría abierta o
     la lista plana) CRECE para llenar exactamente el alto restante de la columna.
     Antes se usaba un `max-height: calc(100dvh - 117px)` fijo: el 117px (topbar +
     cat-bar + filtros) se quedaba corto, así que el scroll se salía POR DEBAJO de
     la página; y se rompía si los chips de filtro saltaban de línea. Con flex el
     alto lo da el layout real, no un número mágico. */
  .marc-ws__list #crypt-tab{ flex: 1 1 auto; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; }
  /* Las cabeceras de acordeón están ocultas (#crypt-tab .accordion-header) y solo
     hay UNA categoría abierta a la vez; disolvemos el .accordion-item con
     display:contents para que su .accordion-collapse sea hijo flex directo y pueda
     crecer. (En modo lista plana el JS pone los items a display:none por estilo
     inline, que gana a esto, y se muestra #marcFlatList en su lugar.) */
  .marc-ws__list #crypt-tab > .accordion-item{ display: contents; }
  /* La categoría abierta (simplebar) llena la columna y scrollea dentro. El alto
     definido se lo da el flex del padre; simplebar mide ese alto para el scroll. */
  .marc-ws__list #crypt-tab .accordion-collapse.show{
    flex: 1 1 auto; min-height: 0; max-height: none !important; height: auto !important; }
  /* MARC: vista plana cross-market (Favoritos/Mercados abiertos/Listas) = un solo
     scroll que llena la columna igual que la categoría abierta. */
  .marc-ws__list #crypt-tab > .marc-flatlist{ flex: 1 1 auto; min-height: 0; max-height: none; }

  /* GRÁFICO llena su celda */
  .marc-ws__chart{ grid-area: chart; min-width: 0; min-height: 0; overflow: hidden; box-sizing: border-box; padding-top: 20px; max-height: calc(100% - 25px); }
  .marc-ws__chart #iframedatatrade{ width: 100%; height: 100%;
    min-height: 0 !important; max-height: none !important; display: block; }

  /* PANEL INFERIOR: tabs fijas arriba + sección activa que llena y scrollea */
  .marc-ws__bottom{ grid-area: bottom; min-width: 0; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden; }
  .marc-ws__bottom > .nav{ flex: 0 0 auto; }
  .marc-ws__bottom > [data-pageis]:not(.u-hiddenpage),
  .marc-ws__bottom > [data-pageis].uhiddenvisibleresponsive{
    flex: 1 1 auto; min-height: 0; overflow: auto;
  }
  /* AG-Grid necesita alto explícito: que llene la sección del panel */
  #myGridorders, #myGridhistory{ height: 100% !important; min-height: 0; }

  /* DIVISORES de 2px (hit-area 6px) que se iluminan en hover/arrastre */
  .marc-ws__vdiv{ grid-area: vdiv; position: relative; cursor: default; z-index: 6; }
  .marc-ws__hdiv{ grid-area: hdiv; position: relative; cursor: row-resize; z-index: 6; }
  .marc-ws__vdiv::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 2px; transform: translateX(-50%); background: var(--marc-border);
    transition: background .15s var(--marc-ease), box-shadow .15s var(--marc-ease); }
  .marc-ws__hdiv::before{ content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 2px; transform: translateY(-50%); background: var(--marc-border);
    transition: background .15s var(--marc-ease), box-shadow .15s var(--marc-ease); }
  .marc-ws__hdiv:hover::before,
  .marc-ws--dragging .marc-ws__hdiv::before{
    background: var(--marc-accent); box-shadow: 0 0 6px var(--marc-accent); }

  /* CHEVRON contraer/expandir, centrado sobre el divisor horizontal */
  .marc-ws__toggle{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 46px; height: 16px; padding: 0; border-radius: 8px; z-index: 7;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--marc-surface-2, #1f2836); border: 1px solid var(--marc-border);
    color: var(--bs-body-color, #e7ecf3); line-height: 1; }
  .marc-ws__toggle:hover{ color: var(--marc-accent); border-color: var(--marc-accent); }
  .marc-ws__toggle i{ font-size: 14px; transition: transform .15s var(--marc-ease); }
  .marc-bottom-collapsed .marc-ws__hdiv .marc-ws__toggle i{ transform: rotate(180deg); }
  /* Variante vertical del chevron: minimizar / expandir la lista de símbolos */
  .marc-ws__toggle--v{ width: 16px; height: 46px; }
  .marc-list-collapsed .marc-ws__toggle--v i{ transform: rotate(180deg); }

  /* Scroll bonito (simplebar) en la lista — el default del tema es rgba(0,0,0,.5),
     poco visible en oscuro; lo hacemos más limpio y algo más ancho. */
  .marc-ws .simplebar-track.simplebar-vertical{ width: 9px; }
  .marc-ws .simplebar-scrollbar:before{ background: var(--marc-border-strong, #5a6675) !important; border-radius: 6px; }
  .marc-ws .simplebar-scrollbar.simplebar-visible:before{ opacity: .7; }
  /* Mantener el scrollbar de simplebar visible MIENTRAS el ratón está sobre el
     área de scroll (por defecto simplebar lo auto-oculta tras ~1s). */
  .marc-ws [data-simplebar]:hover .simplebar-scrollbar:before{
    opacity: .8 !important; transition-delay: 0s !important; transition-duration: .1s !important;
  }

  /* MARC: doble scrollbar + sobre-scroll en la lista. Causa: .accordion-collapse.show lleva
     height:auto (~2763) y .simplebar-wrapper usa height:inherit -> hereda 'auto' y CRECE más alto que
     el root (que el flex limita a la altura de la columna). El root desborda y, con overflow-x:hidden
     (coacciona overflow-y a 'auto') + .accordion-collapse::-webkit-scrollbar (9px, ~1242), aparece una
     barra NATIVA además de la de SimpleBar y se puede "sobre-scrollear" el root por debajo del final.
     Fix: que la estructura de SimpleBar respete la altura del root (100% de la columna flex) -> el root
     NO desborda (sin scroll nativo) y el scroll vive SOLO en .simplebar-content-wrapper (barra custom).
     NO se toca el overflow del root (ponerlo hidden desactiva SimpleBar). */
  .marc-ws__list #crypt-tab .accordion-collapse.show > .simplebar-wrapper{ height: 100% !important; max-height: 100% !important; }
  /* Cinturón y tirantes: ocultar cualquier barra nativa residual del root. */
  .marc-ws__list #crypt-tab .accordion-collapse{ scrollbar-width: none; -ms-overflow-style: none; }
  .marc-ws__list #crypt-tab .accordion-collapse::-webkit-scrollbar{ width: 0 !important; height: 0 !important; display: none !important; }

  /* Scrollbar bonito (CSS) en el panel inferior: Positions + grids AG-Grid (que
     no admiten el script simplebar). Mismo look que simplebar; las barras nativas
     son siempre visibles cuando hay overflow. Acotado a .marc-ws__bottom para no
     tocar la watchlist (simplebar) y evitar doble barra. */
  .marc-ws__bottom{ scrollbar-width: thin; scrollbar-color: var(--marc-border-strong, #5a6675) transparent; }
  .marc-ws__bottom ::-webkit-scrollbar{ width: 9px; height: 9px; }
  .marc-ws__bottom ::-webkit-scrollbar-track{ background: transparent; }
  .marc-ws__bottom ::-webkit-scrollbar-thumb{ background: var(--marc-border-strong, #5a6675);
    border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
  .marc-ws__bottom ::-webkit-scrollbar-thumb:hover{ background: var(--marc-accent); background-clip: content-box; }

  /* mientras se arrastra: sin transición (evita lag), sin selección ni eventos del iframe */
  .marc-ws--dragging{ user-select: none; transition: none !important; }
  .marc-ws--dragging .marc-ws__chart{ pointer-events: none; }
}

/* Móvil/tablet estrecho: layout apilado de siempre (sin rejilla ni divisores) */
@media (max-width: 768px){
  .marc-ws__chart, .marc-ws__vdiv, .marc-ws__hdiv{ display: none !important; }
  .marc-ws__bottom{ display: contents; }   /* las secciones vuelven al flujo normal */
}

/* MARC: en móvil el botón "Gráfico" abre el chart a PANTALLA COMPLETA por encima de todo, hasta pulsar la X */
.marc-chart-fs-x{ display:none; }
@media (max-width: 768px){
  .marc-ws__chart.marc-chart-fs-open{
    display:block !important; position:fixed; inset:0; z-index:4000;
    width:100vw; height:100dvh; max-height:none; padding:0; margin:0;
    background:var(--bs-body-bg);
  }
  .marc-ws__chart.marc-chart-fs-open #iframedatatrade{
    width:100% !important; height:100% !important; max-height:none !important; min-height:0 !important;
    display:block !important; opacity:1 !important; visibility:visible !important;
  }
  .marc-ws__chart.marc-chart-fs-open .marc-chart-fs-x{
    display:flex; position:fixed; top:10px; right:12px; z-index:4002;
    width:38px; height:38px; align-items:center; justify-content:center;
    border:none; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; cursor:pointer;
  }
  .marc-chart-fs-x i{ font-size:20px; }
  body.marc-chart-fs-on #toolbarresponsivebottom{ display:none !important; }
  /* MARC (2026-06-28): el offcanvas de ticket/símbolo (#offcanvasExample, z-index 1045) quedaba TAPADO
     por la barra inferior (z-index 1046) en móvil -> al abrir el offcanvas, ocultamos la barra. */
  body:has(#offcanvasExample.show) #toolbarresponsivebottom{ display:none !important; }
}
/* =====================================================================
 * MARC WATCHLIST — buscador a la izquierda + filtros (favoritos / abiertos)
 * ===================================================================== */
/* Ancla para el panel de búsqueda overlay */
.marc-ws__list{ position: relative; }
/* MARC: overview (watchlist) con un respiro arriba */
[data-pageis="overview"]{ padding-top: 20px; }

/* Chips de filtro bajo la barra de categorías */
.marc-watchfilter{ display: flex; gap: 6px; padding: 2px 8px 6px; flex-wrap: wrap; }
.marc-watchfilter button{
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 600; line-height: 1; cursor: pointer;
  padding: 5px 10px; border-radius: 999px;
  background: transparent; color: var(--bs-secondary-color, #93a0b2);
  border: 1px solid var(--marc-border);
  transition: background-color .15s var(--marc-ease), color .15s var(--marc-ease), border-color .15s var(--marc-ease);
}
.marc-watchfilter button:hover{ color: var(--bs-body-color, #e7ecf3); }
/* MARC: pill de filtro ACTIVO sin azul — se neutraliza a superficie/borde grises;
   sigue leyendose "activa" por el contraste de relleno+borde frente a las inactivas. */
.marc-watchfilter button.active{
  color: var(--bs-body-color, #e7ecf3); border-color: var(--bs-secondary-color, #93a0b2); background: var(--marc-surface-3, rgba(255,255,255,0.05));
}
.marc-watchfilter button i{ font-size: .85rem; }

/* Tarjeta oculta por el filtro */
.marc-qc-hidden{ display: none !important; }

/* Panel de búsqueda overlay (sobre la columna de la lista) */
#marcSearchPanel{
  position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column;
  background: var(--bs-body-bg);
}
#marcSearchPanel.is-open{ display: flex; }
.marc-search__head{
  display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px;
  border-bottom: 1px solid var(--marc-border);
}
.marc-search__ic{ color: var(--marc-accent); font-size: 1.05rem; flex: 0 0 auto; }
.marc-search__head input{
  flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--bs-body-color, #e7ecf3); font-size: 1rem; padding: 4px 0;
}
.marc-search__close{
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: var(--bs-secondary-color, #93a0b2);
  display: flex; align-items: center; justify-content: center;
}
.marc-search__close:hover{ background: rgba(255,255,255,.06); color: var(--bs-body-color, #e7ecf3); }
.marc-search__results{ flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: 6px; list-style: none;
  scrollbar-width: thin; scrollbar-color: var(--marc-border-strong, #5a6675) transparent; }
.marc-search__results::-webkit-scrollbar{ width: 9px; }
.marc-search__results::-webkit-scrollbar-thumb{ background: var(--marc-border-strong, #5a6675); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.marc-search__results li{ border-radius: var(--marc-radius-sm, 8px); }
.marc-search__results a{ display: block; padding: 8px 10px; text-decoration: none;
  color: var(--bs-body-color, #e7ecf3); border-radius: var(--marc-radius-sm, 8px); }
.marc-search__results a:hover{ background: var(--marc-surface-1); }
.marc-search__results .text-muted{ font-size: .78rem; }

/* Móvil: el panel ocupa el área disponible (bajo cabecera, sobre toolbar) */
@media (max-width: 768px){
  #marcSearchPanel{ position: fixed; inset: auto; top: 71px; left: 0; right: 0;
    bottom: calc(var(--marc-bottombar-h, 66px) + env(safe-area-inset-bottom, 0px)); z-index: 1002; }
}

/* =====================================================================
 * MARC WATCHLIST FASE 2 — heatmap + listas + buscador agrupado por tipo
 * ===================================================================== */

/* (Heatmap retirado a petición del usuario; sustituido por barra de sentimiento) */

/* --- Sentimiento compra/venta por símbolo (en la tarjeta) --- */
.marc-qc-sent{ display: flex; align-items: center; gap: 8px; padding: 5px 8px 3px; }
.marc-qc-sent .ms-sell, .marc-qc-sent .ms-buy{ font-size: .64rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 34px; letter-spacing: .01em; }
.marc-qc-sent .ms-sell{ color: var(--marc-sell, #ef5350); text-align: left; }
.marc-qc-sent .ms-buy{ color: var(--marc-buy, #26a69a); text-align: right; }
.marc-qc-sent .ms-sell::before{ content: "\25BE "; font-size: .62em; vertical-align: 1px; } /* ▾ venta */
.marc-qc-sent .ms-buy::after{ content: " \25B4"; font-size: .62em; vertical-align: 1px; }  /* ▴ compra */
/* Medidor estilo ecualizador: venta (rojo, izq) -> compra (verde, der) con cruce marcado */
.ms-bar{ position: relative; flex: 1 1 auto; display: flex; height: 11px; border-radius: 3px; overflow: hidden;
  background: rgba(127,127,127,.14); box-shadow: inset 0 0 0 1px rgba(127,127,127,.10); }
.ms-bar__sell{ height: 100%; background: linear-gradient(90deg, rgba(239,83,80,.45), var(--marc-sell, #ef5350)); transition: width .45s var(--marc-ease); }
.ms-bar__buy{ height: 100%; background: linear-gradient(90deg, var(--marc-buy, #26a69a), rgba(38,166,154,.45)); transition: width .45s var(--marc-ease);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.6); } /* marca el cruce venta|compra */
.ms-bar::after{ content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0 1.5px, transparent 1.5px 5px); } /* ticks */
.marc-qc-sent.is-nodata{ opacity: .4; }
/* Etiquetas Sell/Buy del sentimiento (tarjeta) — dejan claro qué lado es cada uno */
.marc-qc-sent .ms-side{ display: flex; align-items: baseline; gap: 4px; flex: 0 0 auto; }
.marc-qc-sent .ms-side--buy{ justify-content: flex-end; }
.marc-qc-sent .ms-word{ font-size: .54rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.marc-qc-sent .ms-side--sell .ms-word{ color: var(--marc-sell, #ef5350); }
.marc-qc-sent .ms-side--buy  .ms-word{ color: var(--marc-buy, #26a69a); }

/* --- Sentimiento del mercado (offcanvas) --- */
.marc-sentiment__row{ display: flex; align-items: center; gap: 8px; }
.marc-sentiment__row .ms-sell, .marc-sentiment__row .ms-buy{ font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 34px; }
.marc-sentiment__row .ms-sell{ color: var(--marc-sell, #ef5350); }
.marc-sentiment__row .ms-buy{ color: var(--marc-buy, #26a69a); text-align: right; }
.marc-sentiment__row .ms-sell::before{ content: "\25BE "; font-size: .62em; vertical-align: 1px; }
.marc-sentiment__row .ms-buy::after{ content: " \25B4"; font-size: .62em; vertical-align: 1px; }
.marc-sentiment .marc-sentiment__bar{ position: relative; flex: 1 1 auto; opacity: 1; height: 12px; border-radius: 3px; overflow: hidden;
  background: rgba(127,127,127,.14); }
.marc-sentiment .marc-sentiment__bar .s-sell{ background: linear-gradient(90deg, rgba(239,83,80,.45), var(--marc-sell, #ef5350)); transition: width .45s var(--marc-ease); }
.marc-sentiment .marc-sentiment__bar .s-buy{ background: linear-gradient(90deg, var(--marc-buy, #26a69a), rgba(38,166,154,.45)); transition: width .45s var(--marc-ease);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.6); }
.marc-sentiment .marc-sentiment__bar::after{ content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0 1.5px, transparent 1.5px 6px); }
.marc-sentiment.is-nodata{ opacity: .45; }
/* Etiquetas Sell/Buy del sentimiento (offcanvas) */
.marc-sentiment__row .ms-side{ display: flex; align-items: baseline; gap: 5px; flex: 0 0 auto; }
.marc-sentiment__row .ms-side--buy{ justify-content: flex-end; }
.marc-sentiment__row .ms-word{ font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.marc-sentiment__row .ms-side--sell .ms-word{ color: var(--marc-sell, #ef5350); }
.marc-sentiment__row .ms-side--buy  .ms-word{ color: var(--marc-buy, #26a69a); }

/* Botón "añadir a lista": 4ª acción de la tarjeta (misma fila revelada al hover que Symbol/New Order/Chart) */
.marc-qc-list:hover{ border-color: var(--marc-border-strong); color: var(--marc-accent); background: var(--marc-surface-2); }

/* Popover de listas (por símbolo) */
.marc-listpop{ position: fixed; z-index: 3000; width: 220px; max-height: 320px; overflow: auto;
  background: var(--marc-surface-2, #1f2836); border: 1px solid var(--marc-border); border-radius: var(--marc-radius, 10px);
  box-shadow: var(--marc-shadow, 0 10px 30px -10px rgba(0,0,0,.6)); padding: 6px; }
.marc-listpop__title{ font-weight: 800; font-size: .78rem; padding: 4px 6px 6px; opacity: .8; }
.marc-listpop__item{ display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer; color: var(--bs-body-color, #e7ecf3); padding: 6px; border-radius: 6px; font-size: .85rem; }
.marc-listpop__item:hover{ background: var(--marc-surface-1); }
.marc-listpop__item i{ font-size: 1rem; color: var(--marc-accent); }
.marc-listpop__empty{ font-size: .8rem; opacity: .6; padding: 4px 6px; }
.marc-listpop__new{ display: flex; gap: 4px; margin-top: 6px; border-top: 1px solid var(--marc-border); padding-top: 6px; }
.marc-listpop__new input{ flex: 1 1 auto; min-width: 0; background: var(--marc-surface-1); border: 1px solid var(--marc-border); border-radius: 6px; color: var(--bs-body-color, #e7ecf3); padding: 4px 6px; font-size: .82rem; }
.marc-listpop__add{ flex: 0 0 auto; border: none; border-radius: 6px; background: var(--marc-accent); color: #fff; cursor: pointer; padding: 0 8px; }

/* Desplegable: "Solo favoritos" + filas de listas */
#marcFavOnlyItem .marc-fav-check{ visibility: hidden; color: var(--marc-accent); }
#marcFavOnlyItem.is-on .marc-fav-check{ visibility: visible; }
#marcFavOnlyItem.is-on{ color: var(--marc-accent); }
.marc-list-row{ display: flex; align-items: center; }
.marc-list-row .marc-list-pick{ flex: 1 1 auto; text-align: left; background: transparent; border: none; cursor: pointer; color: var(--bs-body-color, #e7ecf3); padding: 6px 16px; font-size: .88rem; }
.marc-list-row .marc-list-pick:hover{ background: var(--marc-surface-1); }
.marc-list-row.is-active .marc-list-pick{ color: var(--marc-accent); }
.marc-list-row .marc-list-del{ flex: 0 0 auto; background: transparent; border: none; cursor: pointer; color: var(--bs-secondary-color, #93a0b2); padding: 6px 10px; }
.marc-list-row .marc-list-del:hover{ color: var(--marc-sell, #ef5350); }

/* Cabeceras de grupo en el buscador */
.marc-search__group{ position: sticky; top: 0; z-index: 1; background: var(--bs-body-bg);
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--marc-accent); padding: 8px 10px 4px; list-style: none; }


/* ===== MARC POSITIONS REDESIGN (drop-in override layer) ===== */
/* Appended last. CSS-only. Keeps the JS-owned table model
   (.positions-content=table, .position-row=table-row,
   .position-cell=table-cell). Chevron rotation is JS-inline and is
   NEVER touched by CSS here. Profit colors are deferred to the
   JS-applied .text-success/.text-danger classes. !important is used
   on exactly the properties the dated rules also lock. Both themes
   supported. Numerics use tabular figures. */

/* -------------------------------------------------------------
   Theme-scoped locals so dark/light share one ruleset
   ------------------------------------------------------------- */
:root[data-bs-theme="dark"]{
  --pos-card-bg: var(--marc-surface-1, #1b2434);
  --pos-scroll-bg: var(--marc-surface-1, #1b2434);
  --pos-zebra: rgba(255,255,255,0.018);
  --pos-hover: rgba(41,98,255,0.10);
  --pos-symbol: #cdd5e0;
  --pos-cell-fg: var(--bs-body-color, #d7dde7);
  --pos-muted: var(--bs-secondary-color, #93a0b2);
  --pos-hairline: var(--marc-border, rgba(255,255,255,0.08));
  --pos-hairline-strong: var(--marc-border-strong, rgba(255,255,255,0.14));
  --pos-label-bg: rgba(19,23,34,0.86);
  --pos-label-bg-solid: #131722;
  --pos-header-grad: linear-gradient(180deg, var(--marc-surface-2,#212c3e) 0%, var(--marc-surface-1,#1b2434) 100%);
  --pos-header-grad-active: linear-gradient(180deg, rgba(148,163,184,0.12) 0%, var(--marc-surface-1,#1b2434) 92%);
}
:root[data-bs-theme="light"]{
  --pos-card-bg: var(--marc-surface-1, #f4f6fa);
  --pos-scroll-bg: var(--marc-surface-1, #f4f6fa);
  --pos-zebra: rgba(17,24,39,0.022);
  --pos-hover: rgba(41,98,255,0.07);
  --pos-symbol: #1f2937;
  --pos-cell-fg: var(--bs-body-color, #1d2533);
  --pos-muted: var(--bs-secondary-color, #5b6675);
  --pos-hairline: var(--marc-border, rgba(0,0,0,0.08));
  --pos-hairline-strong: var(--marc-border-strong, rgba(0,0,0,0.14));
  --pos-label-bg: rgba(255,255,255,0.86);
  --pos-label-bg-solid: var(--bs-body-bg, #ffffff);
  --pos-header-grad: linear-gradient(180deg, var(--marc-surface-2,#eef1f6) 0%, var(--marc-surface-1,#f4f6fa) 100%);
  --pos-header-grad-active: linear-gradient(180deg, rgba(71,85,105,0.10) 0%, var(--marc-surface-1,#f4f6fa) 92%);
}

/* -------------------------------------------------------------
   Outer shell: flat, airy, no heavy shadow box.
   (NOTE: display:flex here is on the WRAPPER only — JS sets
    display:table on .positions-content, not on this element, so
    the table model is untouched. No overflow:hidden anywhere on
    ancestors, so the sticky label row keeps working.)
   ------------------------------------------------------------- */
#active-positions{ scrollbar-width: thin; }
#active-positions .positions-table{
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 2px !important;
  border-radius: var(--marc-radius-lg, 16px) !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* -------------------------------------------------------------
   Each ticker group = a soft rounded card with hierarchy.
   No overflow:hidden — that would kill the sticky label row.
   ------------------------------------------------------------- */
#active-positions .ticker-row{
  background: var(--pos-card-bg);
  border: 1px solid var(--pos-hairline);
  border-radius: var(--marc-radius-lg, 16px);
  box-shadow: var(--marc-shadow-sm, 0 1px 2px rgba(0,0,0,.18));
  transition: box-shadow .2s var(--marc-ease, cubic-bezier(.22,.61,.36,1)),
              border-color .2s var(--marc-ease, cubic-bezier(.22,.61,.36,1));
}
#active-positions .ticker-row:hover{
  border-color: var(--pos-hairline-strong);
  box-shadow: var(--marc-shadow, 0 6px 18px rgba(0,0,0,.22));
}

/* -------------------------------------------------------------
   Ticker group header — stays flex (constraint #7).
   Gradient surface, accent symbol, 4px accent left-edge bar on
   the active/open header.
   ------------------------------------------------------------- */
#active-positions .ticker-header{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative;
  padding: 13px 16px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-top-left-radius: var(--marc-radius-lg, 16px);
  border-top-right-radius: var(--marc-radius-lg, 16px);
  background: var(--pos-header-grad) !important;
  cursor: pointer;
  transition: background .2s var(--marc-ease, cubic-bezier(.22,.61,.36,1)),
              border-color .2s var(--marc-ease, cubic-bezier(.22,.61,.36,1));
}
#active-positions .ticker-header.active{
  border-bottom-color: var(--pos-hairline) !important;
  background: var(--pos-header-grad-active) !important;
}
#active-positions .ticker-header.active::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--pos-muted);
}
/* Symbol label: accent-led emphasis */
#active-positions .ticker-header > span:first-child{
  color: var(--pos-cell-fg);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
}
#active-positions .ticker-header.active > span:first-child{
  color: var(--pos-symbol);
}

/* Header group P/L value — keep .tomoney flex helper intact.
   Respect JS .text-success/.text-danger (mapped to tokens below). */
#active-positions .ticker-header .total-value.tomoney{
  flex: 1;
  text-align: right;
  margin-right: 18px !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .01em;
}
#active-positions .ticker-header .total-value.text-success{ color: var(--marc-buy, #26a69a) !important; }
#active-positions .ticker-header .total-value.text-danger { color: var(--marc-sell, #ef5350) !important; }

/* -------------------------------------------------------------
   Chevron: rotation is JS-inline — DO NOT set a CSS transform.
   Only restyle the container into a circular accent chip.
   ------------------------------------------------------------- */
#active-positions .ticker-header .toggle-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--pos-muted);
  background: var(--marc-surface-3, rgba(255,255,255,0.05));
  transition: color .18s var(--marc-ease, cubic-bezier(.22,.61,.36,1)),
              background .18s var(--marc-ease, cubic-bezier(.22,.61,.36,1));
}
#active-positions .ticker-header.active .toggle-icon,
#active-positions .ticker-header:hover .toggle-icon{
  color: var(--pos-symbol);
  background: var(--pos-hairline-strong);
}
#active-positions .ticker-header .toggle-icon i{ font-size: .8rem; line-height: 1; }

/* Scroll area background to match the card */
#active-positions .tickerstotsscroll{ background: var(--pos-scroll-bg); }

/* -------------------------------------------------------------
   Content surface: KILL the dated inset shadow; re-assert the
   table model (belt-and-suspenders with JS inline display:table).
   ------------------------------------------------------------- */
#active-positions .positions-content{
  display: table;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 0 var(--marc-radius-lg, 16px) var(--marc-radius-lg, 16px) !important;
  border-collapse: collapse;
  border-spacing: 0;
  padding: 2px 6px 8px !important;
}

/* -------------------------------------------------------------
   Rows: borderless; a single hairline lives on the CELLS
   (table-row borders render unreliably). Subtle zebra + quiet
   hover, also applied via cells.
   ------------------------------------------------------------- */
#active-positions .position-row{
  display: table-row;
  background: transparent !important;
  border: none !important;
  font-size: .85rem !important;
  transition: background-color .15s var(--marc-ease, cubic-bezier(.22,.61,.36,1)) !important;
}
#active-positions .position-row .position-cell{
  border-bottom: 1px solid var(--pos-hairline) !important;
}
#active-positions .position-row:last-child .position-cell{
  border-bottom: none !important;
}

/* Zebra (data rows only) */
#active-positions .position-row:not(.sinhoverrow):nth-of-type(even) .position-cell{
  background: var(--pos-zebra);
}
/* Quiet accent hover (data rows only) */
#active-positions .position-row:not(.sinhoverrow):hover .position-cell,
:root[data-bs-theme="dark"] #active-positions .position-row:not(.sinhoverrow):hover .position-cell{
  background: var(--pos-hover) !important;
}

/* -------------------------------------------------------------
   Cells: dense, high-contrast, RIGHT-ALIGNED ledger numerics
   with true lining tabular figures.
   ------------------------------------------------------------- */
#active-positions .position-cell{
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  padding: 8px 14px !important;
  font-size: .85rem !important;
  font-weight: 500;
  white-space: nowrap;
  color: var(--pos-cell-fg);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* First cell = action buttons: left-aligned, roomy, never wraps */
#active-positions .position-row .position-cell:first-child{
  text-align: left;
  padding-left: 12px !important;
  white-space: nowrap;
  min-width: 140px;
}

/* -------------------------------------------------------------
   Sticky quiet column-label row — reads as a table header.
   Pins inside the .tickerstotsscroll scroller. Solid bg fallback
   plus a backdrop blur for the modern broker signal. Sticky is
   set on the cells (reliable) as well as the row.
   ------------------------------------------------------------- */
#active-positions .position-row.sinhoverrow{
  position: sticky;
  top: 0;
  z-index: 3;
}
#active-positions .position-row.sinhoverrow .position-cell{
  position: sticky;
  top: 0;
  z-index: 3;
  text-align: right;
  font-size: .64rem !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  font-weight: 700 !important;
  color: var(--pos-muted) !important;
  padding: 8px 14px !important;
  background: var(--pos-label-bg-solid) !important;     /* solid fallback */
  background: var(--pos-label-bg) !important;            /* translucent if supported */
  border-bottom: 1px solid var(--pos-hairline-strong) !important;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
#active-positions .position-row.sinhoverrow .position-cell:first-child{
  text-align: left;
}
/* Never let the label row pick up the data-row hover tint */
#active-positions .position-row.sinhoverrow:hover .position-cell{
  background: var(--pos-label-bg-solid) !important;
  background: var(--pos-label-bg) !important;
}

/* -------------------------------------------------------------
   Profit emphasis (cell 2). Color is owned by JS
   .text-success/.text-danger — only weight/size set here.
   ------------------------------------------------------------- */
#active-positions .position-cell[id^="cell-profit-"]{
  font-weight: 800 !important;
  font-size: .9rem !important;
  letter-spacing: .005em;
}
#active-positions .position-cell.text-success{ color: var(--marc-buy, #26a69a) !important; }
#active-positions .position-cell.text-danger { color: var(--marc-sell, #ef5350) !important; }

/* -------------------------------------------------------------
   Type cell (Buy/Sell): quiet uppercase label with a leading
   accent dot. (A true inner pill needs an HTML span the
   constraints forbid, so we keep an honest dot-marker.)
   ------------------------------------------------------------- */
#active-positions .position-row:not(.sinhoverrow) .position-cell[id^="type-"]{
  text-transform: uppercase;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
}
#active-positions .position-row:not(.sinhoverrow) .position-cell[id^="type-"]::before{
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  vertical-align: 1px;
  background: var(--marc-accent, #2962ff);
  box-shadow: 0 0 0 3px var(--marc-accent-soft, rgba(41,98,255,0.16));
}

/* -------------------------------------------------------------
   ACTION BUTTONS — compact rounded pills, two-stage escalation:
   quiet at rest -> soft fill on row hover -> solid on direct
   hover/focus. Close = danger, Edit = neutral/primary.
   ------------------------------------------------------------- */
#active-positions .position-cell .btn.btn-sm{
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 0;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .01em;
  box-shadow: none !important;
  transition: background-color .16s var(--marc-ease, cubic-bezier(.22,.61,.36,1)),
              color .16s var(--marc-ease, cubic-bezier(.22,.61,.36,1)),
              border-color .16s var(--marc-ease, cubic-bezier(.22,.61,.36,1)),
              box-shadow .16s var(--marc-ease, cubic-bezier(.22,.61,.36,1)),
              transform .16s var(--marc-ease, cubic-bezier(.22,.61,.36,1)) !important;
}
#active-positions .position-cell .btn.btn-sm i,
#active-positions .position-cell .btn.btn-sm .ti{
  font-size: .9em;
  line-height: 1;
}
#active-positions .position-cell .btn.btn-outline-danger.mr-3{ margin-right: 8px !important; }

/* Resting state: quiet monochrome (overrides Bootstrap outline) */
#active-positions .position-cell .btn.btn-outline-danger,
#active-positions .position-cell .btn.btn-outline-primary{
  color: var(--pos-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  opacity: .9;
}

/* Stage 1 — row hover reveals semantic soft fills */
#active-positions .position-row:hover .btn.btn-outline-danger{
  color: var(--marc-sell, #ef5350) !important;
  background: var(--marc-sell-soft, rgba(239,83,80,0.14)) !important;
  opacity: 1;
}
#active-positions .position-row:hover .btn.btn-outline-primary{
  color: var(--pos-symbol) !important;
  background: var(--marc-accent-soft, rgba(41,98,255,0.16)) !important;
  opacity: 1;
}

/* Stage 2 — direct hover/focus: solid fill, icon-led, lift */
#active-positions .position-cell .btn.btn-outline-danger:hover,
#active-positions .position-cell .btn.btn-outline-danger:focus-visible{
  color: #fff !important;
  background: var(--marc-sell, #ef5350) !important;
  border-color: var(--marc-sell, #ef5350) !important;
  box-shadow: 0 2px 10px -3px rgba(239,83,80,.55) !important;
  transform: translateY(-1px);
}
#active-positions .position-cell .btn.btn-outline-primary:hover,
#active-positions .position-cell .btn.btn-outline-primary:focus-visible{
  color: #fff !important;
  background: var(--marc-accent, #2962ff) !important;
  border-color: var(--marc-accent, #2962ff) !important;
  box-shadow: 0 2px 10px -3px rgba(41,98,255,.55) !important;
  transform: translateY(-1px);
}

/* Semantic focus rings */
#active-positions .position-cell .btn.btn-sm:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--marc-accent-soft, rgba(41,98,255,0.16)) !important;
}
#active-positions .position-cell .btn.btn-outline-danger:focus-visible{
  box-shadow: 0 0 0 3px var(--marc-sell-soft, rgba(239,83,80,0.18)) !important;
}
#active-positions .position-cell .btn.btn-sm:active{ transform: translateY(0) scale(.97); }

/* -------------------------------------------------------------
   Light-theme refinements
   ------------------------------------------------------------- */
:root[data-bs-theme="light"] #active-positions .ticker-row{
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
}
:root[data-bs-theme="light"] #active-positions .ticker-header .toggle-icon{
  background: var(--marc-surface-3, #e6eaf1);
}
:root[data-bs-theme="light"] #active-positions .position-cell .btn.btn-outline-danger,
:root[data-bs-theme="light"] #active-positions .position-cell .btn.btn-outline-primary{
  color: var(--pos-muted) !important;
}

/* -------------------------------------------------------------
   Scrollbar: thin and quiet to match the flat look
   ------------------------------------------------------------- */
#active-positions .tickerstotsscroll.scrollbar::-webkit-scrollbar{ width: 7px; height: 7px; }
#active-positions .tickerstotsscroll.scrollbar::-webkit-scrollbar-thumb{
  background-color: var(--pos-hairline-strong);
  border-radius: 999px;
}
:root[data-bs-theme="light"] #active-positions .tickerstotsscroll.scrollbar::-webkit-scrollbar-thumb{
  background-color: rgba(0,0,0,0.18);
}

/* -------------------------------------------------------------
   Responsive: stay dense on small screens
   ------------------------------------------------------------- */
@media (max-width: 768px){
  #active-positions .position-cell{ padding: 6px 10px !important; font-size: .8rem !important; }
  #active-positions .position-row.sinhoverrow .position-cell{ padding: 6px 10px !important; }
  #active-positions .position-row .position-cell:first-child{ min-width: 0; }
  #active-positions .ticker-header{ padding: 11px 13px !important; }
}


/* ----- MARC POSITIONS REDESIGN · corner polish (no overflow:hidden, keeps sticky) ----- */
/* Collapsed ticker cards carry full rounding so each reads as one clean pill. */
#active-positions .ticker-header:not(.active){
  border-bottom-color: transparent !important;
  border-radius: var(--marc-radius-lg, 16px) !important;
}
/* Round the scroll area's bottom corners to match the card on open groups. */
#active-positions .tickerstotsscroll{
  border-radius: 0 0 var(--marc-radius-lg, 16px) var(--marc-radius-lg, 16px);
}
/* ----- end corner polish ----- */


/* ----- MARC POSITIONS REDESIGN · ajustes: tarjetas mas sutiles + Type Buy/Sell ----- */
/* Tarjetas mas sutiles: radio 12px, menos separacion, sombra/borde mas tenues */
#active-positions .positions-table{ gap: 10px; }
#active-positions .ticker-row{
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
}
:root[data-bs-theme="light"] #active-positions .ticker-row{
  box-shadow: 0 1px 1px rgba(16,24,40,.05);
}
#active-positions .ticker-row:hover{
  box-shadow: 0 3px 10px rgba(0,0,0,.16);
}
#active-positions .ticker-header{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
#active-positions .ticker-header:not(.active){
  border-radius: 12px !important;
}
#active-positions .tickerstotsscroll{
  border-radius: 0 0 12px 12px;
}
#active-positions .positions-content{
  border-radius: 0 0 12px 12px !important;
}

/* Type por direccion: Buy = verde, Sell = rojo (punto + texto). data-postype lo pone el JS. */
#active-positions .position-row:not(.sinhoverrow) .position-cell[id^="type-"][data-postype^="buy" i]{
  color: var(--marc-buy, #26a69a);
}
#active-positions .position-row:not(.sinhoverrow) .position-cell[id^="type-"][data-postype^="buy" i]::before{
  background: var(--marc-buy, #26a69a);
  box-shadow: 0 0 0 3px var(--marc-buy-soft, rgba(38,166,154,.16));
}
#active-positions .position-row:not(.sinhoverrow) .position-cell[id^="type-"][data-postype^="sell" i]{
  color: var(--marc-sell, #ef5350);
}
#active-positions .position-row:not(.sinhoverrow) .position-cell[id^="type-"][data-postype^="sell" i]::before{
  background: var(--marc-sell, #ef5350);
  box-shadow: 0 0 0 3px var(--marc-sell-soft, rgba(239,83,80,.16));
}
/* ----- end ajustes ----- */


/* ----- MARC POSITIONS: tabla continua (sin separaciones) + logo en el header ----- */
/* Sin separaciones: un solo contenedor con borde/radio exterior; los grupos se apilan
   pegados separados solo por un hairline. */
#active-positions .positions-table{
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--pos-hairline);
  border-radius: 12px;
  box-shadow: var(--marc-shadow-sm);
  overflow: hidden;
}
:root[data-bs-theme="light"] #active-positions .positions-table{
  box-shadow: 0 1px 2px rgba(16,24,40,.06);
}
#active-positions .ticker-row{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--pos-hairline) !important;
}
#active-positions .ticker-row:last-child{ border-bottom: 0 !important; }
#active-positions .ticker-row:hover{ box-shadow: none !important; border-color: var(--pos-hairline) !important; }
#active-positions .ticker-header,
#active-positions .ticker-header:not(.active){ border-radius: 0 !important; }
#active-positions .tickerstotsscroll{ border-radius: 0 !important; }
#active-positions .positions-content{ border-radius: 0 !important; }

/* Logo del ticker en el header (junto al nombre). Solo en el header, no en las filas. */
#active-positions .ticker-header > span:first-child{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#active-positions .ticker-header .marc-pos-symtext{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#active-positions .ticker-header .marc-pos-logo{
  position: relative;            /* ancla la bandera fx absoluta (.flages1) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
#active-positions .ticker-header .marc-pos-logo > div{ margin: 0 !important; }  /* neutraliza el .mx-2 de marcLogoTicker */
/* logo por ticker (cripto/acciones/indices) */
#active-positions .ticker-header .marc-pos-logo .marc-qc-logo{
  width: 20px; height: 20px; border-radius: 5px; object-fit: contain; display: block;
  background: var(--bs-body-bg); box-shadow: 0 0 0 1px var(--pos-hairline);
}
/* fx: dos banderas solapadas (mismo patron que .marc-bs-logo del offcanvas) */
#active-positions .ticker-header .marc-pos-logo .flagv2{ margin-top: 0; margin-bottom: 0; }
#active-positions .ticker-header .marc-pos-logo .flages1,
#active-positions .ticker-header .marc-pos-logo .flages2{
  width: 17px !important; height: 17px !important; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
#active-positions .ticker-header .marc-pos-logo .flages1{ margin-left: -5px; }
#active-positions .ticker-header .marc-pos-logo .flages2{ margin-left: 5px; }
/* ----- end tabla continua + logo ----- */


/* ----- MARC POSITIONS: acciones compactas (iconos) + popover a mano ----- */
/* La celda de acciones ya no lleva botones de texto: la estrechamos. */
#active-positions .position-row .position-cell:first-child{ min-width: 0; }
/* Botones de icono (Close + More): cuadrados, heredan el pill base .btn.btn-sm */
#active-positions .position-cell .btn.marc-pos-iconbtn{
  width: 30px; min-width: 30px; padding: 0 !important; gap: 0; justify-content: center;
}
#active-positions .position-cell .btn.marc-pos-iconbtn i{ font-size: 1rem; }
#active-positions .position-cell .marc-pos-iconbtn + .marc-pos-iconbtn{ margin-left: 6px; }

/* Popover de acciones (anclado al body, position:fixed -> no lo recorta el overflow de la tabla) */
.marc-pos-pop{
  position: fixed; z-index: 4000; display: none; min-width: 174px;
  background: var(--marc-surface-2); border: 1px solid var(--marc-border-strong);
  border-radius: 11px; box-shadow: var(--marc-shadow-lg); padding: 6px;
}
.marc-pos-pop.show{ display: block; }
.marc-pos-pop__item{
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; background: transparent; border: 0; border-radius: 8px;
  color: var(--bs-body-color); font-size: .85rem; font-weight: 500; cursor: pointer;
  text-align: left; white-space: nowrap;
  transition: background-color .14s var(--marc-ease), color .14s var(--marc-ease);
}
.marc-pos-pop__item:hover{ background: var(--marc-accent-soft); color: var(--marc-accent); }
.marc-pos-pop__item i{ font-size: 1.05rem; width: 18px; text-align: center; flex: 0 0 auto; }
/* ----- end acciones compactas + popover ----- */


/* ----- MARC POSITIONS: ancho minimo + header sticky + fecha resumida ----- */
/* Ahorrar ancho: padding de celda mas ajustado (antes 8px 14px). */
#active-positions .position-cell{ padding: 8px 10px !important; }
#active-positions .position-row.sinhoverrow .position-cell{ padding: 8px 10px !important; }

/* Header de columnas (.sinhoverrow) sticky arriba: el scroll vertical pasa a la
   propia .tickerstotsscroll (max-height) para que el sticky se ancle de verdad. */
#active-positions .tickerstotsscroll{
  max-height: calc(100dvh - 300px);
  overflow-y: auto;
}
#active-positions .position-row.sinhoverrow{ position: sticky; top: 0; z-index: 5; }
#active-positions .position-row.sinhoverrow .position-cell{ position: sticky; top: 0; z-index: 5; }

/* Tooltip de la fecha completa (anclado al body, position:fixed) */
.marc-date-tip{
  position: fixed; z-index: 4100; display: none; pointer-events: none;
  background: var(--marc-surface-3, #2a3344); color: var(--bs-body-color, #d7dde7);
  border: 1px solid var(--marc-border-strong); border-radius: 8px;
  padding: 6px 10px; font-size: .76rem; font-weight: 500; white-space: nowrap;
  box-shadow: var(--marc-shadow-lg); font-variant-numeric: tabular-nums;
}
.marc-date-tip.show{ display: block; }
#active-positions .marc-date-cell{ cursor: help; }
/* ----- end ancho minimo + sticky + fecha ----- */


/* ----- MARC POSITIONS: item destructivo del dropdown (Cerrar) ----- */
.marc-pos-pop__item.is-danger:hover{
  background: var(--marc-sell-soft, rgba(239,83,80,.16));
  color: var(--marc-sell, #ef5350);
}
/* ----- end ----- */

/* ===== MARC: campo de contraseña con icono de ojo (login / registro / cabinet) ===== */
.marc-pw-wrap{ position:relative; }
.marc-pw-wrap > input{ padding-right:42px !important; }
.marc-pw-eye{
  position:absolute; top:0; bottom:0; right:0; width:40px;
  display:flex; align-items:center; justify-content:center;
  padding:0; margin:0; border:0; background:transparent;
  color:var(--bs-secondary-color,#8b94a8); cursor:pointer; z-index:4;
}
.marc-pw-eye:hover{ color:var(--marc-accent,#2962ff); }
.marc-pw-eye .ti{ font-size:18px; line-height:1; }
/* la .invalid-feedback queda como hermana del wrap -> re-mostrarla cuando el input envuelto es inválido */
.marc-pw-wrap:has(input.is-invalid) ~ .invalid-feedback,
.was-validated .marc-pw-wrap:has(input:invalid) ~ .invalid-feedback{ display:block !important; }

/* ===== MARC: el checkbox "Remember details" del login NO es un campo de texto:
   no estirarlo al 100% ni pintarlo en rojo (no es required) ===== */
.global-login__form-control input[type="checkbox"]{ width:auto !important; box-shadow:none !important; padding:0 !important; }
.global-login__form-control.is-errored input[type="checkbox"]{ border:1px solid rgba(0,0,0,.2) !important; box-shadow:none !important; }

/* ===== MARC: login por pasos (email -> contraseña, efecto deslizante) + registro ===== */
.marc-login-pane.marc-pane-hidden{ display:none; }
@keyframes marcLoginInR{ from{ transform:translateX(34px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes marcLoginInL{ from{ transform:translateX(-34px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
.marc-login-pane.marc-anim-r{ animation:marcLoginInR .32s cubic-bezier(.22,.61,.36,1); }
.marc-login-pane.marc-anim-l{ animation:marcLoginInL .32s cubic-bezier(.22,.61,.36,1); }

/* "Log in as X — Not you? Change account" (paso 2) */
.marc-login-as{ font-size:13.5px; color:#aeb6c6; margin-bottom:14px; line-height:1.5; }
.marc-login-as b{ color:#fff; word-break:break-all; }
.marc-login-as a{ display:inline-block; margin-top:3px; color:var(--cab-accent); cursor:pointer; font-weight:600; text-decoration:none; }
.marc-login-as a:hover{ text-decoration:underline; }

/* enlace recuperar contraseña (debajo del Sign In) */
.marc-login-recover{ display:inline-block; margin-top:12px; color:var(--cab-accent); font-weight:600; cursor:pointer; }
.marc-login-recover:hover{ text-decoration:underline; }

/* registro: tarjetas claras Real / Demo */
.marc-login-reg h5{ color:#aeb6c6; font-size:13.5px; font-weight:600; margin-bottom:10px; }
.marc-reg-btns{ display:flex; flex-direction:column; gap:8px; }
.marc-reg-btn{ display:flex; align-items:center; gap:11px; text-align:left; text-decoration:none;
  padding:11px 13px; border-radius:11px; border:1px solid color-mix(in srgb,#fff 14%, transparent);
  background:color-mix(in srgb,#fff 4%, transparent); transition:border-color .15s, background .15s; cursor:pointer; }
.marc-reg-btn:hover{ border-color:var(--cab-accent); background:color-mix(in srgb,var(--cab-accent) 8%, transparent); }
.marc-reg-btn > .ti{ font-size:20px; flex:0 0 auto; line-height:1; }
.marc-reg-btn--real > .ti{ color:var(--cab-accent); }
.marc-reg-btn--demo > .ti{ color:var(--cab-warn,#f0a020); }
.marc-reg-btn-txt{ display:flex; flex-direction:column; line-height:1.25; }
.marc-reg-btn-txt b{ color:#fff; font-size:14px; font-weight:600; }
.marc-reg-btn-txt small{ color:#aeb6c6; font-size:11.5px; }

/* ===== MARC login (2): acento azul (combina con el botón Sign In), mensaje de error y checkbox ===== */
/* el acento del login es TEAL del cabinet (#00bea0) */
.marc-login-as a, .marc-login-recover{ color:#00bea0 !important; }
.marc-reg-btn:hover{ border-color:#00bea0; background:rgba(0,190,160,0.10); }
.marc-reg-btn--real > .ti{ color:#00bea0; }
.marc-login-recoverwrap{ text-align:center; margin-top:10px; }
/* selector de idioma del login: fijo abajo-derecha */
.marc-login-lang{ position:fixed; right:18px; bottom:14px; z-index:20; margin:0 !important; }

/* mostrar el MENSAJE de error (no solo el borde rojo): el base es display:none y la regla
   de error solo ponía visibility -> nunca aparecía. Ahora se muestra el texto. */
.global-login__form-control.is-errored .global-login__form-message{
  display:block !important; visibility:visible !important;
  color:#ff6b81; font-size:12.5px; margin-top:6px; font-weight:600;
}

/* checkbox "Remember details" rediseñado (antes salía estirado/raro) */
#logincamp3{ margin-top:2px; }
#logincamp3 .form-check{ display:flex; align-items:center; justify-content:center; gap:8px; padding:0; margin:0; min-height:auto; }
#logincamp3 input[type="checkbox"]{
  -webkit-appearance:none; appearance:none; float:none;
  width:18px !important; height:18px !important; margin:0 !important; flex:0 0 auto; cursor:pointer;
  border:1px solid color-mix(in srgb,#fff 30%, transparent) !important; border-radius:5px !important;
  background:color-mix(in srgb,#fff 6%, transparent) !important; position:relative; box-shadow:none !important;
  transition:background .15s, border-color .15s;
}
#logincamp3 input[type="checkbox"]:checked{ background:#00bea0 !important; border-color:#00bea0 !important; }
#logincamp3 input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:5px; top:2px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
#logincamp3 input[type="checkbox"]:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,190,160,0.30) !important; }
#logincamp3 label{ color:#aeb6c6; font-size:13px; cursor:pointer; margin:0; user-select:none; }

/* ===== LOGIN: tarjeta estilo modal + paleta NEUTRA (ElevenLabs) — release 20373 ===== */
.global-login__content{
  background:#131316 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:18px !important;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6) !important;
  padding:0 !important;
  overflow:hidden;
  clip-path:none !important;
  text-align:left;
}
.global-login__brand{
  background:#1c1c20;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:20px 24px;
  align-items:flex-start;
}
.global-login__brand-link{ width:auto; height:auto; margin-bottom:8px; }
.global-login__description{ text-align:left !important; color:#a1a1aa; margin:0; }
.global-login__description.bard-hello b{ color:#fafafa; }
.global-login__body{ padding:20px 24px; }
.global-login__form-control label{ color:#a1a1aa; }
.global-login__form-control input{
  background:#0e0e10 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#f4f4f5 !important;
  border-radius:11px !important;
}
.global-login__form-control input:focus{
  border-color:rgba(255,255,255,.45) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.12) !important;
}
.global-login .btn--login{
  background:#fafafa !important;
  background-image:none !important;
  color:#18181b !important;
  border-radius:11px !important;
  box-shadow:none !important;
}
.global-login .btn--login:hover{ background:#e4e4e7 !important; transform:none; box-shadow:none !important; }
.global-login .btn--login > .btn__icon, .global-login .btn--login > .btn__text{ color:#18181b; }
.marc-login-as a, .marc-login-recover{ color:#d4d4d8 !important; }
.marc-login-reg h5{ color:#a1a1aa; }
.marc-reg-btn{ border-color:rgba(255,255,255,.12); }
.marc-reg-btn:hover{ border-color:rgba(255,255,255,.30); background:rgba(255,255,255,.04); }
.marc-reg-btn--real > .ti, .marc-reg-btn--demo > .ti{ color:#d4d4d8; }
.marc-reg-btn-txt b{ color:#fafafa; }
#logincamp3 input[type="checkbox"]:checked{ background:#52525b !important; border-color:#71717a !important; }
#logincamp3 input[type="checkbox"]:focus{ box-shadow:0 0 0 3px rgba(255,255,255,.18) !important; }