a.marquee-link { text-decoration: none; color: inherit; display: block; cursor: pointer; }
.marquee-container { background-color: #fff; 
border-bottom: 0px solid #dee2e6; 
padding: 6px 0; 
margin: 10px 0; 
width: 100%; 
overflow: hidden; 
box-sizing: border-box; }
.marquee { width: 100%; overflow: hidden; }
.marquee-content { 
    display: inline-block; 
    white-space: nowrap; 
    padding-left: 100%; 
    animation: marquee 90s linear infinite; 
    font-size: 13px; 
    color: #343a40; 
    font-family: Arial, Helvetica, sans-serif; }
    
.marquee-content:hover { animation-play-state: paused; }
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }
.marquee-content b { color: #0056b3; position: relative; cursor: pointer; }
.marquee-content .verde { color: #198754; font-weight: bold; }
.marquee-content .rojo { color: #dc3545; font-weight: bold; }
.marquee-content .gris { color: #6c757d; }
.marquee-content .separator { color: #adb5bd; margin: 0 8px; }
.marquee-content svg { vertical-align: middle; margin-left: 3px; position: relative; top: -1px; height: 12px; width: 12px; }

/* Tooltip personalizado mejorado */
.marquee-content .if-tooltip {
  visibility: hidden;
  opacity: 0;
  width: max-content;
  max-width: 320px;
  background: #222;
  color: #fff;
  text-align: left;
  border-radius: 8px;
  padding: 10px 16px;
  position: absolute;
  z-index: 9999;
  left: 50%;
  top: 130%;
  transform: translateX(-50%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  font-size: 14px;
  pointer-events: none;
  transition: opacity 0.18s;
  white-space: pre-line;
  border: 1.5px solid #fff;
  outline: 2px solid #0056b3;
  outline-offset: -3px;
}

/* Estilos para el enlace del nombre del indicador dentro del tooltip */
.marquee-content .if-tooltip a {
  pointer-events: auto;
  text-decoration: underline;
  color: #fff !important;
  font-weight: bold;
  transition: color 0.2s;
}

.marquee-content .if-tooltip a:hover {
  color: #4fc3f7 !important;
}

.marquee-content b:hover .if-tooltip,
.marquee-content b:focus .if-tooltip {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 600px) {
  .marquee-content .if-tooltip {
    font-size: 12px;
    max-width: 90vw;
    left: 0;
    right: 0;
    transform: none;
  }
}

.if-indicador-tooltip { cursor: pointer; }