/* Sección "Gráfico". Todo lleva el prefijo graf- para no chocar con lo demás. */

.graf-marco {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.graf-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
}

.graf-barra-2 {
  justify-content: space-between;
}

/* ---------- Símbolo ---------- */
.graf-simbolo select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--panel)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238b95ab' stroke-width='1.6'/%3E%3C/svg%3E")
    no-repeat right 12px center / 11px;
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 9px 36px 9px 12px;
  font: 600 15px var(--titulos);
  cursor: pointer;
  max-width: 100%;
}

.graf-simbolo select:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 1px;
}

.graf-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- Precio en vivo ---------- */
.graf-precio-vivo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-right: auto;
}

.graf-precio {
  font: 500 22px var(--numeros);
  color: var(--texto);
  transition: color 0.4s;
}

.graf-vivo {
  font: 500 13px var(--cuerpo);
  color: var(--verde);
  white-space: nowrap;
}

.graf-vivo::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

.graf-vivo-espera { color: var(--tenue); }

/* ---------- Grupos de botones ---------- */
.graf-grupo {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.graf-grupo::-webkit-scrollbar { display: none; }

.graf-grupo button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--tenue);
  font: 500 13px var(--cuerpo);
  cursor: pointer;
  white-space: nowrap;
}

.graf-grupo button:hover { background: var(--panel-2); color: var(--texto); }

.graf-grupo button.graf-activo {
  background: var(--panel-2);
  color: var(--texto);
}

.graf-grupo button:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: -2px;
}

.graf-tfs button {
  font: 500 13px var(--numeros);
  min-width: 40px;
  justify-content: center;
}

.graf-herramientas svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.graf-herramientas button.graf-peligro {
  color: var(--rojo);
  background: rgba(240, 118, 122, 0.12);
}

.graf-medias i {
  display: inline-block;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  opacity: 0.45;
}

.graf-medias button.graf-activo { color: var(--texto); }
.graf-medias button.graf-activo i { opacity: 1; }

/* Indicadores: un punto de color por cada uno; tenue si está apagado */
.graf-indicadores i,
.graf-capas i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.35;
}

.graf-indicadores button.graf-activo { color: var(--texto); }
.graf-indicadores button.graf-activo i { opacity: 1; }
.graf-capas button.graf-activo { color: var(--texto); }
.graf-capas button.graf-activo i { opacity: 1; }

/* ---------- Lienzo del gráfico ---------- */
.graf-lienzo {
  position: relative;
  height: max(420px, calc(100vh - 290px));
  min-width: 0;
  background: #EEEEEE;                 /* 16-10: gris claro, como su TradingView */
  border: 1px solid #D6D6D6;
  border-radius: var(--radio);
  overflow: hidden;
}

.graf-lienzo.graf-dibujando { cursor: crosshair; }

.graf-leyenda {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 80px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font: 500 12px var(--numeros);
  color: #6A6A6A;
  pointer-events: none;
}

.graf-leyenda b { font-weight: 500; }

.graf-leyenda-simbolo {
  color: #131313;
  font-family: var(--titulos);
  font-weight: 700;
}

