/* 
    Mini componentes miscelaneos para funciones especificas
    Lunes, 20 de Mayo 2024
    @Diego Alvarez
*/

/* taqhecito en "superindice" para quitar un elemento span en inventarioList por ejemplo*/
.remove-icon {
    cursor: pointer;
    margin-left: 5px; /* Espacio entre el texto y el ícono */
    font-size: 0.7em; /* Ajuste del tamaño del superíndice */
    vertical-align: inherit; /* Alinearlo como superíndice */
    padding: 0em 0.4em 0.2em 0.4em; /* Ajuste del padding para parecer un botón */
    border-radius: 0.2em; /* Bordes redondeados */
    color: white;
    background-color: #DC3545;
}

/* Estilo para botones que van avcompañados de un icono de font-awesome */

/* Para el icono como tal sol aumentamos el tamaño de este */
button.btn-fa-icon > i{
    font-size: 1.6em;
}


/* Palomita azul, para senalar un cargo activo y aplicado */
.checked-icon {
    cursor: pointer;
    margin-left: 5px; /* Espacio entre el texto y el ícono */
    font-size: 0.9em; /* Ajuste del tamaño del texto */
    vertical-align: inherit; /* Alineacion*/
    padding: 0.2em 0.6em; /* Ajuste del padding para crear un círculo */
    border-radius: 50%; /* Bordes completamente redondeados para un círculo */
    color: white;
    background-color: #007BFF; /* Color de fondo azul */
    display: inline-block;
    text-align: center;
}

.checked-icon::before {
    content: "✓"; /* Palomita */
}

/* Para bloquear la interaccion con el contenido de un div */
.locked {
    pointer-events: none; /* Deshabilita interacción */
    opacity: 0.5;        /* Cambia apariencia visual (opcional) */
}

/* Tooltip custom para 'El ojo chismoso'
    Agosto 2023
    Diego Alvarez
*/

.hidden{
    display: none; 
}

.custom-hover:hover .fas {
    color: #FFFFFF !important; /* Cambia el color del icono fas de un boton al pasar el ratón */
}  

.div-tip {
    position:relative;
    cursor:help;
}

.div-tip .tip-content {
    position:absolute;
    top:-10px; 
    right:275px;
    width:200px;
    margin-right:-220px;
    padding:10px;
    color:#000;
    background:#F7F7F7;
    -webkit-box-shadow:2px 2px 5px #aaa;
       -moz-box-shadow:2px 2px 5px #aaa;
            box-shadow:2px 2px 5px #aaa;
    /*opacity:0;*/
    -webkit-transition:opacity 250ms ease-out;
       -moz-transition:opacity 250ms ease-out;
        -ms-transition:opacity 250ms ease-out;
         -o-transition:opacity 250ms ease-out;
            transition:opacity 250ms ease-out;
}
    
.div-tip .tip-content:before {
    content:' '; 
    position:absolute;
    top:17%;
    left:200px; 
    width:0;
    height:0;
    margin-top:-8px; 
    border:8px solid transparent;
    border-left-color:#F7F7F7;
}