/* ======================================================
   EMPLEO IA DESIGN SYSTEM
   INPUT
====================================================== */

.input{

    width:100%;

    padding:14px 18px;

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    background:var(--surface);

    color:var(--text);

    font-size:var(--font-md);

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

}

.input::placeholder{

    color:var(--text-light);

}

.input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.input:disabled{

    background:#f3f4f6;

    cursor:not-allowed;

    opacity:.7;

}