/* ==========================================================
   EMPLEO IA
   TARJETAS DE OFERTAS
   ========================================================== */

.job-card-form {
    display: block;
    width: 100%;
    margin: 0;
}

.job-card {
    position: relative;

    display: block;
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 10px 42px 10px 18px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    color: inherit;
    text-align: left;

    font: inherit;

    cursor: pointer;
    appearance: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}


/* ==========================================================
   HOVER
   ========================================================== */

   .job-card-form {
    display: block;
    width: 100%;
    margin: 0;
}

.job-card:hover {
    border-color: #cbd5e1;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    text-decoration: none;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, .06);
}


/* ==========================================================
   TARJETA SELECCIONADA
   ========================================================== */

.job-card-selected {
    border-color: #2563eb;

    background: #f8fbff;

    box-shadow:
        0 0 0 1px #2563eb,
        0 3px 10px rgba(37, 99, 235, .07);
}


/* ==========================================================
   FOCUS
   ========================================================== */

.job-card:focus {
    outline: 2px solid rgba(37, 99, 235, .22);
    outline-offset: 2px;
}


/* ==========================================================
   ESTADO DE CARGA
   ========================================================== */

.job-card[aria-busy="true"] {
    opacity: .65;
    pointer-events: none;
}


/* ==========================================================
   CONTENIDO
   ========================================================== */

.job-card-content {
    min-width: 0;
}


/* ==========================================================
   TITULO
   ========================================================== */

.job-title {
    margin: 0;
    padding: 0;

    font-size: 17px;
    font-weight: 500;

    line-height: 1.35;

    color: #1f2937;

    overflow-wrap: anywhere;
}


/* ==========================================================
   LOCALIDAD
   ========================================================== */

.job-location {
    display: flex;

    align-items: center;

    gap: 6px;

    margin: 0;

    font-size: 14px;

    line-height: 1.4;

    color: #475569;
}


.job-location-label {
    font-weight: 500;
}


/* ==========================================================
   MODALIDAD
   ========================================================== */

.job-modality {
    display: flex;

    align-items: center;

    gap: 6px;

    margin: 0;

    font-size: 14px;

    line-height: 1.4;

    color: #475569;
}


.job-modality-label {
    font-weight: 500;
}


.job-modality-value {
    font-weight: 400;

    color: #475569;
}


/* ==========================================================
   FECHA
   ========================================================== */

.job-date {
    margin: 0;

    font-size: 12px;

    line-height: 1.4;

    color: #94a3b8;
}


/* ==========================================================
   FLECHA
   ========================================================== */

.job-card-arrow {
    position: absolute;

    top: 50%;
    right: 15px;

    transform: translateY(-50%);

    font-size: 24px;
    font-weight: 300;

    line-height: 1;

    color: #cbd5e1;

    transition:
        color .18s ease,
        transform .18s ease;
}


.job-card:hover .job-card-arrow {
    color: #2563eb;

    transform:
        translate(3px, -50%);
}


/* ==========================================================
   MOVIL
   ========================================================== */

@media (max-width: 700px) {

    .job-card {
        padding: 15px 38px 15px 16px;



        border-radius: 9px;
    }


    .job-title {
        font-size: 16px;

        line-height: 1.35;
    }


    .job-location {
        font-size: 13px;
    }


    .job-modality {
        font-size: 13px;
    }


    .job-date {
        font-size: 12px;
    }
}