/* Cambiar color de fondo del contenedor del icono (si tiene fondo) */
.SearchContainer__searchIcon {
    background-color: #c5021e !important; 
    border-radius: 90 !important; /* lo hace circular */
}

/* Cambiar el color del icono SVG (relleno) */
.SearchContainer__searchIcon svg {
    fill: #ffffff !important;  /* color del ícono */
    stroke: #ffffff !important;  /* por si el SVG usa trazo */
}

/* Si no responde, forzar también el <use> */
.SearchContainer__searchIcon svg use {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Botón Submit a Ticket (estado normal) */
button, .SubmitTicketBtn {
    background-color: #888888 !important;  
    color: #ffffff !important;
    border-radius: 50 !important;           
    border: none !important;
    transition: background-color 0.3s ease-in-out; /* efecto suave */
}

/* Botón Submit a Ticket (hover) */
button:hover, .SubmitTicketBtn:hover {
    background-color: #c5021e !important;  
    color: #ffffff !important;
  }

/* Botón de la flecha (estado normal) */
.AppContainer__backToTop {
    background-color: #888888 !important;  
    border-radius: 50 !important;           
    transition: background-color 0.3s ease-in-out;
}

/* Color del ícono de la flecha */
.AppContainer__backToTop svg,
.AppContainer__backToTop svg use {
    fill: #ffffff !important;  /* flecha blanca */
}

/* Botón de la flecha (hover) */
.AppContainer__backToTop:hover {
    background-color: #c5021e !important;  /* azul más claro en hover */
}

/* Ícono de flecha en hover */
.AppContainer__backToTop:hover svg,
.AppContainer__backToTop:hover svg use {
    fill: #ffffff !important;  /* mantiene flecha blanca */
}
/* Forzar color rojo corporativo en la lupa de búsqueda */
svg.Icon__icon.Icon__brand[alt="Search"],
svg.Icon__icon.Icon__brand[alt="Search"] use {
    fill: #c5021e !important;

    color: #c5021e !important;
}


/* Forzar color rojo corporativo solo en Reset y Login here */
a.Signin__userLink.commonStyle__zt3Brand[data-id="reset_pwd"],
a.Signin__userLink.commonStyle__zt3Brand[data-id="agent_signin"] {
    color: #c5021e !important;
    
}

/* También en estado visitado y hover */
a.Signin__userLink.commonStyle__zt3Brand[data-id="reset_pwd"]:visited,
a.Signin__userLink.commonStyle__zt3Brand[data-id="agent_signin"]:visited,
a.Signin__userLink.commonStyle__zt3Brand[data-id="reset_pwd"]:hover,
a.Signin__userLink.commonStyle__zt3Brand[data-id="agent_signin"]:hover {
    color: #c5021e !important;
}

svg[alt="Knowledge Base"],
svg[alt="Tickets"] {
    filter: hue-rotate(340deg) saturate(500%) brightness(90%);
}

/* Login here en la pantalla Forgot Password */
a.ForgetPasswordContainer__userLink.commonStyle__zt3Brand[data-id="agent_login"] {
    color: #c5021e !important;
}

/* Asegurar que no cambie al pasar el cursor ni al ser visitado */
a.ForgetPasswordContainer__userLink.commonStyle__zt3Brand[data-id="agent_login"]:hover,
a.ForgetPasswordContainer__userLink.commonStyle__zt3Brand[data-id="agent_login"]:visited {
    color: #c5021e !important;
}
/* Cambiar color solo del texto Attach a file */
.FileUpload__userLink.commonStyle__zt3Brand {
    color: #c5021e !important;
}

/* Si quieres que no cambie al pasar el cursor */
.FileUpload__userLink.commonStyle__zt3Brand:hover,
.FileUpload__userLink.commonStyle__zt3Brand:visited {
    color: #c5021e !important;
}
/* Borde del círculo */
.FileUpload__attachPin.commonStyle__zt3BrandBorder {
    border-color: #c5021e !important;
}

/* Ícono del clip */
.FileUpload__attachPin svg,
.FileUpload__attachPin svg use {
    stroke: #c5021e !important;
    fill: #c5021e !important;
}