/* ================================================================
   /public_html/css/personal.css
   Área de cuenta Yoclink.ai — Candidatos
   ================================================================
   ORDEN en index.php:
     1. personal.css     ← este archivo
     2. gw-theme.css     ← design tokens globales
     3. tarjetas_empleo.css
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --pp-P:    #2563eb;
    --pp-P2:   #1d4ed8;
    --pp-Pli:  rgba(37,99,235,.08);
    --pp-navy: #0f172a;
    --pp-n2:   #1e293b;
    --pp-s50:  #f8fafc;
    --pp-s100: #f1f5f9;
    --pp-s200: #e2e8f0;
    --pp-s300: #cbd5e1;
    --pp-s400: #94a3b8;
    --pp-s500: #64748b;
    --pp-s600: #475569;
    --pp-s700: #334155;
    --pp-s800: #1e293b;
    --pp-s900: #0f172a;
    --pp-F:    'Plus Jakarta Sans', system-ui, sans-serif;
    --pp-hdr:  72px;   /* sobreescrito por JS con altura real */
    --pp-r:    10px;
    --pp-sh:   0 2px 12px rgba(0,0,0,.07);
}

/* ── Reset global de overflow ───────────────────────────────── */
html { overflow-x: hidden; }
body {
    overflow-x:              hidden;
    font-family:             var(--pp-F) !important;
    -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

img, video, iframe, embed, object { max-width: 100%; height: auto; }

/* ================================================================
   BROWSE — otras páginas del área personal
================================================================ */
.browse-section {
    padding:    24px 0 52px;
    min-height: calc(100vh - 140px);
}

.browse-banner {
    background:      linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius:   12px;
    padding:         18px 22px;
    margin-bottom:   18px;
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             10px;
}
.browse-banner h2 { font-size: 19px; font-weight: 700; margin: 0; color: #fff; }

/* ── Filtros ────────────────────────────────────────────────── */
.browser-job-filters {
    background:    #fff;
    border-radius: 14px;
    border:        1.5px solid #e2e8f0;
    box-shadow:    0 1px 4px rgba(0,0,0,.06);
    overflow:      hidden;
    position:      sticky;
    top:           80px;
}
.filter-heading {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 18px;
    background:      linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.filter-heading .fh-left {
    font-weight: 700; font-size: 13.5px; color: #f8fafc;
    display: flex; align-items: center; gap: 8px;
}
.filter-heading .fh-left::before {
    content: ''; width: 7px; height: 7px; background: #14b8a6;
    border-radius: 50%; animation: pulseDot 2.2s infinite; flex-shrink: 0;
}
.filter-heading .fh-right { font-size: 11px; color: #64748b; cursor: pointer; }
.filter-heading .fh-right:hover { color: #14b8a6; }

.fltr-group { padding: 12px 18px; border-bottom: 1px solid #f1f5f9; }
.fltr-group:last-of-type { border-bottom: none; }
.fltr-items-heading h6 {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .7px; color: #64748b; margin: 0 0 8px;
}
.fltr-group select,
.fltr-group input[type="text"],
.fltr-group .job-input {
    width: 100%; height: 40px; font-size: 13px;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    color: #0f172a; padding: 0 12px; background: #f1f5f9;
    transition: border-color .2s, box-shadow .2s;
    appearance: none; -webkit-appearance: none; box-sizing: border-box;
}
.fltr-group select:focus, .fltr-group input[type="text"]:focus {
    border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.1);
    background: #fff; outline: none;
}

.filter-button {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px; padding: 14px 18px 18px;
    background: #f8fafc; border-top: 1px solid #e2e8f0;
}
.btn-filtro {
    flex: 1 1 auto !important; height: 40px !important; padding: 0 16px !important;
    background: var(--pp-P) !important; color: #fff !important;
    border: none !important; border-radius: 8px !important;
    font-weight: 700 !important; font-size: 13px !important; cursor: pointer !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; transition: background .2s !important;
}
.btn-filtro:hover { background: var(--pp-P2) !important; }
.btn-filtro-secundario, .emp-btn-limpiar {
    height: 40px !important; padding: 0 16px !important;
    background: #fff !important; color: #475569 !important;
    border: 1.5px solid #e2e8f0 !important; border-radius: 8px !important;
    font-weight: 600 !important; font-size: 13px !important; cursor: pointer !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; transition: all .2s !important;
}
.btn-filtro-secundario:hover, .emp-btn-limpiar:hover {
    background: #f1f5f9 !important; border-color: #94a3b8 !important;
}
.filter-toggle-btn {
    display: none; width: 100%; height: 44px; background: #0f172a; color: #fff;
    border: none; border-radius: 10px; font-weight: 700; font-size: 13.5px;
    cursor: pointer; align-items: center; justify-content: center;
    gap: 9px; margin-bottom: 12px; transition: background .2s;
}
.filter-toggle-btn:hover { background: #1e293b; }

/* ── Nav-tabs GLOBALES (fuera del perfil) ────────────────────── */
/* Solo afectan tabs que NO estén dentro de .pp-tab-nav */
.account_tabs .nav-tabs,
.main-tabs .nav-tabs,
.jp_listing_tabs .nav-tabs {
    display: flex !important; flex-direction: row !important;
    flex-wrap: nowrap !important; overflow-x: auto !important;
    overflow-y: hidden !important; scrollbar-width: none !important;
    border-bottom: 2px solid #e2e8f0 !important;
    margin-bottom: 20px !important; width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
}
.account_tabs .nav-tabs::-webkit-scrollbar { display: none !important; }

/* ── Tarjetas de empleo ─────────────────────────────────────── */
.jp_listing_single_innner, .job-item {
    background: #fff !important; border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
    overflow: hidden !important; max-width: 100% !important;
    transition: border-color .2s, box-shadow .2s, transform .2s !important;
}
.jp_listing_single_innner:hover, .job-item:hover {
    border-color: #0d9488 !important;
    box-shadow: 0 8px 28px rgba(13,148,136,.12) !important;
    transform: translateY(-3px) !important;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(1.4); }
}

/* ================================================================
   ██ PERFIL PERSONAL ██
   Todos los estilos de la página de perfil del candidato
================================================================ */

/* ── HERO ─────────────────────────────────────────────────────
   IMPORTANTE: .pp-hero NO tiene ::after con fondo blanco.
   Eso causaba el espacio en blanco entre hero y stats bar.
───────────────────────────────────────────────────────────── */
.pp-hero {
    background:
        radial-gradient(ellipse 80% 120% at 50% 115%, rgba(37,99,235,.2) 0%, transparent 62%),
        linear-gradient(170deg, #09101f 0%, #0f172a 100%);
    padding-top: calc(var(--pp-hdr) + 36px);
    padding-bottom: 0;
    margin-bottom: 0;  /* SIN margen — stats bar va pegado */
}
@media (max-width: 767px) {
    .pp-hero { padding-top: calc(var(--pp-hdr) + 20px); }
}

.pp-hero-row {
    display: flex; align-items: flex-end; gap: 20px;
    flex-wrap: wrap; padding-bottom: 28px;
}
@media (max-width: 767px) {
    .pp-hero-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

.pp-av { position: relative; flex-shrink: 0; width: 90px; height: 90px; }
.pp-av img {
    width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
    border: 3px solid rgba(255,255,255,.15); display: block;
}
.pp-av-cam {
    position: absolute; bottom: 0; right: 0; width: 28px; height: 28px;
    border-radius: 50%; background: var(--pp-P); border: 2.5px solid var(--pp-navy);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .18s;
}
.pp-av-cam:hover { background: var(--pp-P2); }
.pp-av-cam i { font-size: 9px; color: #fff; pointer-events: none; }

.pp-hi { flex: 1; min-width: 0; padding-bottom: 22px; }
.pp-hi-name {
    font-family: var(--pp-F);
    font-size: clamp(1rem, 2.8vw, 1.45rem);
    font-weight: 800; color: #f1f5f9; margin: 0 0 4px; letter-spacing: -.025em;
}
.pp-hi-career {
    font-family: var(--pp-F); font-size: 12.5px; color: var(--pp-s400);
    margin: 0 0 10px; display: flex; align-items: center; gap: 5px;
}
.pp-hi-career i { font-size: 9px; color: var(--pp-P); }

.pp-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.pp-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
    border-radius: 20px; font-family: var(--pp-F); font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,.05); color: var(--pp-s400);
    border: 1px solid rgba(255,255,255,.09);
}
.pp-badge i { font-size: 9px; color: var(--pp-P); }
.pp-badge.ok { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.22); color: #10b981; }
.pp-badge.ok i { color: #10b981; }

.pp-prog {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 0 0; border-top: 1px solid rgba(255,255,255,.07);
    margin-top: 8px; flex-wrap: wrap;
}
.pp-prog-lbl { font-family: var(--pp-F); font-size: 11px; font-weight: 700; color: var(--pp-s600); white-space: nowrap; }
.pp-prog-track { flex: 1; min-width: 90px; height: 5px; background: rgba(255,255,255,.08); border-radius: 20px; overflow: hidden; }
.pp-prog-fill  { height: 100%; border-radius: 20px; transition: width .7s ease; }
.pp-prog-val   { font-family: var(--pp-F); font-size: 12px; font-weight: 800; white-space: nowrap; }

/* ── Stats bar — directamente bajo el hero, sin gap ───────── */
.pp-stats { background: var(--pp-n2); border-bottom: 1px solid rgba(255,255,255,.06); }
.pp-stats-row {
    display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pp-stats-row::-webkit-scrollbar { display: none; }
.pp-stat {
    display: flex; align-items: center; gap: 9px; padding: 12px 18px;
    border-right: 1px solid rgba(255,255,255,.05); flex-shrink: 0; white-space: nowrap;
}
.pp-stat:last-child { border-right: none; }
.pp-stat i { color: var(--pp-P); font-size: 12.5px; }
.pp-stat-lbl {
    display: block; font-family: var(--pp-F); font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .7px; color: var(--pp-s500);
}
.pp-stat-val { font-family: var(--pp-F); font-size: 12.5px; font-weight: 700; color: var(--pp-s400); }
@media (max-width: 767px) { .pp-stat { padding: 9px 12px; } }

/* ── Alertas ────────────────────────────────────────────────── */
.gw-alert {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border-radius: 11px; margin-bottom: 14px; border: 1.5px solid;
    font-family: var(--pp-F);
}
.gw-alert-danger  { background: rgba(239,68,68,.05);  border-color: rgba(239,68,68,.18); }
.gw-alert-info    { background: rgba(37,99,235,.05);  border-color: rgba(37,99,235,.15); }
.gw-alert-success { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.2); }
.gw-alert-ico { font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.gw-alert-danger  .gw-alert-ico { color: #ef4444; }
.gw-alert-info    .gw-alert-ico { color: var(--pp-P); }
.gw-alert-success .gw-alert-ico { color: #10b981; }
.gw-alert-body h5 { font-size: 13px; font-weight: 700; margin: 0 0 3px; color: var(--pp-s900); }
.gw-alert-body p  { font-size: 12.5px; color: var(--pp-s600); margin: 0 0 8px; line-height: 1.5; }
.gw-alert-body p:last-child { margin-bottom: 0; }
.gw-alert-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px;
    border-radius: 7px; font-family: var(--pp-F); font-size: 12px; font-weight: 700;
    border: none; cursor: pointer; text-decoration: none !important; transition: all .18s;
}
.gw-alert-info   .gw-alert-btn { background: var(--pp-P);  color: #fff !important; }
.gw-alert-info   .gw-alert-btn:hover { background: var(--pp-P2); }
.gw-alert-danger .gw-alert-btn { background: #ef4444; color: #fff !important; }
.gw-alert-danger .gw-alert-btn:hover { background: #dc2626; }

.gw-flash {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    border-radius: 9px; margin-bottom: 8px; font-family: var(--pp-F);
    font-size: 13px; font-weight: 500; border: 1px solid transparent;
}
.gw-flash.success { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.2); color: #065f46; }
.gw-flash.danger  { background: rgba(239,68,68,.07);  border-color: rgba(239,68,68,.18); color: #991b1b; }

/* ── Layout principal ───────────────────────────────────────── */
.pp-wrap { background: var(--pp-s100); padding: 20px 0 60px; overflow-x: hidden; }

.pp-grid {
    display: grid !important;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 20px;
    width: 100% !important;
    max-width: 100% !important;
}
@media (max-width: 1199px) { .pp-grid { grid-template-columns: 220px 1fr !important; } }
@media (max-width: 991px) {
    .pp-grid          { grid-template-columns: 1fr !important; gap: 16px !important; }
    .pp-sidebar       { order: 2 !important; position: static !important; width: 100% !important; max-width: 100% !important; }
    .pp-content       { order: 1 !important; width: 100% !important; max-width: 100% !important; }
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.pp-sidebar {
    display: flex; flex-direction: column; gap: 16px;
    position: sticky; top: calc(var(--pp-hdr) + 14px);
    width: 100%; max-width: 100%; min-width: 0;
}
@media (max-width: 991px) {
    .pp-sidebar { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; position: static !important; width: 100% !important; max-width: 100% !important; }
    .pp-card-full { grid-column: 1 / -1 !important; }
}
@media (max-width: 575px) { .pp-sidebar { grid-template-columns: 1fr !important; } }

.pp-card { background: #fff; border: 1.5px solid var(--pp-s200); border-radius: var(--pp-r); overflow: hidden; box-shadow: var(--pp-sh); width: 100%; max-width: 100%; min-width: 0; }
.pp-card-hd {
    padding: 10px 14px; border-bottom: 1px solid var(--pp-s100);
    display: flex; align-items: center; gap: 7px;
    font-family: var(--pp-F); font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .9px; color: var(--pp-s400);
}
.pp-card-hd i { font-size: 9px; color: var(--pp-P); }
.pp-card-bd { padding: 14px; }

.pp-donut-wrap { display: flex; flex-direction: column; align-items: center; padding: 18px 12px 14px; }
.pp-donut-av   { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--pp-s200); margin-bottom: 9px; }
.pp-donut-name { font-family: var(--pp-F); font-size: 13px; font-weight: 800; color: var(--pp-s900); margin: 0 0 2px; text-align: center; }
.pp-donut-role { font-family: var(--pp-F); font-size: 11.5px; color: var(--pp-s500); margin: 0 0 12px; text-align: center; }
.pp-donut-box  { position: relative; width: 106px; height: 106px; }
.pp-donut-svg  { width: 106px; height: 106px; display: block; transform: rotate(-90deg); }
.pp-donut-trk  { fill: none; stroke: var(--pp-s100); stroke-width: 8; }
.pp-donut-fill { fill: none; stroke-width: 8; stroke-linecap: round; }
.pp-donut-ctr  { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pp-donut-num  { font-family: var(--pp-F); font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.pp-donut-sym  { font-family: var(--pp-F); font-size: 11px; font-weight: 700; color: var(--pp-s400); }

.pp-checks { width: 100%; margin-top: 12px; }
.pp-chk {
    display: flex; align-items: center; gap: 8px; padding: 5px 0;
    border-bottom: 1px solid var(--pp-s50); font-family: var(--pp-F);
    font-size: 12px; color: var(--pp-s500);
}
.pp-chk:last-child { border-bottom: none; }
.pp-chk i { font-size: 11px; flex-shrink: 0; }
.pp-chk.on { color: #10b981; } .pp-chk.on i { color: #10b981; }
.pp-chk.off i { color: var(--pp-s200); }

.pp-irow { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--pp-s50); }
.pp-irow:last-child { border-bottom: none; }
.pp-iico { width: 26px; height: 26px; border-radius: 7px; background: var(--pp-Pli); color: var(--pp-P); display: flex; align-items: center; justify-content: center; font-size: 9.5px; flex-shrink: 0; }
.pp-ilbl { display: block; font-family: var(--pp-F); font-size: 9px; font-weight: 600; color: var(--pp-s400); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 1px; }
.pp-ival { font-family: var(--pp-F); font-size: 12.5px; font-weight: 600; color: var(--pp-s800); word-break: break-word; }

.pp-cv-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--pp-s100); }
.pp-cv-item:last-child { border-bottom: none; }
.pp-cv-ico { color: #ef4444; font-size: 15px; flex-shrink: 0; }
.pp-cv-nom { font-family: var(--pp-F); font-size: 11.5px; font-weight: 600; color: var(--pp-s700); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-cv-del { background: none; border: none; cursor: pointer; color: var(--pp-s400); font-size: 11px; padding: 4px 6px; border-radius: 5px; transition: all .15s; }
.pp-cv-del:hover { background: #fee2e2; color: #ef4444; }

#pp-map { width: 100%; height: 136px; border-radius: 8px; margin-top: 8px; }

.pp-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; padding: 10px 14px; border-radius: 9px;
    font-family: var(--pp-F); font-size: 13px; font-weight: 700;
    cursor: pointer; text-decoration: none; transition: all .18s; border: none;
}
.pp-btn-pri  { background: var(--pp-P);  color: #fff !important; }
.pp-btn-pri:hover  { background: var(--pp-P2); transform: translateY(-1px); color: #fff !important; text-decoration: none; }
.pp-btn-grey { background: transparent; color: var(--pp-s600) !important; border: 1.5px solid var(--pp-s200) !important; }
.pp-btn-grey:hover { border-color: #ef4444 !important; color: #ef4444 !important; background: #fef2f2; text-decoration: none; }
.pp-btn-dis  { background: var(--pp-s300); color: #fff !important; cursor: not-allowed; }

/* ================================================================
   TABS — override del sistema vertical/horizontal
   
   El problema: personal.css global (si existe) o Bootstrap fuerzan
   flex-direction:row en .nav-tabs. Usamos alta especificidad para
   ganar la batalla SOLO dentro de .pp-tab-nav.
================================================================ */
.pp-tab-card {
    background: #fff;
    border: 1.5px solid var(--pp-s200);
    border-radius: var(--pp-r);
    box-shadow: var(--pp-sh);
    overflow: visible;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.pp-tab-inner { display: flex; width: 100%; max-width: 100%; min-width: 0; }
.pp-tab-menu  { width: 210px; flex-shrink: 0; border-right: 2px solid var(--pp-s100); min-height: 380px; }
.pp-tab-body  { flex: 1; min-width: 0; max-width: 100%; padding: 24px 26px; overflow: hidden; }

/* TABS VERTICALES en desktop — 5 niveles de especificidad */
.pp-tab-nav .pp-tab-nav .nav,
.pp-tab-card .pp-tab-menu .pp-tab-nav .nav,
.pp-tab-card .pp-tab-menu .pp-tab-nav .nav-tabs,
.pp-tab-card .pp-tab-menu .pp-tab-nav ul.nav,
.pp-tab-card .pp-tab-menu .pp-tab-nav ul.job_nav,
.pp-tab-nav .jobs_tabs .nav,
.pp-tab-nav .jobs_tabs .nav-tabs,
.pp-tab-nav .jobs_tabs ul,
.pp-tab-nav ul.job_nav,
.pp-tab-nav ul.nav-tabs,
.pp-tab-nav ul.nav {
    display:         flex !important;
    flex-direction:  column !important;
    flex-wrap:       nowrap !important;
    overflow-x:      visible !important;
    overflow-y:      visible !important;
    border:          none !important;
    border-bottom:   none !important;
    margin:          0 !important;
    padding:         8px 6px !important;
    gap:             2px !important;
    width:           100% !important;
    background:      transparent !important;
    scrollbar-width: none !important;
}

.pp-tab-nav .nav-item,
.pp-tab-nav li {
    width: 100% !important; float: none !important; display: block !important;
}

.pp-tab-nav .nav-link,
.pp-tab-nav a {
    display:         flex !important;
    align-items:     center !important;
    gap:             9px !important;
    padding:         10px 13px !important;
    border-radius:   8px !important;
    font-family:     var(--pp-F) !important;
    font-size:       13px !important;
    font-weight:     500 !important;
    color:           var(--pp-s600) !important;
    border:          none !important;
    border-bottom:   none !important;
    border-left:     3px solid transparent !important;
    background:      transparent !important;
    white-space:     nowrap !important;
    width:           100% !important;
    margin:          0 !important;
    transition:      all .18s !important;
    text-decoration: none !important;
}
.pp-tab-nav .nav-link i,
.pp-tab-nav a i {
    width: 14px; text-align: center; font-size: 11px !important;
    color: var(--pp-s400) !important; flex-shrink: 0;
}
.pp-tab-nav .nav-link:hover,
.pp-tab-nav a:hover {
    background:        rgba(37,99,235,.05) !important;
    color:             var(--pp-P) !important;
    border-left-color: var(--pp-P) !important;
    text-decoration:   none !important;
}
.pp-tab-nav .nav-link.active,
.pp-tab-nav a.active,
.pp-tab-nav li.active > a {
    background:        rgba(37,99,235,.09) !important;
    color:             var(--pp-P) !important;
    border-left-color: var(--pp-P) !important;
    font-weight:       700 !important;
}
.pp-tab-nav .nav-link.active i,
.pp-tab-nav a.active i,
.pp-tab-nav li.active > a i { color: var(--pp-P) !important; }

/* Visibilidad de panes — !important para ganar a Bootstrap */
.pp-tab-card .tab-content > .tab-pane {
    display: none !important;
    opacity: 0;
}
.pp-tab-card .tab-content > .tab-pane.active,
.pp-tab-card .tab-content > .tab-pane.active.show {
    display: block !important;
    opacity: 1;
}

/* ================================================================
   INPUTS DENTRO DEL TAB
   
   FIX OVERFLOW: el problema principal es que Bootstrap .row tiene
   márgenes negativos (-15px) que sobrepasan el contenedor.
   Y .col-lg-6 etc. no hace stack en mobile por defecto.
   Lo corregimos aquí.
================================================================ */

/* Neutralizar márgenes negativos de Bootstrap DENTRO del tab */
.pp-tab-body .row {
    margin-left:  -8px !important;
    margin-right: -8px !important;
    max-width:    100% !important;
}
.pp-tab-body [class*="col-"] {
    padding-left:  8px !important;
    padding-right: 8px !important;
    max-width:     100% !important;
}

/* En mobile/tablet, todas las columnas Bootstrap apilan en 1 col */
@media (max-width: 991px) {
    .pp-tab-body .col-lg-12,
    .pp-tab-body .col-lg-6,
    .pp-tab-body .col-lg-4,
    .pp-tab-body .col-lg-3,
    .pp-tab-body .col-md-6,
    .pp-tab-body .col-md-4,
    .pp-tab-body [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Inputs universales */
.pp-tab-card .tab-content .job-input,
.pp-tab-card .tab-content .job-input-double,
.pp-tab-card .tab-content .form-control,
.pp-tab-card .tab-content .textarea70,
.pp-tab-card .tab-content .textarea_input,
.pp-tab-card .tab-content .description_dtu textarea,
.pp-tab-card .tab-content input[type="text"],
.pp-tab-card .tab-content input[type="email"],
.pp-tab-card .tab-content input[type="number"],
.pp-tab-card .tab-content input[type="tel"],
.pp-tab-card .tab-content input[type="url"],
.pp-tab-card .tab-content input[type="date"],
.pp-tab-card .tab-content input[type="password"],
.pp-tab-card .tab-content select {
    height:             42px !important;
    padding:            0 13px !important;
    font-family:        var(--pp-F) !important;
    font-size:          13px !important;
    color:              var(--pp-s800) !important;
    background:         var(--pp-s50) !important;
    border:             1.5px solid var(--pp-s200) !important;
    border-radius:      8px !important;
    box-shadow:         none !important;
    transition:         border-color .2s, box-shadow .2s !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    box-sizing:         border-box !important;
    width:              100% !important;
    max-width:          100% !important;
    display:            block !important;
}
.pp-tab-card .tab-content textarea,
.pp-tab-card .tab-content .textarea70,
.pp-tab-card .tab-content .textarea_input {
    height:      auto !important;
    padding:     10px 13px !important;
    resize:      vertical !important;
    min-height:  90px !important;
    line-height: 1.55 !important;
}
/* job-input-double — flex siblings */
.pp-tab-card .tab-content .job-input-double {
    width:     auto !important;
    min-width: 80px !important;
    flex:      1 !important;
    display:   inline-block !important;
}
/* Focus */
.pp-tab-card .tab-content input:focus,
.pp-tab-card .tab-content select:focus,
.pp-tab-card .tab-content textarea:focus {
    border-color: var(--pp-P) !important;
    box-shadow:   0 0 0 3px rgba(37,99,235,.1) !important;
    background:   #fff !important;
    outline:      none !important;
}
.pp-tab-card .tab-content .tiene_error {
    border-color: #ef4444 !important;
    box-shadow:   0 0 0 3px rgba(239,68,68,.09) !important;
}

/* Labels */
.pp-tab-card .tab-content label,
.pp-tab-card .tab-content .label15,
.pp-tab-card .tab-content .form-label {
    font-family:   var(--pp-F) !important;
    font-size:     12.5px !important;
    font-weight:   600 !important;
    color:         #374151 !important;
    margin-bottom: 5px !important;
    display:       block !important;
}

/* Grupos con icono */
.pp-tab-card .tab-content .smm_input,
.pp-tab-card .tab-content .input-group {
    display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important;
}
.pp-tab-card .tab-content .smm_input .job-input,
.pp-tab-card .tab-content .input-group .form-control {
    border-radius: 8px 0 0 8px !important; flex: 1 !important;
    width: auto !important; min-width: 0 !important;
}
.pp-tab-card .tab-content .smm_input .mix_max,
.pp-tab-card .tab-content .smm_input .loc_icon {
    background:    var(--pp-s100) !important;
    border:        1.5px solid var(--pp-s200) !important;
    border-left:   none !important;
    border-radius: 0 8px 8px 0 !important;
    padding:       0 12px !important;
    display:       flex !important; align-items: center !important; color: var(--pp-s500) !important;
}
.pp-tab-card .tab-content .input-group-prepend .input-group-text {
    background:    var(--pp-s100) !important;
    border:        1.5px solid var(--pp-s200) !important;
    border-right:  none !important;
    border-radius: 8px 0 0 8px !important;
    padding:       0 12px !important;
    display:       flex !important; align-items: center !important;
}
.pp-tab-card .tab-content .input-group-prepend + .form-control {
    border-radius: 0 8px 8px 0 !important; border-left: none !important;
}

/* ── Botones en tabs ─────────────────────────────────────────── */
.pp-tab-card .tab-content .post_jp_btn,
.pp-tab-card .tab-content button[type="submit"],
.pp-tab-card .tab-content .btn-primary,
.pp-tab-card .tab-content .btn-success {
    background:  var(--pp-P) !important; color: #fff !important; border: none !important;
    border-radius: 8px !important; padding: 10px 20px !important;
    font-family: var(--pp-F) !important; font-size: 13px !important; font-weight: 700 !important;
    cursor: pointer !important; display: inline-flex !important;
    align-items: center !important; gap: 6px !important; transition: all .18s !important;
}
.pp-tab-card .tab-content .post_jp_btn:hover,
.pp-tab-card .tab-content button[type="submit"]:hover,
.pp-tab-card .tab-content .btn-primary:hover,
.pp-tab-card .tab-content .btn-success:hover {
    background: var(--pp-P2) !important; transform: translateY(-1px) !important;
}
.pp-tab-card .tab-content .btn-secondary,
.pp-tab-card .tab-content .btn-light {
    background: #fff !important; color: var(--pp-s600) !important;
    border: 1.5px solid var(--pp-s200) !important; border-radius: 8px !important;
    padding: 9px 16px !important; font-family: var(--pp-F) !important;
    font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important;
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    transition: all .18s !important;
}
.pp-tab-card .tab-content .btn-secondary:hover,
.pp-tab-card .tab-content .btn-light:hover { background: var(--pp-s100) !important; }
.pp-tab-card .tab-content .btn-danger {
    background: #ef4444 !important; color: #fff !important; border: none !important;
    border-radius: 8px !important; padding: 9px 16px !important;
    font-family: var(--pp-F) !important; font-size: 13px !important;
    font-weight: 700 !important; cursor: pointer !important;
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
}
.pp-tab-card .tab-content .btn-danger:hover { background: #dc2626 !important; }
.pp-tab-card .tab-content .btn-sm { padding: 6px 12px !important; font-size: 12px !important; }

/* Botones + / - */
.pp-tab-card .tab-content .btn_agregar_laboral,
.pp-tab-card .tab-content .btn_agregar_oe,
.pp-tab-card .tab-content #btn-mas,
.pp-tab-card .tab-content #btn-mas-oe,
.pp-tab-card .tab-content #btn-mas-proyecto {
    width: 32px !important; height: 32px !important; padding: 0 !important;
    background: var(--pp-Pli) !important; border: 1.5px solid rgba(37,99,235,.28) !important;
    color: var(--pp-P) !important; border-radius: 7px !important;
    font-size: 15px !important; font-weight: 700 !important;
    cursor: pointer !important; display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    transition: all .18s !important;
}
.pp-tab-card .tab-content #btn-menos,
.pp-tab-card .tab-content #btn-menos-oe,
.pp-tab-card .tab-content #btn-menos-proyecto {
    width: 32px !important; height: 32px !important; padding: 0 !important;
    background: rgba(239,68,68,.07) !important; border: 1.5px solid rgba(239,68,68,.22) !important;
    color: #ef4444 !important; border-radius: 7px !important;
    font-size: 15px !important; font-weight: 700 !important;
    cursor: pointer !important; display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
}
.pp-tab-card .tab-content .btn_agregar_laboral:hover,
.pp-tab-card .tab-content #btn-mas:hover,
.pp-tab-card .tab-content #btn-mas-oe:hover,
.pp-tab-card .tab-content #btn-mas-proyecto:hover  { background: var(--pp-P) !important; color: #fff !important; }
.pp-tab-card .tab-content #btn-menos:hover,
.pp-tab-card .tab-content #btn-menos-oe:hover,
.pp-tab-card .tab-content #btn-menos-proyecto:hover { background: #ef4444 !important; color: #fff !important; }

/* Alertas y cards dentro del tab */
.pp-tab-card .tab-content .alert {
    border-radius: 9px !important; font-family: var(--pp-F) !important;
    font-size: 13px !important; padding: 11px 15px !important;
}
.pp-tab-card .tab-content .alert-warning { background: rgba(245,158,11,.08) !important; border-color: rgba(245,158,11,.2) !important; color: #92400e !important; }
.pp-tab-card .tab-content .alert-danger  { background: rgba(239,68,68,.07) !important;  border-color: rgba(239,68,68,.18) !important;  color: #991b1b !important; }
.pp-tab-card .tab-content .alert-success { background: rgba(16,185,129,.08) !important; border-color: rgba(16,185,129,.2) !important;  color: #065f46 !important; }
.pp-tab-card .tab-content .alert-info    { background: rgba(37,99,235,.07) !important;  border-color: rgba(37,99,235,.15) !important;  color: #1e40af !important; }
.pp-tab-card .tab-content .card { border: 1.5px solid var(--pp-s200) !important; border-radius: 10px !important; box-shadow: 0 1px 4px rgba(0,0,0,.05) !important; }
.pp-tab-card .tab-content .card-footer { background: var(--pp-s50) !important; border-top: 1px solid var(--pp-s100) !important; padding: 10px 15px !important; }

/* Sub-formularios (laboral, estudios, proyectos) */
.pp-tab-card .tab-content .nombre-empresa {
    background: var(--pp-s50) !important; border: 1.5px solid var(--pp-s200) !important;
    border-radius: 8px !important; padding: 0 12px !important; height: 38px !important;
    color: var(--pp-s700) !important;
}
.pp-tab-card .tab-content .referencia_laboral,
.pp-tab-card .tab-content .div_otros_estudios,
.pp-tab-card .tab-content .referencia_proyecto,
.pp-tab-card .tab-content .nueva_laboral,
.pp-tab-card .tab-content .nueva_oe,
.pp-tab-card .tab-content .nuevo_proyecto {
    border: 1.5px solid var(--pp-s200) !important; border-radius: 10px !important;
    padding: 16px !important; margin: 8px 0 !important; background: var(--pp-s50) !important;
}
.pp-tab-card .tab-content h4 { font-family: var(--pp-F) !important; font-weight: 700 !important; color: var(--pp-s900) !important; font-size: 14px !important; }
.pp-tab-card .tab-content ul  { padding-left: 0 !important; list-style: none !important; }
.pp-tab-card .tab-content ul li { margin-bottom: 8px !important; }

/* ================================================================
   RESPONSIVO TABS
================================================================ */
@media (max-width: 991px) {
    .pp-tab-inner { flex-direction: column; }
    .pp-tab-menu  { width: 100%; border-right: none; border-bottom: 2px solid var(--pp-s100); min-height: auto; }

    /* HORIZONTAL con scroll */
    .pp-tab-card .pp-tab-menu .pp-tab-nav .nav,
    .pp-tab-card .pp-tab-menu .pp-tab-nav .nav-tabs,
    .pp-tab-card .pp-tab-menu .pp-tab-nav ul.nav,
    .pp-tab-card .pp-tab-menu .pp-tab-nav ul.job_nav,
    .pp-tab-nav .jobs_tabs ul,
    .pp-tab-nav ul.job_nav,
    .pp-tab-nav ul.nav-tabs,
    .pp-tab-nav ul.nav {
        flex-direction: row !important;
        overflow-x:     auto !important;
        overflow-y:     hidden !important;
        padding:        0 8px !important;
        gap:            0 !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .pp-tab-nav .nav-item,
    .pp-tab-nav li { width: auto !important; display: inline-block !important; }
    .pp-tab-nav .nav-link,
    .pp-tab-nav a {
        border-left:   3px solid transparent !important;
        border-bottom: 3px solid transparent !important;
        border-radius: 0 !important;
        padding:       11px 14px !important;
        font-size:     12.5px !important;
        white-space:   nowrap !important;
        width:         auto !important;
    }
    .pp-tab-nav .nav-link.active,
    .pp-tab-nav a.active,
    .pp-tab-nav li.active > a {
        border-left-color:   transparent !important;
        border-bottom-color: var(--pp-P) !important;
    }
    .pp-tab-body { padding: 16px !important; }
}

@media (max-width: 575px) {
    .pp-tab-body { padding: 12px !important; }
    /* Inputs dobles en mobile apilan */
    .pp-tab-card .tab-content .job-input-double {
        width:      100% !important;
        min-width:  0 !important;
        display:    block !important;
        margin-top: 6px !important;
    }
    /* El form-group con múltiples job-input-double */
    .pp-tab-card .tab-content .form-group {
        overflow: hidden;
    }
}

/* ================================================================
   RESPONSIVO GENERAL
================================================================ */
@media (max-width: 991px) {
    .browse-section { padding: 16px 0 36px; }
    .filter-toggle-btn { display: flex !important; }
    .browser-job-filters { position: static !important; margin-bottom: 16px !important; }
}
@media (max-width: 767px) {
    .browse-section { padding: 16px 0 32px; }
    .browse-banner  { padding: 14px 16px; }
    .browse-banner h2 { font-size: 16px; }
}
@media (max-width: 575px) {
    .filter-button { padding: 12px 14px; }
    .btn-filtro, .emp-btn-limpiar { height: 38px !important; font-size: 12px !important; }
}

/* ================================================================
   PATCH v8.1 — Responsividad 640px
   El rango 576-640px no tenía breakpoint propio.
   Aquí se cubre ese gap para hero, stats, tabs y formularios.
================================================================ */
@media (max-width: 660px) {

    /* Hero */
    .pp-hero { padding-top: calc(var(--pp-hdr) + 14px); }
    .pp-hero-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pp-av, .pp-av img { width: 72px; height: 72px; }
    .pp-hi { padding-bottom: 16px; }
    .pp-hi-name { font-size: 1rem !important; }
    .pp-badges { gap: 4px; }
    .pp-badge { font-size: 10px; padding: 2px 8px; }

    /* Stats — scroll horizontal, evitar wrap */
    .pp-stat { padding: 8px 10px; }
    .pp-stat-lbl { font-size: 8px; }
    .pp-stat-val { font-size: 11px; }

    /* Layout — sidebar bajo el contenido */
    .pp-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
    .pp-sidebar {
        grid-template-columns: 1fr !important;
        order: 2;
        position: static !important;
    }
    .pp-content { order: 1; }

    /* Tabs — horizontal compacto */
    .pp-tab-inner { flex-direction: column !important; }
    .pp-tab-menu  { width: 100% !important; border-right: none !important; border-bottom: 2px solid #f1f5f9 !important; min-height: auto !important; }
    .pp-tab-body  { padding: 12px !important; overflow-x: hidden !important; }

    .pp-tab-card .pp-tab-menu .pp-tab-nav .nav,
    .pp-tab-card .pp-tab-menu .pp-tab-nav .nav-tabs,
    .pp-tab-card .pp-tab-menu .pp-tab-nav ul.nav,
    .pp-tab-card .pp-tab-menu .pp-tab-nav ul.job_nav,
    .pp-tab-nav ul {
        flex-direction:  row !important;
        overflow-x:      auto !important;
        overflow-y:      hidden !important;
        padding:         0 6px !important;
        gap:             0 !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .pp-tab-nav .nav-link,
    .pp-tab-nav a,
    .pp-tab-nav li > a {
        border-left:     3px solid transparent !important;
        border-bottom:   3px solid transparent !important;
        border-radius:   0 !important;
        padding:         9px 10px !important;
        font-size:       12px !important;
        white-space:     nowrap !important;
        width:           auto !important;
    }
    .pp-tab-nav .nav-link.active,
    .pp-tab-nav a.active,
    .pp-tab-nav li.active > a {
        border-left-color:   transparent !important;
        border-bottom-color: #2563eb !important;
    }
    .pp-tab-nav .nav-item,
    .pp-tab-nav li { width: auto !important; display: inline-block !important; }

    /* Formularios — columnas Bootstrap apilan */
    .pp-tab-body .row { margin-left: -6px !important; margin-right: -6px !important; }
    .pp-tab-body [class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; }
    .pp-tab-body .col-lg-12,
    .pp-tab-body .col-lg-6,
    .pp-tab-body .col-lg-4,
    .pp-tab-body .col-lg-3,
    .pp-tab-body .col-md-6,
    .pp-tab-body .col-md-4,
    .pp-tab-body [class*="col-"] {
        width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
    }
    .pp-tab-body .form-group { margin-bottom: 12px !important; }
    .pp-tab-card .tab-content .job-input-double {
        width:      100% !important;
        min-width:  0 !important;
        display:    block !important;
        margin-top: 6px !important;
    }
}

@media (max-width: 420px) {
    .pp-hi-name { font-size: .95rem !important; }
    .pp-tab-nav .nav-link, .pp-tab-nav a, .pp-tab-nav li > a { padding: 8px 8px !important; font-size: 11px !important; }
    .pp-tab-body { padding: 10px !important; }
    .pp-wrap { padding-bottom: 40px; }
}