/* ================================================================
   TARJETAS_EMPLEO.CSS
   /public_html/css/tarjetas_empleo.css
================================================================ */

/* ── GRID ────────────────────────────────────────────────────── */
.browse-section            { overflow-x: hidden; }
.browse-section .container { overflow-x: hidden; max-width: 100%; }
.row.view-group            { margin-left: -6px; margin-right: -6px; overflow: hidden; }
.row.view-group .lg-item   { padding-left: 6px; padding-right: 6px; margin-bottom: 14px; }

/* ── TARJETA ─────────────────────────────────────────────────── */
.emp-card {
    background:     #fff;
    border:         1.5px solid #e2e8f0;
    border-radius:  12px;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    height:         100%;
    width:          100%;
    max-width:      100%;
    box-shadow:     0 1px 3px rgba(0,0,0,.06);
    transition:     border-color .2s, box-shadow .2s, transform .2s;
}
.emp-card:hover {
    border-color: rgba(37,99,235,.25);
    box-shadow:   0 6px 20px rgba(37,99,235,.10);
    transform:    translateY(-2px);
}

/* ── CABECERA ────────────────────────────────────────────────── */
.emp-card-head {
    display:        flex;
    flex-direction: row !important;
    align-items:    center !important;
    flex-wrap:      nowrap !important;
    gap:            10px;
    padding:        13px 14px 10px;
    border-bottom:  1px solid #f1f5f9;
}
.emp-logo {
    width:           44px;
    min-width:       44px;
    height:          44px;
    border-radius:   8px;
    background:      #f8fafc;
    border:          1px solid #e2e8f0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         4px;
    flex-shrink:     0;
}
.emp-logo img { width: 100%; height: 100%; object-fit: contain; }

.emp-meta { flex: 1; min-width: 0; }

