/* Ltab · estilos del widget embebible — GENERADO por integration/build-widget.py
   a partir de public/chart_app.css (todo bajo .ltab-widget para no
   contaminar los estilos de la página anfitriona). No editar a mano. */

/* Estilos de la app de gráficos (y páginas de login/registro). Tema oscuro. */

.ltab-widget * { box-sizing: border-box; }

.ltab-widget {
  margin: 0;
  background: #0e1117;
  color: #c9d1d9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

.ltab-widget a { color: #58a6ff; text-decoration: none; }
.ltab-widget a:hover { text-decoration: underline; }

/* ---------- Login / registro ---------- */

.ltab-widget .auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ltab-widget .auth-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 32px;
  width: 360px;
}

.ltab-widget .auth-card h1 { margin: 0 0 4px; font-size: 18px; color: #8b949e; font-weight: 500; }
.ltab-widget .auth-card h2 { margin: 0 0 20px; font-size: 24px; }

.ltab-widget .auth-card label { display: block; margin: 14px 0 6px; color: #8b949e; }

.ltab-widget .auth-card input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #0e1117;
  color: #c9d1d9;
  font-size: 14px;
}

.ltab-widget .auth-card input:focus { outline: none; border-color: #58a6ff; }

.ltab-widget .btn-primary {
  margin-top: 20px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #2962ff;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.ltab-widget .btn-primary:hover { background: #1e4fd6; }

.ltab-widget .auth-error {
  background: rgba(248, 81, 73, 0.15);
  border: 1px solid rgba(248, 81, 73, 0.5);
  color: #ffa198;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.ltab-widget .auth-error ul { margin: 0; padding-left: 18px; }

.ltab-widget .auth-alt { margin-top: 18px; color: #8b949e; }

/* ---------- Página del gráfico ---------- */

.ltab-widget {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.ltab-widget .topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
}

.ltab-widget .topbar .brand { font-weight: 600; color: #e6edf3; white-space: nowrap; }

.ltab-widget .symbol-box { position: relative; }

.ltab-widget #symbol-input {
  width: 220px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #0e1117;
  color: #e6edf3;
  font-size: 14px;
  text-transform: uppercase;
}

.ltab-widget #symbol-input:focus { outline: none; border-color: #58a6ff; }

.ltab-widget .search-results {
  position: absolute;
  top: 36px;
  left: 0;
  width: 320px;
  max-height: 300px;
  overflow-y: auto;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  z-index: 30;
}

.ltab-widget .search-results div {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ltab-widget .search-results div:hover, .ltab-widget .search-results div.active { background: #21262d; }
.ltab-widget .search-results .sr-name { color: #8b949e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltab-widget .search-results .sr-sym { font-weight: 600; }

.ltab-widget .intervals { display: flex; gap: 4px; }

.ltab-widget .intervals button, .ltab-widget .toolbar button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #8b949e;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}

.ltab-widget .intervals button:hover, .ltab-widget .toolbar button:hover { background: #21262d; color: #e6edf3; }

.ltab-widget .intervals button.active, .ltab-widget .toolbar button.active {
  background: #1f2c47;
  color: #58a6ff;
  border-color: #2b3f66;
}

.ltab-widget .quote { display: flex; align-items: baseline; gap: 8px; margin-left: 4px; }
.ltab-widget #quote-symbol { font-weight: 700; font-size: 16px; color: #e6edf3; }
.ltab-widget #quote-price { font-size: 16px; font-weight: 600; }
.ltab-widget #quote-change { font-size: 13px; }
.ltab-widget .quote-range { font-size: 12px; color: #8b949e; white-space: nowrap; }

/* Franja de fundamentales bajo el gráfico (botón Info). */
.ltab-widget .fund-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  padding: 6px 14px;
  background: #11151c;
  border-top: 1px solid #30363d;
  font-size: 12px;
  color: #8b949e;
}

.ltab-widget .fund-strip .fs-item { display: flex; gap: 6px; align-items: baseline; }
.ltab-widget .fund-strip .fs-k { color: #545d68; }
.ltab-widget .fund-strip b { color: #c9d1d9; font-weight: 600; }
.ltab-widget .fund-strip b.up { color: #26a69a; }
.ltab-widget .fund-strip b.down { color: #ef5350; }
.ltab-widget .sr-empty { padding: 9px 12px; color: #8b949e; font-size: 13px; cursor: default; }
.ltab-widget .up { color: #26a69a; }
.ltab-widget .down { color: #ef5350; }

.ltab-widget .userbox { margin-left: auto; color: #8b949e; display: flex; gap: 10px; align-items: center; white-space: nowrap; }

.ltab-widget .toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: #11151c;
  border-bottom: 1px solid #30363d;
  /* Una sola línea siempre: si la toolbar creciera en altura, el gráfico se
     desplaza y los clicks del usuario dejan de caer donde apuntó. En pantallas
     angostas se desliza horizontal (scroll táctil) en vez de cortarse. */
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.ltab-widget .toolbar::-webkit-scrollbar { display: none; }

.ltab-widget .toolbar button { flex-shrink: 0; }

.ltab-widget #status-msg {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ltab-widget .toolbar .sep { width: 1px; height: 20px; background: #30363d; margin: 0 8px; }
.ltab-widget .toolbar .spacer { flex: 1; }

.ltab-widget #status-msg { color: #8b949e; font-size: 12px; margin-right: 12px; }
.ltab-widget #last-update { color: #545d68; font-size: 12px; }

.ltab-widget .banner {
  padding: 8px 14px;
  background: rgba(210, 153, 34, 0.15);
  border-bottom: 1px solid rgba(210, 153, 34, 0.4);
  color: #e3b341;
  font-size: 13px;
}

.ltab-widget .banner.error {
  background: rgba(248, 81, 73, 0.12);
  border-bottom-color: rgba(248, 81, 73, 0.4);
  color: #ffa198;
}

.ltab-widget .banner-retry {
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid #f85149;
  background: transparent;
  color: #ffa198;
  font-size: 12px;
  cursor: pointer;
}

.ltab-widget .banner-retry:hover { background: rgba(248, 81, 73, 0.18); }

.ltab-widget .hidden { display: none !important; }

.ltab-widget .main-row { display: flex; flex: 1; min-height: 0; }

.ltab-widget .side-tools {
  width: 46px;
  flex-shrink: 0;
  background: #11151c;
  border-right: 1px solid #30363d;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  overflow-y: auto;
  scrollbar-width: none;
}

.ltab-widget .side-tools::-webkit-scrollbar { display: none; }

.ltab-widget .side-tools button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #8b949e;
  width: 34px;
  height: 30px;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  flex-shrink: 0;
}

.ltab-widget .side-tools button:hover { background: #21262d; color: #e6edf3; }

.ltab-widget .side-tools button.active {
  background: #1f2c47;
  color: #58a6ff;
  border-color: #2b3f66;
}

.ltab-widget .side-tools .color-dot { width: 16px; height: 16px; min-height: 16px; }
.ltab-widget .side-tools .mini-config { height: 20px; font-size: 11px; }

.ltab-widget .side-sep { width: 24px; height: 1px; background: #30363d; margin: 4px 0; flex-shrink: 0; }

/* ---------- Editor de estilos de indicadores ---------- */

.ltab-widget .style-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.ltab-widget .style-row:hover { background: #191f27; }
.ltab-widget .style-row .sr-title { width: 74px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

.ltab-widget .style-row .sdot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.ltab-widget .style-row .sdot.active { border-color: #e6edf3; }

.ltab-widget .style-row .sw-btn, .ltab-widget .style-row .st-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #8b949e;
  padding: 2px 5px;
  cursor: pointer;
  font-size: 11px;
}

.ltab-widget .style-row .sw-btn:hover, .ltab-widget .style-row .st-btn:hover { background: #21262d; color: #e6edf3; }
.ltab-widget .style-row .sw-btn.active, .ltab-widget .style-row .st-btn.active { background: #1f2c47; color: #58a6ff; border-color: #2b3f66; }

.ltab-widget .style-row input[type="range"] { width: 64px; accent-color: #58a6ff; }

.ltab-widget .styles-empty { color: #8b949e; font-size: 12px; padding: 8px 10px; }

.ltab-widget .tf-item {
  background: transparent;
  border: none;
  color: #c9d1d9;
  padding: 6px 12px;
  text-align: left;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}

.ltab-widget .tf-item:hover { background: #21262d; }
.ltab-widget .tf-item.active { color: #58a6ff; }

.ltab-widget .chart-area { position: relative; flex: 1; min-width: 0; min-height: 0; }

.ltab-widget #chart-container { position: absolute; inset: 0; }

.ltab-widget .legend {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 20;
  font-size: 12px;
  color: #8b949e;
  pointer-events: none;
  background: rgba(14, 17, 23, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
}

.ltab-widget .legend b { color: #e6edf3; }

.ltab-widget #chart-container.tool-active { cursor: crosshair; }

/* Nombres y valores de indicadores en cada panel (estilo TV). */
.ltab-widget #pane-labels { position: absolute; inset: 0; pointer-events: none; z-index: 18; }

.ltab-widget .pane-label {
  position: absolute;
  display: flex;
  gap: 10px;
  font-size: 11px;
  background: rgba(14, 17, 23, 0.6);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.ltab-widget .draw-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  pointer-events: none;
}

/* ---------- Dropdown de medias móviles ---------- */

.ltab-widget .mas-box { position: relative; }

.ltab-widget .mas-menu {
  /* fixed y no absolute: la toolbar tiene overflow (scroll horizontal) y un
     menú absolute quedaría recortado por ella. El JS lo posiciona al abrir. */
  position: fixed;
  z-index: 100;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.ltab-widget .mas-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  color: #c9d1d9;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.ltab-widget .mas-item:hover { background: #21262d; }

.ltab-widget .ma-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* ---------- Paleta de color/grosor ---------- */

.ltab-widget .palette { display: flex; align-items: center; gap: 4px; }

.ltab-widget .color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.ltab-widget .color-dot.active { border-color: #e6edf3; }

.ltab-widget .width-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #8b949e;
  padding: 3px 6px;
  cursor: pointer;
  font-size: 12px;
}

.ltab-widget .width-btn:hover { background: #21262d; color: #e6edf3; }
.ltab-widget .width-btn.active { background: #1f2c47; color: #58a6ff; border-color: #2b3f66; }

/* ---------- Mini-tarjetas ---------- */

.ltab-widget .cards-wrap {
  padding: 18px;
  max-width: 1100px;
  margin: 0 auto;
}

.ltab-widget .cards-add {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  position: relative; /* ancla del dropdown de autocompletado */
}

.ltab-widget .cards-add .search-results { top: 40px; }

.ltab-widget .cards-add input {
  width: 220px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #0e1117;
  color: #e6edf3;
  font-size: 14px;
  text-transform: uppercase;
}

.ltab-widget .cards-add input:focus { outline: none; border-color: #58a6ff; }

.ltab-widget .cards-add button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: #2962ff;
  color: #fff;
  cursor: pointer;
}

.ltab-widget .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.ltab-widget .mini-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 12px 14px;
  position: relative;
}

.ltab-widget .mini-card .mc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ltab-widget .mini-card .mc-symbol { font-weight: 700; font-size: 15px; color: #e6edf3; }

.ltab-widget .mini-card .mc-remove {
  background: none;
  border: none;
  color: #545d68;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}

.ltab-widget .mini-card .mc-remove:hover { color: #ef5350; }

.ltab-widget .mini-card .mc-price { font-size: 20px; font-weight: 600; margin-top: 2px; }
.ltab-widget .mini-card .mc-change { font-size: 12px; }
.ltab-widget .mini-card .mc-spark { width: 100%; height: 48px; margin-top: 8px; }
.ltab-widget .mini-card .mc-error { color: #8b949e; font-size: 12px; margin-top: 8px; }

/* ---------- Botones flotantes sobre el eje de precio (Log / Auto) ---------- */

.ltab-widget .axis-buttons {
  position: absolute;
  right: 4px;
  bottom: 32px;
  z-index: 25;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.ltab-widget .axis-buttons.visible, .ltab-widget .axis-buttons:hover {
  opacity: 1;
  pointer-events: auto;
}

.ltab-widget .axis-buttons button {
  background: rgba(22, 27, 34, 0.92);
  border: 1px solid #30363d;
  border-radius: 5px;
  color: #8b949e;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}

.ltab-widget .axis-buttons button:hover { color: #e6edf3; border-color: #58a6ff; }
.ltab-widget .axis-buttons button.active { color: #58a6ff; border-color: #2b3f66; background: rgba(31, 44, 71, 0.92); }

/* ---------- Botón "ir a la última vela" ---------- */

.ltab-widget .goto-latest {
  position: absolute;
  right: 76px;
  bottom: 34px;
  z-index: 25;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(22, 27, 34, 0.92);
  border: 1px solid #30363d;
  color: #58a6ff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ltab-widget .goto-latest:hover { border-color: #58a6ff; background: rgba(31, 44, 71, 0.95); }

/* ---------- Indicador de scroll de la toolbar ---------- */

.ltab-widget .toolbar-wrap { position: relative; }

.ltab-widget .tb-more {
  /* Superpuesto FUERA del contenedor que scrollea: siempre pegado al borde. */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  background: linear-gradient(to left, #11151c 45%, rgba(17, 21, 28, 0));
  color: #8b949e;
  font-size: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 6;
}

.ltab-widget .toolbar-wrap.more-right .tb-more { opacity: 1; }

/* ---------- Config del RSI ---------- */

.ltab-widget .mini-config {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #545d68;
  padding: 6px 4px;
  cursor: pointer;
  font-size: 12px;
}

.ltab-widget .mini-config:hover { color: #e6edf3; background: #21262d; }

.ltab-widget .tf-ext {
  border-top: 1px solid #30363d;
  margin-top: 4px;
  padding-top: 8px;
}

.ltab-widget .mas-item input[type="number"], .ltab-widget .mas-item input[type="text"] {
  width: 56px;
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid #30363d;
  background: #0e1117;
  color: #e6edf3;
  font-size: 12px;
}

/* ---------- Pantallas angostas (tablet / móvil) ---------- */

@media (max-width: 900px) {
.ltab-widget #status-msg, .ltab-widget #last-update { display: none; }
.ltab-widget .topbar { flex-wrap: wrap; row-gap: 6px; gap: 10px; padding: 8px 10px; }
.ltab-widget #symbol-input { width: 150px; }
.ltab-widget .quote { margin-left: 0; }
.ltab-widget .search-results { width: 260px; }
}

@media (max-width: 900px) {
  /* Sin hover en táctil: los botones del eje quedan siempre visibles. */
.ltab-widget .axis-buttons { opacity: 1; pointer-events: auto; }
}

@media (max-width: 620px) {
.ltab-widget .userbox span { display: none; }   /* el email se oculta; quedan los links */
.ltab-widget .topbar .brand { font-size: 14px; }
.ltab-widget #quote-symbol, .ltab-widget #quote-price { font-size: 14px; }
.ltab-widget .intervals button, .ltab-widget .toolbar button { padding: 6px 8px; }
.ltab-widget .quote-range { display: none; }    /* no cabe; el dato vive en pantallas anchas */

  /* En celular la columna de dibujo se comía ~1/4 del ancho: pasa a ser una
     fila deslizable entre la barra de indicadores y el gráfico. */
.ltab-widget .main-row { flex-direction: column; }
.ltab-widget .side-tools {
    width: 100%;
    height: 42px;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid #30363d;
    padding: 4px 8px;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
  }
.ltab-widget .side-tools .side-sep {
    width: 1px;
    height: 22px;
    margin: 0 2px;
    align-self: center;
  }
.ltab-widget .fund-strip { gap: 2px 14px; padding: 5px 10px; font-size: 11px; }
}

@media (min-width: 621px) and (max-width: 760px) {
  /* Anchos intermedios: que el wrap de la topbar no apriete el precio. */
.ltab-widget #symbol-input { width: 130px; }
.ltab-widget .topbar { gap: 8px; }
}

/* Raíz del widget: ocupa el contenedor donde se monta. */
.ltab-widget { height: 100%; min-height: 420px; }
.ltab-widget .lw-topbar { flex-wrap: wrap; }