form .error, .error {
            color: red;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
.bg-from{
            background-color: var(--ColorWhite);
            padding: 30px 20px ;
            margin-top: 40px;
            border-radius: 10px;
        }
        .column{
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 20px;
        }
        .flex-input-dos{
            width: 50%;
            display: flex;
            gap: 10px;
        }
        .input-100{
            width: 100%;
        }

        .column .input-100{
            width: 100%;
        }

        .flex-libro-reclamo{
            display: flex;

            align-items: center;
            gap: 10px;
            padding-bottom: 15px;

        }

        .flex-libro-reclamo h2{
            color: var(--color-celeste);
        }
        .img-reclamo-chico{


            width: 50px;
            height: 30px;
            background-color: var(--color-celeste);
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .img-reclamo-chico img{
            width: 100%;
            height: auto;
            object-fit: cover;
            overflow: hidden;
            padding: 4px;
        }


        .flex-input-reclamo{
        display: flex;

        align-items: center;
        gap: 20px;
        padding: 15px 0px;
    }

    .input-reclamo{
        width: 50%;
    }
    .input-reclamo-texarea{
        width: 100%;

    }
    .input-reclamo input, select, textarea{
        width: 100%;
        border: none;
        outline: none;
        border: 1px solid var(--borde-form);
        padding: 12px 10px;
        border-radius: 5px;
        margin-top: 5px;

        color: var(--text-form);
    }

    .flex-input-reclamo .menor{
        width: 34%;
    }
    .flex-input-reclamo .mayor{
        width: 70%;
    }


    .dato-title {
        position: relative;
            font-weight: 500;
        font-size: 18px;
        color: var( --text);
        margin-top: 30px;

    }

    /* Barra vertical */
    /*.dato-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 8px;
        background-color: var(--AzulClaro);

    }*/









    .input-reclamo label{
        color: var(--text-form);

    }

    .input-reclamo span{
        color: #F0080F;
    }

    .file-description{
        border: none;
        display: flex;
        flex-direction: column;
        padding: 15px 0px;
    }

    .file-description label{
        color: var(--text-form);

    }
    .file-description input{
        margin-top: 10px;

    }
    .flex-button-form .enviar{
        width: 100%;
        transition: all ease .3s;
        text-transform: capitalize;
        font-size: 16px;
        padding: 12px 0px;
        border: none;
        border-radius: 15px;
        background-color: var(--color-celeste);
        border: 2px solid var(--color-celeste) ;
        color: var(--ColorWhite);
        cursor: pointer;
        font-size: 16px;
        margin-top: 20px;
    }
    .flex-button-form .enviar:hover{
        background-color:#3BB8DB;
;
        color: var(--ColorWhite);
        border: 2px solid #3BB8DB ;
    }

    .texto-libro-reclamo{
        color: var(--text-form);

        font-size: 18px;
        padding-bottom: 30px;
    }

    .input-reclamo-texarea textarea{
         width: 100%;         /* o la medida que quieras */
        height: 100px;       /* tamaño fijo vertical */
        resize: none;        /* evita que el usuario deforme el tamaño */
        overflow-y: auto;    /* aparece scroll cuando se llena */
        padding: 10px;


    }



    /**/
    /**/

    @media (max-width:1000px ) {
     .flex-input-reclamo{
        flex-direction: column;
     }
     .input-reclamo{
        width: 100%;
     }
     .flex-input-dos{
        width: 100%;
     }
    }


    @media (max-width:600px ) {
     .flex-input-reclamo{
        flex-direction: column;
        gap: 30px;
     }
     .input-reclamo, .flex-input-reclamo .menor, .flex-input-reclamo .mayor{
        width: 100%;
     }
     .flex-input-dos{
        width: 100%;
        flex-direction: column;
    }
    }