.input-field,.input-fieldxd {
        position: relative;
        width: 100%;
    }

    .input-field input,.input-fieldxd input,
    .input-field select {  /* Aplica los mismos estilos a input y select */
        width: 100%;
        height: 3em;
        border-radius: 6px;
        font-size: 18px;
        padding: 0 12px;
        border: 2px solid darkred;
        background: transparent;
        color: #000;
        outline: none;
    }


    .input-field textarea{  /* Aplica los mismos estilos a input y select */
        width: 100%;
        height: 6em;
        border-radius: 6px;
        font-size: 18px;
        padding: 10px 12px;
        border: 2px solid darkred;
        background: transparent;
        color: #000;
        outline: none;
    }



    .input-field label {
        position: absolute;
        top: 50%;
        left: 10px; /* Asegura que el label no se quede pegado al borde */
        transform: translateY(-50%);
        color: darkred;
        font-size: 19px;
        pointer-events: none;
        transition: 0.3s ease;
    }

    .input-field input:focus ~ label,
    .input-field textarea:focus ~ label,
    .input-field input:valid ~ label {
        top: 0;
        left: 10px;
        font-size: 16px;
        padding: 0 4px;
        background: #fff;
    }


/* Agregar el estilo para el input readonly */
.input-field input[readonly] ~ label{
    top: 0;
    left: 10px;
    font-size: 16px;
    padding: 0 4px;
    background: #fff;
    color: darkred;
}