/* --- ESTILOS DEL COMPONENTE DCA BOT --- */
/* Nota: Importar este archivo para que el widget funcione visualmente */

/* Contenedor Principal del Widget */
.panel-container {
    width: 100%; /* Se adapta al contenedor padre que le de el desarrollador */
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #ccc; /* Borde sutil en lugar de solo izquierda */
    display: flex; flex-direction: column;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative; /* Necesario para el modo flotante */
    z-index: 100;
    transition: box-shadow 0.3s;
    /* Sin border-radius (Cuadrado) */
    border-radius: 0px; 
}

/* MODO FLOTANTE (Clase activada por JS) */
.panel-container.floating {
    position: fixed;
    top: 100px; left: 100px;
    width: 450px; /* Ancho fijo al flotar */
    height: 600px;
    border: 1px solid #999;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    resize: both;
    overflow: hidden;
    z-index: 9999;
}

/* --- HEADER --- */
.panel-header {
    background-color: #2c3e50; color: white; padding: 0 15px;
    height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-shrink: 0; user-select: none; cursor: default;
}

.header-left-block { display: flex; align-items: center; flex-shrink: 0; }
/* Usamos selectores específicos para evitar conflictos */
.panel-header h3 { margin: 0; font-size: 1rem; white-space: nowrap; font-weight: bold; }
.vertical-separator { width: 1px; height: 20px; background-color: rgba(255,255,255,0.3); margin: 0 15px; }

.header-nav-block { display: flex; align-items: center; justify-content: flex-end; flex: 1; min-width: 0; gap: 5px; }
.nav-arrow-small { background: none; border: none; color: #ccc; cursor: pointer; font-size: 1rem; padding: 0 5px; }
.nav-arrow-small:hover { color: white; }

/* PIN / HANDLE DE ARRASTRE */
.drag-handle {
    width: 30px; height: 30px;
    background-color: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: white; display: flex; justify-content: center; align-items: center;
    cursor: pointer; font-size: 14px; margin-left: 10px;
    border-radius: 0px; /* Cuadrado */
}
.drag-handle:hover { background-color: rgba(255,255,255,0.2); }

/* TABS DE GRUPOS */
.scrollable-tabs {
    display: flex; overflow-x: auto; white-space: nowrap; margin: 0 5px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.scrollable-tabs::-webkit-scrollbar { display: none; }
.scrollable-tabs button {
    background: transparent; border: none; color: #aaa; cursor: pointer;
    font-weight: bold; padding: 5px 10px; min-width: 30px;
    border-radius: 0px; /* Cuadrado */
}
.scrollable-tabs button.active { color: white; border: 1px solid white; }

/* --- BODY & GRAFICO --- */
.panel-body {
    flex: 1; display: flex; background-color: #f9f9f9; padding: 10px; position: relative; overflow: hidden;
}

.left-measure-area { width: 50px; position: relative; display: flex; justify-content: center; margin-top: 35px; margin-bottom: 10px;}
.measure-container { position: absolute; width: 100%; display: flex; justify-content: center; }
.measure-line { height: 100%; border-left: 1px dashed #7f8c8d; position: relative; display: flex; justify-content: center; align-items: center; }
.measure-label { background-color: #f9f9f9; padding: 2px 5px; font-size: 11px; color: #555; font-weight: bold; z-index: 2; }
.arrow-up, .arrow-down { position: absolute; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; left: -4px; }
.arrow-up { top: 0; border-bottom: 6px solid #7f8c8d; }
.arrow-down { bottom: 0; border-top: 6px solid #7f8c8d; }
.guide-line { position: absolute; left: 25px; width: 2000px; border-top: 1px dashed rgba(0,0,0,0.08); z-index: 0; }
.guide-line.top { top: 0; } .guide-line.bottom { bottom: 0; }

/* STAGE */
.visualization-area { flex: 1; position: relative; margin-left: 5px; margin-top: 35px; margin-bottom: 10px; }
.bots-stage { width: 100%; height: 100%; display: flex; align-items: flex-start; }
.bot-lane { flex: 1; height: 100%; position: relative; }

/* BOT ELEMENTOS */
.bot-box {
    position: absolute; width: 92%; left: 4%; overflow: visible; display: flex; flex-direction: column; z-index: 10; cursor: help;
}
.bot-indicators-header {
    position: absolute; top: -28px; left: 0; width: 100%; height: 24px;
    display: flex; justify-content: center; align-items: center; gap: 6px; z-index: 20;
}
.indicator-arrow {
    font-size: 20px; color: #0a2e4d; font-weight: bold; cursor: default; line-height: 1; transform: scaleX(1.6);
}
.indicator-dot {
    width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.5);
}
.dot-green { background-color: #2ecc71; } .dot-red { background-color: #e74c3c; }

.visual-rect {
    width: 100%; height: 100%; background-color: #ffffff; border: 1px solid #bdc3c7; position: relative; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.bot-box.inactive .visual-rect { background-color: #dcdcdc; border: 1px solid #999; }

/* LINEAS */
.bot-line { position: absolute; left: 10%; width: 80%; height: 2px; z-index: 1; cursor: pointer; }
.bot-line:hover { height: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.3); }
.line-tp { background-color: #2ecc71; } .line-bo { background-color: #e74c3c; } .line-so { background-color: #3498db; height: 1px; }

/* PRECIO */
.price-indicator-container { position: absolute; left: 0; width: 100%; height: 0; z-index: 50; display: flex; justify-content: center; }
.price-line-yellow { position: absolute; top: -12px; height: 24px; width: 1px; background-color: #f1c40f; pointer-events: none; }
.price-dot {
    position: absolute; top: -5px; width: 11px; height: 11px; background-color: black; border-radius: 50%; z-index: 60; cursor: crosshair; pointer-events: auto; box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}

/* TOOLTIP */
.dca-tooltip {
    position: absolute; background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 8px 12px;
    border-radius: 0px; /* Cuadrado */
    font-size: 12px; pointer-events: none; z-index: 99999; white-space: pre-line; box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    display: none; /* Oculto por defecto */
}
.dca-tooltip.visible { display: block; }