.graf-sube { color: #5B8CFF; }   /* precio de arriba (fondo oscuro de la web) */
.graf-baja { color: #F23645; }

/* Dentro del gráfico claro: verde y rojo oscuros que se leen sobre #EEEEEE */
.graf-leyenda .graf-sube { color: #087F5B; }
.graf-leyenda .graf-baja { color: #D1202F; }

.graf-ayuda,
.graf-aviso {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  border-radius: var(--radio-chico);
  font: 500 13px var(--cuerpo);
  text-align: center;
  pointer-events: none;
}

.graf-ayuda {
  bottom: 44px;
  background: rgba(var(--oro-rgb), 0.95);
  color: #1a1204;
}

.graf-aviso {
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(23, 29, 43, 0.95);
  border: 1px solid var(--borde);
  color: var(--texto);
}

.graf-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  font: 500 12px var(--cuerpo);
  color: var(--tenue);
}

#graf-diferencial { font-family: var(--numeros); }

/* ---------- Teléfono ---------- */
@media (max-width: 760px) {
  .graf-barra { gap: 8px; }

  .graf-simbolo { flex: 1 1 auto; min-width: 0; }
  .graf-simbolo select { width: 100%; font-size: 14px; }

  .graf-precio-vivo { margin-right: 0; }
  .graf-precio { font-size: 18px; }

  .graf-tfs { width: 100%; justify-content: space-between; }
  .graf-tfs button { flex: 1; min-width: 0; padding: 7px 4px; font-size: 12px; }

  .graf-herramientas,
  .graf-medias,
  .graf-indicadores { width: 100%; }

  /* Los tres indicadores se reparten el ancho del teléfono */
  .graf-indicadores button { flex: 1; justify-content: center; padding: 7px 6px; font-size: 12px; }

  /* En teléfono las herramientas muestran solo el ícono */
  .graf-herramientas button span { display: none; }
  .graf-herramientas button { padding: 7px 11px; }
  .graf-herramientas .graf-texto { font-size: 12px; margin-left: auto; }

  .graf-lienzo {
    height: 62vh;
    min-height: 340px;
    border-radius: var(--radio-chico);
  }

  .graf-leyenda { font-size: 11px; right: 60px; gap: 2px 8px; }
  .graf-pie { font-size: 11px; }
}

/* ---------- Noticias rojas del dólar (15-10) ---------- */
.graf-aviso-noticia {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  max-width: calc(100% - 24px);
  padding: 7px 14px 7px 12px;
  border-radius: var(--radio-chico);
  background: rgba(255, 235, 237, 0.96);
  border: 1px solid rgba(242, 54, 69, 0.7);
  color: #B3121F;
  font: 600 13px var(--cuerpo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.graf-aviso-noticia::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #F23645;
  vertical-align: 1px;
  animation: graf-latido 1.4s ease-in-out infinite;
}

@keyframes graf-latido {
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .graf-aviso-noticia::before { animation: none; }
}

.graf-nota-noticia {
  position: absolute;
  bottom: 40px;
  z-index: 5;
  display: grid;
  gap: 2px;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(14, 15, 19, 0.96);
  border: 1px solid rgba(242, 54, 69, 0.6);
  color: #D1D4DC;
  font: 500 12px var(--cuerpo);
  pointer-events: none;
}

.graf-nota-noticia b {
  color: #FF8A93;
  font-weight: 600;
}

/* =====================================================================
   Herramientas de dibujo (15-10) — herramientas.js
   Barra a la izquierda del gráfico, como en TradingView.
   ===================================================================== */
.graf-cuerpo {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.graf-cuerpo .graf-lienzo { flex: 1 1 auto; }

.graf-herramientas {
  flex-direction: column;
  align-self: flex-start;
  max-height: max(420px, calc(100vh - 290px));
  overflow-y: auto;
  overflow-x: hidden;
}

.graf-herramientas { gap: 2px; }

.graf-herramientas button {
  justify-content: center;
  padding: 6px;
}

/* En la barra de la izquierda solo el ícono (el nombre sale al pasar el mouse) */
.graf-herramientas button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.graf-herramientas svg { width: 18px; height: 18px; }

.graf-herramientas .graf-ico-verde { stroke: #22C55E; }
.graf-herramientas .graf-ico-rojo { stroke: #F23645; }

.graf-separador {
  display: block;
  flex: none;
  width: 70%;
  height: 1px;
  margin: 3px auto;
  background: var(--borde);
}

.graf-barra .boton-pantalla { margin-left: 0; }

/* Cuadro para escribir un texto sobre el gráfico */
.graf-editor-texto {
  position: absolute;
  z-index: 6;
  min-width: 180px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(var(--oro-rgb), 0.7);
  background: rgba(14, 15, 19, 0.96);
  color: #EDEBFF;
  font: 600 14px var(--cuerpo);
  outline: none;
}

/* Gráfico en pantalla completa: llena todo el aparato */
.graf-marco:fullscreen,
.graf-marco.pantalla-falsa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--fondo);
}

.graf-marco:fullscreen .graf-cuerpo,
.graf-marco.pantalla-falsa .graf-cuerpo { flex: 1 1 auto; min-height: 0; }

.graf-marco:fullscreen .graf-lienzo,
.graf-marco.pantalla-falsa .graf-lienzo { height: auto; min-height: 0; }

.graf-marco:fullscreen .graf-herramientas,
.graf-marco.pantalla-falsa .graf-herramientas { max-height: 100%; }

.graf-marco::backdrop { background: var(--fondo); }

/* La sección entera en pantalla completa: el gráfico usa el alto que sobra */
.seccion:fullscreen .graf-lienzo,
.seccion.pantalla-falsa .graf-lienzo { height: calc(100vh - 230px); }

@media (max-width: 760px) {
  /* En teléfono la barra de dibujo va arriba del gráfico, en una fila que se desliza */
  .graf-cuerpo { flex-direction: column; }
  .graf-herramientas {
    flex-direction: row;
    align-self: stretch;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .graf-herramientas button { padding: 7px 9px; }
  .graf-separador { width: 1px; height: auto; margin: 4px 2px; }
}