.emp-empresa {
    display:       block;
    font-size:     12.5px;
    font-weight:   700;
    color:         #2563eb;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.emp-depto {
    font-size:   11.5px;
    color:       #64748b;
    display:     inline-flex;
    align-items: center;
    gap:         4px;
}
.emp-depto i { font-size: 9px; color: #2563eb; }

.emp-tipo {
    font-size:     10px;
    font-weight:   700;
    color:         #fff;
    border-radius: 20px;
    padding:       3px 8px;
    white-space:   nowrap;
    flex-shrink:   0;
}

/* ── CUERPO ──────────────────────────────────────────────────── */
.emp-body { padding: 12px 14px 10px; flex: 1; }

.emp-puesto { margin: 0 0 5px; }
.emp-puesto a {
    font-size:    14.5px;
    font-weight:  700;
    color:        #0f172a;
    text-decoration: none;
    line-height:  1.3;
    display:      -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:     hidden;
    word-break:   break-word;
}
.emp-puesto a:hover { color: #2563eb; }

.emp-desc {
    font-size:    12.5px;
    color:        #64748b;
    line-height:  1.55;
    margin:       0 0 9px;
    display:      -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:     hidden;
    word-break:   break-word;
}

/* ── PILLS ───────────────────────────────────────────────────── */
.emp-pills {
    display:        flex !important;
    flex-direction: row !important;
    flex-wrap:      wrap !important;
    gap:            5px;
    align-items:    center;
}
.emp-pill {
    font-size:     11px;
    font-weight:   600;
    display:       inline-flex !important;
    align-items:   center;
    gap:           4px;
    padding:       3px 9px;
    border-radius: 20px;
    flex:          0 0 auto !important;
    width:         auto !important;
    white-space:   nowrap;
}
.emp-pill i { font-size: 9px; }

.emp-pill-sal     { background: rgba(37,99,235,.07);  color: #1d4ed8; border: 1px solid rgba(37,99,235,.18); }
.emp-pill-fecha   { background: rgba(100,116,139,.07);color: #475569; border: 1px solid rgba(100,116,139,.15); }
.emp-pill-vencida { background: rgba(239,68,68,.07);  color: #dc2626; border: 1px solid rgba(239,68,68,.18); }
.emp-pill-pronto  { background: rgba(245,158,11,.08); color: #d97706; border: 1px solid rgba(245,158,11,.22); }

/* ── PIE — SIEMPRE EN FILA ───────────────────────────────────── */
.emp-foot {
    display:        flex !important;
    flex-direction: row !important;
    align-items:    center !important;
    flex-wrap:      nowrap !important;
    gap:            6px;
    padding:        10px 14px;
    border-top:     1px solid #f1f5f9;
}

.emp-btn-aplicar {
    flex:            1 1 auto !important;
    min-width:       0 !important;
    width:           auto !important;
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    height:          34px;
    padding:         0 12px;
    background:      #2563eb;
    color:           #fff !important;
    border:          none;
    border-radius:   8px;
    font-size:       12px;
    font-weight:     700;
    text-decoration: none !important;
    white-space:     nowrap;
    cursor:          pointer;
    overflow:        hidden;
    transition:      background .2s;
}
.emp-btn-aplicar:hover { background: #1d4ed8; }

.emp-btn-ver {
    flex:            0 0 auto !important;
    width:           auto !important;
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    height:          34px;
    padding:         0 12px;
    background:      #fff;
    color:           #475569 !important;
    border:          1.5px solid #e2e8f0;
    border-radius:   8px;
    font-size:       12px;
    font-weight:     600;
    text-decoration: none !important;
    white-space:     nowrap;
    cursor:          pointer;
    transition:      border-color .2s, color .2s;
}
.emp-btn-ver:hover { border-color: #2563eb; color: #2563eb !important; }

.emp-btn-fav {
    flex:            0 0 34px !important;
    width:           34px !important;
    min-width:       34px !important;
    height:          34px;
    background:      #fff;
    color:           #94a3b8;
    border:          1.5px solid #e2e8f0;
    border-radius:   8px;
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    font-size:       13px;
    padding:         0;
    transition:      background .2s, border-color .2s, color .2s;
}
.emp-btn-fav:hover,
.emp-btn-fav.guardado {
    background:   #fef2f2;
    border-color: #ef4444;
    color:        #ef4444;
}

/* ── ESTADO VACIO ────────────────────────────────────────────── */
.emp-empty {
    text-align:    center;
    padding:       60px 20px;
    background:    #fff;
    border-radius: 14px;
    border:        1.5px solid #e2e8f0;
    margin:        20px 0;
}
.emp-empty i         { font-size: 2.8rem; color: #94a3b8; margin-bottom: 14px; opacity: .5; display: block; }
.emp-empty-title     { font-size: 17px; font-weight: 700; color: #1e293b; margin: 0 0 7px; }
.emp-empty-text      { font-size: 14px; color: #64748b; margin: 0; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 991px) {
    .emp-card:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
}

@media (max-width: 767px) {
    .emp-logo            { width: 38px; min-width: 38px; height: 38px; }
    .emp-btn-aplicar     { font-size: 11.5px; padding: 0 10px; }
    .emp-btn-ver         { font-size: 11.5px; padding: 0 9px; }
    .lg-item {
        flex:      0 0 100% !important;
        max-width: 100% !important;
        width:     100% !important;
    }
    .emp-card {
        max-width: 100% !important;
        width:     100% !important;
    }
}

@media (max-width: 575px) {
    /* Cabecera — forzar fila */
    .emp-card-head  { padding: 11px 12px 8px !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; }
    /* Cuerpo */
    .emp-body       { padding: 10px 12px 8px; }
    .emp-puesto a   { font-size: 14px; }
    .emp-desc       { font-size: 12px; }
    /* Pills — forzar fila */
    .emp-pills      { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; }
    .emp-pill       { flex: 0 0 auto !important; width: auto !important; padding: 3px 8px; font-size: 10.5px; }
    /* Pie — forzar fila con !important para ganar a cualquier otro CSS */
    .emp-foot       { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; padding: 9px 12px !important; gap: 5px !important; }
    .emp-btn-aplicar{ flex: 1 1 auto !important; width: auto !important; padding: 0 8px !important; font-size: 11px !important; }
    .emp-btn-ver    { flex: 0 0 auto !important; width: auto !important; padding: 0 8px !important; font-size: 11px !important; }
    .emp-btn-fav    { flex: 0 0 30px !important; width: 30px !important; min-width: 30px !important; height: 30px !important; font-size: 12px !important; }
}

@media (max-width: 380px) {
    .emp-btn-aplicar { font-size: 10.5px !important; padding: 0 6px !important; }
    .emp-btn-ver     { font-size: 10.5px !important; padding: 0 5px !important; }
    .emp-btn-fav     { flex: 0 0 28px !important; width: 28px !important; min-width: 28px !important; height: 28px !important; }
}

/* ── UTILIDADES ──────────────────────────────────────────────── */
.bkd-pm { list-style: none; margin: 0; padding: 0; }