/* inputs */

/* IMPORTANTE */

/* inputNumber -> se aplica en el styleClass de <inputNumber> */
/* <p:inputNumber styleClass="input-orange"/> */

/* inputText o password -> se aplica en un contenedor superior al <inputText> */
/*
    <p:outputPanel styleClass="input-orange">
        <p:inputText/>
    </p:outputPanel>
*/

/*-------  INPUTS BASICOS  --------*/

/*-- AJUSTES GENERALES --*/
.input-base .ui-inputfield{
    width: 15rem !important;
    border-radius: .5rem !important;
    padding: .75rem !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Efecto de transición */
}

/*-- AJUSTES ESPECIFICOS --*/

.input-orange .ui-inputfield:hover,
.input-orange .ui-inputfield:focus{
    border-color: var(--color-orange) !important;
    box-shadow: 0 0 0 .05rem var(--color-orange) !important;
}

.input-lightblue .ui-inputfield:hover,
.input-lightblue .ui-inputfield:focus{
    border-color: var(--color-lightblue) !important;
    box-shadow: 0 0 0 .05rem var(--color-lightblue) !important;
}

/*-------- TEXT AREA --------*/

/*-- AJUSTES GENERALES --*/
.text-area-base .ui-inputfield{
    width: 15rem !important;
    border-radius: .25rem !important;
    padding: .5rem !important;
    line-height: 1.25;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Efecto de transición */
}

/* text area scrolling */

/* Solo funciona para Firefox */
@-moz-document url-prefix()  {
    .textarea {
        scrollbar-width: thin;
        scrollbar-color: #666 #f1f1f1;
    }
}

/* chromium */

/* Estilo del fondo de la barra de desplazamiento */
textarea::-webkit-scrollbar {
    width: 1rem;
    height: 1rem;
}

/* Estilo del track (pista) de la barra de desplazamiento */
textarea::-webkit-scrollbar-track {
    border-radius: 0 .5rem .5rem 0 !important;
    background-color: var(--color-white-bold); /* Color de fondo de la pista */
}

/* Estilo del thumb (el bloque que se mueve dentro de la barra) */
textarea::-webkit-scrollbar-thumb {
    background-color: #777; /* Color del bloque */
    border-radius: 1rem; /* Bordes redondeados */
    border: 3px solid var(--color-white-bold); /* Borde del bloque */
}

/* Estilo del thumb al hacer hover */
.textarea::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Cambia el color al pasar el cursor */
}

/*-- AJUSTES ESPECIFICOS --*/

.text-area-orange .ui-inputfield:hover,
.text-area-orange .ui-inputfield:focus{
    border-color: var(--color-orange) !important;
    box-shadow: 0 0 0 .05rem var(--color-orange) !important;
}

.text-area-lightblue .ui-inputfield:hover,
.text-area-lightblue .ui-inputfield:focus{
    border-color: var(--color-lightblue) !important;
    box-shadow: 0 0 0 .05rem var(--color-lightblue) !important;
}

/*--------- FLOATING INPUTS  ----------*/

/* IMPORTANTE */

/* NOTA: si hay actualizaciones ajax en la pagina y el nuevo render tiene un floating input
            hay que poner en el oncomplete del disparador del ajax initFloatingLabels();*/

/* <p:commandButton value="Actualizar" action="" oncomplete="initFloatingLabels();"/> */

/* en ambos se crea un contenedor que dentro tiene el inputNumber o inputText seguido de un label */
/* lo que varia son las clases donde se aplican */

/* inputNumber

-> se aplica en el styleClass del contenedor
    <p:outputPanel styleClass = "input-orange-floating-container">

-> se aplica en el styleClass del input <inputNumber>
    <p:inputNumber styleClass="input-orange-floating"/>

-> se aplica en el styleClass del label <label>
    <label styleClass = "input-orange-floating-label">

/* inputText o password
/*

-> se aplica en el styleClass del contenedor
    <p:outputPanel styleClass = "input-orange-floating-container input-orange-floating">

-> se aplica en el styleClass del label <label>
    <label class = "input-orange-floating-label">

*/

/*-- AJUSTES GENERALES --*/

/* contenedor del input y label */
.input-base-floating-container{
    position: relative;
    display: inline-block;
}

/* input */
.input-base-floating .ui-inputfield{
    border-radius: .5rem;
    background: none;
    padding: .5rem;
    font-size: 1rem;
    transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.input-base-floating::placeholder{
    color: transparent; /* esconde el placeholder original */
}

/* label que actua como placeholder inicialmente y luego se desplaza */
.input-base-floating-label {
    font-size: 1rem !important;
    height: 1.25rem !important;
    display: flex;
    align-items: center;
    position: absolute;
    left: 1rem;
    bottom: 1.6rem;
    pointer-events: none;
    transform: translateY(1rem);
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* con focus o contenido se desplaza */
.input-base-floating-container.focused .input-base-floating-label{
    transform: translateY(-10%) scale(0.8);
    padding: 0 .2em;
    letter-spacing: .05rem;
}

/*-- AJUSTES ESPECIFICOS --*/

/*-- ORANGE --*/
.input-orange-floating .ui-inputfield{
    border: solid 2px var(--color-orange);
}

/* fixea el borde en hover y focus */
.input-orange-floating .ui-inputfield:hover,
.input-orange-floating .ui-inputfield:focus{
    border-color: var(--color-orange) !important;
}

/* con focus o contenido se desplaza */
.input-orange-floating-container.focused .input-orange-floating-label{
    background-color: var(--color-white-bold) !important;
    color: var(--color-orange) !important;
}

/*-- LIGHT BLUE --*/

.input-lightblue-floating .ui-inputfield{
    border: solid 2px var(--color-lightblue);
}

/* fixea el borde en hover y focus */
.input-lightblue-floating .ui-inputfield:hover,
.input-lightblue-floating .ui-inputfield:focus{
    border-color: var(--color-lightblue) !important;
}

/* con focus o contenido se desplaza */
.input-lightblue-floating-container.focused .input-lightblue-floating-label{
    background-color: var(--color-white-bold) !important;
    color: var(--color-lightblue) !important;
}