#rml-banner {
  position: fixed;
  left: -320px;
  width: 300px;
  height: 100px;
  background: rgba(17,17,17,0.95);
  color: #fff;
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  transition: left 0.6s ease, opacity 0.4s ease;
  z-index: 999999;
  overflow: hidden;
}
#rml-banner.show { left: 0; } 
#rml-banner img { width: 80px; height: 80px; border-radius:6px; object-fit:cover; }
#rml-banner .rml-text h3 { margin:0; font-size:14px; }
#rml-banner .rml-text span { font-size:12px; opacity:0.85; }
.rml-fade { transition: opacity 0.6s ease; }
/* Ajuste general del banner */
#rml-live-banner {
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: hidden;
}

/* Ajuste de imagen dentro del banner */
#rml-live-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Reducir tamaño del banner a 50% en móviles (IGNORAR ESTAS REGLAS) */
@media (max-width: 768px) {
    #rml-banner {
        transform: scale(0.5);
        transform-origin: bottom left;
    }

    /* Para que no deje espacio extra */
    #rml-banner-wrapper,
    #rml-banner-container {
        height: auto !important;
    }
}

/* ========================================================= */
/* 📱 RESPONSIVE – ZONA CORREGIDA PARA EL TAMAÑO Y POSICIÓN */
/* ========================================================= */

@media (max-width: 768px) {

    #rml-banner {
        transform: scale(0.8) !important;   /* ESCALA A 80% (ANTES 55%) */
        transform-origin: bottom left !important;
        left: -240px !important;             /* Ajuste de posición */
        bottom: 120px !important;            /* Mantiene la posición sobre el footer */
    }

    #rml-banner img {
        width: 70px !important; /* Imagen más grande */
        height: 70px !important;
    }

    #rml-banner .rml-text h3 {
        font-size: 14px !important;
    }

    #rml-banner .rml-text span {
        font-size: 12px !important;
    }
}

/* 📱 MÓVILES MUY PEQUEÑOS (max-width: 480px) */
@media (max-width: 480px) {

    #rml-banner {
        transform: scale(0.7) !important; /* ESCALA A 70% (ANTES 45%) */
        left: -210px !important; /* Ajuste de posición */
        bottom: 120px !important;
    }

    #rml-banner img {
        width: 65px !important; /* Imagen más grande */
        height: 65px !important;
    }

    #rml-banner .rml-text h3 {
        font-size: 13px !important; 
    }
}