/* ==========================================================================
   tutrabajo-visor-ofertas.css — CUSTOM: responsive 01 (documento «Cambios
   responsive tuTrabajo», 10/11/2026, jeferson)

   Un solo aspecto para TODAS las tarjetas de oferta (.featuredlist .jobint):
   buscador y sus «Destacadas», inicio, ficha de oferta (relacionadas), panel del
   candidato (recomendadas / últimas candidaturas), mis candidaturas y favoritas.
   Modelo: la tarjeta «Destacadas» del buscador, con la mitad del hueco que había
   encima de la caja verde (48px -> 24px en móvil).

   Se carga la ÚLTIMA en layouts/app.blade.php. Los selectores repiten clase
   (.featuredlist.featuredlist / .jobint.jobint.jobint) a propósito: hay reglas
   de panel con 4 clases (p. ej. .profbox .featuredlist > li.tt-dashboard-job-row
   .jobint) y estilos en línea de las vistas que, si no, ganarían.
   ========================================================================== */

/* --- Tarjeta ------------------------------------------------------------- */
html body .featuredlist.featuredlist .jobint.jobint.jobint {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 22px !important;
    padding: 18px !important;
    box-shadow: 0 8px 24px rgba(31, 41, 51, .04) !important;
}

/* --- Esquina naranja de destacada (el rayo nunca se recorta) ------------- */
html body .featuredlist.featuredlist .jobint.jobint.jobint .promotepof-badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 68px !important;
    height: 68px !important;
    background: transparent !important;
    clip-path: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
html body .featuredlist.featuredlist .jobint.jobint.jobint .promotepof-badge::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 0 68px 68px 0 !important;
    border-color: transparent #FF9F20 transparent transparent !important;
}
html body .featuredlist.featuredlist .jobint.jobint.jobint .promotepof-badge i {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    margin: 0 !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    line-height: 1 !important;
    transform: none !important;
    z-index: 3 !important;
}

/* --- Título --------------------------------------------------------------- */
html body .featuredlist.featuredlist .jobint.jobint.jobint h4,
html body .featuredlist.featuredlist .jobint.jobint.jobint h4 a {
    color: #253423 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    text-decoration: none !important;
}

/* --- Sueldo, ubicación y categoría (mismo estilo que el buscador) --------- */
html body .featuredlist.featuredlist .jobint.jobint.jobint .salary,
html body .featuredlist.featuredlist .jobint.jobint.jobint .salary strong {
    color: #64748B !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
html body .featuredlist.featuredlist .jobint.jobint.jobint .salary {
    margin: 0 0 7px !important;
}
html body .featuredlist.featuredlist .jobint.jobint.jobint > strong,
html body .featuredlist.featuredlist .jobint.jobint.jobint .tt-job-card-location {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin: 0 0 7px !important;
    color: #64748B !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
html body .featuredlist.featuredlist .jobint.jobint.jobint .tt-job-card-category {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin: 0 0 7px !important;
    color: #647161 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
html body .featuredlist.featuredlist .jobint.jobint.jobint > strong i,
html body .featuredlist.featuredlist .jobint.jobint.jobint .tt-job-card-location i,
html body .featuredlist.featuredlist .jobint.jobint.jobint .tt-job-card-category i {
    color: #24C022 !important;
    flex: 0 0 auto !important;
    margin-top: 2px !important;
}

/* --- Caja verde: fecha + empresa + logo ----------------------------------- */
html body .featuredlist.featuredlist .jobint.jobint.jobint .jobcompany {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: rgba(36, 192, 34, .10) !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
}
html body .featuredlist.featuredlist .jobint.jobint.jobint .jobcompany .ftjobcomp {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
/* fecha (primer dato de la caja) */
html body .featuredlist.featuredlist .jobint.jobint.jobint .jobcompany .ftjobcomp > span:first-child {
    color: #64748B !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
}
/* empresa */
html body .featuredlist.featuredlist .jobint.jobint.jobint .jobcompany .ftjobcomp > a,
html body .featuredlist.featuredlist .jobint.jobint.jobint .jobcompany .ftjobcomp > span:not(:first-child),
html body .featuredlist.featuredlist .jobint.jobint.jobint .jobcompany .ftjobcomp > strong {
    color: #253423 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
}
/* logo siempre a la derecha */
html body .featuredlist.featuredlist .jobint.jobint.jobint .jobcompany .company-logo {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    border: 3px solid #FFFFFF !important;
    box-shadow: 0 0 0 1px #E5E7EB !important;
    overflow: hidden !important;
}
html body .featuredlist.featuredlist .jobint.jobint.jobint .jobcompany .company-logo img,
html body .featuredlist.featuredlist .jobint.jobint.jobint .jobcompany .company-logo svg {
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    border-radius: 999px !important;
    object-fit: contain !important;
    border: 0 !important;
}

/* --- Móvil: la mitad de aire encima de la caja verde (48px -> 24px) ------- */
@media (max-width: 767px) {
    html body .featuredlist.featuredlist .jobint.jobint.jobint .jobcompany {
        margin-top: 10px !important;
    }
}