body {
}

/*===========================
 Input Select Personalizado
============================*/
.select-pro-wrapper {
    position: relative;
    width: auto;
}

.select-pro {
    appearance: none;
    width: 100%;
    padding: 7px 14px;
    padding-right: 36px;
    border-radius: 5px;
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    /* Hover suave */
    .select-pro:hover {
        border-color: #00A4DC;
    }

    /* Focus con borde animado tipo Bunifu */
    .select-pro:focus {
        outline: none;
        border-color: #00A4DC;
        box-shadow: 0 0 0 3px rgba(0,164,220,0.25);
    }

/* Icono flechita custom */
.select-pro-wrapper::after {
    content: "\f282"; /* Bootstrap icon: chevron-down */
    font-family: "Bootstrap-icons";
    position: absolute;
    right: 12px;
    top: 50%;
    font-size: 0.88rem;
    color: #555;
    pointer-events: none;
    transform: translateY(-50%);
    transition: color 0.2s ease;
}

/* Cambia icono al hacer hover */
.select-pro:hover + .select-pro-wrapper::after,
.select-pro-wrapper:hover::after {
    color: #00A4DC;
}

/*===============================
    Input File Personalizado
================================*/
input[type=file] {
    width: 100%;
    border-radius: 5px;
}

    input[type=file]::file-selector-button {
        margin: 4px;
        margin-right: 20px;
        border: none;
        background: #084cdf;
        padding: 5px 20px;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
        transition: background .2s ease-in-out;
    }

        input[type=file]::file-selector-button:hover {
            background: #0d45a5;
        }