@import "fuentes.css";
@import "colores.css";

:root {
    --bs-border-radius: 10px;
}

input {
    height: 56px;
    border-radius: 10px;
}

/* Chrome Safari Edge */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.fs-12 {
    font-size: 12px;
}

#logo_rotoplas {
    width: 173px;
}


/* ==============================================================
 * PCP FORM
 * ============================================================== */
#pcp_form input[type="number"] {
    transition: all ease .3s;
    background-color: #407EC9;
    color: #fff;
}
#pcp_form input:placeholder-shown {
    background-color: #fff;
}
#pcp_form input:disabled {
    background-color: #f8f8f8;
}

#pcp_form_submit {
    display: inline-block;
    box-sizing: border-box;
    width: 230px;
    height: 49px;
    border: none;
    border-radius: 2rem;
    outline: 4px solid rgba(0, 156, 222, .35);
    background-color: #009cde;
    border-color: #009bde52;
    color: #fff;
    transition: all ease .3s;
}
#pcp_form_submit:disabled {
    outline-color: rgba(239, 239, 239, .5);
    background-color: rgba(239, 239, 239, 1);
    color: grey;
}

/* #pcp_form #porcentaje_agua_red:placeholder-shown + .porcentaje_agua_wrapper {
    background-color: red;
} */



.porcentaje_agua_wrapper {
    background-color: #407EC9;
    color: #fff;

    transition: all ease .3s;

    padding: 0 .75rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.porcentaje_agua_wrapper:has(input:placeholder-shown) {
    background-color: #fff;
    color: inherit;
}
.porcentaje_agua_wrapper:has(input:disabled) {
    background-color: #f8f8f8;
}
.porcentaje_agua_wrapper:has(input:focus) {
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.porcentaje_agua {
    width: 50%;
}

#porcentaje_agua_red,
#porcentaje_agua_pipa {
    border: none;
    padding: 0;
}
#porcentaje_agua_red:focus,
#porcentaje_agua_pipa:focus {
    /* box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); */
    box-shadow: none;
}

.origen_agua_cuadro {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: grey;
}
.origen_agua_cuadro._red,
.porcentajes_agua_barra_red {
    background-color: #002554;
}
.origen_agua_cuadro._pipa,
.porcentajes_agua_barra_pipa {
    background-color: #049BD5;
}
.origen_agua_cuadro._otro,
.porcentajes_agua_barra_otro {
    background-color: #8BD2F4;
}

#porcentajes_agua {
    height: 20px;
    background-color: #EEE;
    border-radius: 2rem;
    overflow: hidden;
}
.porcentajes_agua_barra {
    width: 50%;
    transition: all ease .3s;
}


/* ==============================================================
 * CONTACTO FORM
 * ============================================================== */
/* #pcp_form_contact_submit input[type="number"] {
    transition: all ease .3s;
    background-color: #407EC9;
    color: #fff;
} */
#pcp_form_contact input:placeholder-shown {
    background-color: #FBFBFB;
}

#pcp_form_contact_submit {
    display: inline-block;
    box-sizing: border-box;
    width: 230px;
    border-radius: 32px;
    background: #009cde;
    border: 4px solid #67D2FF;
    color: #fff;
    transition: all ease .3s;
}
#pcp_form_contact_submit:hover {
    background: #002554;
}
#pcp_form_contact_submit:disabled {
    border-color: rgba(239, 239, 239, .5);
    background-color: rgba(239, 239, 239, 1);
    color: grey;
}


/* ==============================================================
 * VENTANA INCIAL
 * ============================================================== */
#ventana_inicial {
    background: url(../images/ventana-incial-fondo.png) no-repeat #009cde;
    background-size: cover;
}

/* ==============================================================
 * LIGHTBOX
 * ============================================================== */
#pcp_lightbox_wrapper {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 80%);;
}

#pcp_lightbox_content {
    width: 50%;
    background-color: #fff;
}

#pcp_lightbox_close {
    cursor: pointer;
}
#pcp_lightbox_close div svg {
    transition: all ease .3s;
    fill: #009cde;
}
#pcp_lightbox_close:hover div svg {
    fill: #002554;
}


/* ==============================================================
 * RECOMENDACION
 * ============================================================== */
#ventana_recomendacion {
    padding-top: 1rem;
    padding-bottom: 3rem;
}

#recomendacion_contenedor {
    border-radius: 20px;
}

.recomendacion_descargar {
    display: inline-block;
    box-sizing: border-box;
    width: 230px;
    padding: 1rem;
    border-radius: 32px;
    background: #009cde;
    border: 4px solid #67D2FF;
    color: #fff;
    transition: all ease .3s;
}
.recomendacion_descargar:hover {
    background: #002554;
}


/* ==============================================================
 * VALIDATE
 * ============================================================== */
.error {
    color: red;
}