/* =========================================================
   Computrabajo-style theme override
   Loaded after main.css to reskin the public front.
   ========================================================= */

:root {
    --ct-primary: #004b8f;        /* Computrabajo navy */
    --ct-primary-dark: #003a70;
    --ct-btn: #0a2c5c;            /* dark navy CTA buttons */
    --ct-btn-hover: #072146;
    --ct-accent: #ff6a00;        /* orange accent */
    --ct-ink: #1b2733;
    --ct-muted: #64748b;
    --ct-line: #e3e8ef;
    --ct-bg-soft: #f4f7fb;
    /* Alto de la cabecera cuando se vuelve fija (.header.issticky, main.css):
       las columnas sticky se pegan por debajo para no quedar tapadas. */
    --ct-header-h: 81px;
    --ct-sticky-top: calc(var(--ct-header-h) + 16px);
}

body {
    color: var(--ct-ink);
    background: #fff;
}

/* ---------------------------------------------------------
   Header / Navbar  (clean white bar, navy accents)
   --------------------------------------------------------- */
.header {
    background: #fff;
    box-shadow: 0 1px 0 var(--ct-line);
    padding: 6px 0;
}
.header .logo img { max-height: 64px; width: auto; }
.header .logo { margin: 4px 0; }

.navbar-expand-lg .navbar-nav .nav-link {
    color: var(--ct-ink);
    font-weight: 600;
    border-bottom: 2px solid transparent;
}
.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-nav > li:hover > a,
.navbar-nav > li.active > a,
.navbar-light .navbar-nav .active > .nav-link {
    color: var(--ct-primary) !important;
    border-bottom-color: var(--ct-primary);
}

/* Sign in = outlined pill, Register = filled navy pill (Computrabajo look) */
.navbar-expand-lg .navbar-nav .nav-item a[data-bs-target="#headlogin"] {
    border: 1.5px solid var(--ct-primary);
    color: var(--ct-primary) !important;
    border-radius: 40px;
    padding: 9px 22px !important;
    margin-left: 8px;
    line-height: 1;
}
.navbar-expand-lg .navbar-nav .nav-item a[data-bs-target="#headlogin"]:hover {
    background: var(--ct-primary);
    color: #fff !important;
}
.navbar-expand-lg .navbar-nav .nav-item.register a {
    background: var(--ct-btn) !important;
    border-radius: 40px !important;
    padding: 10px 24px !important;
    font-weight: 700;
}
.navbar-expand-lg .navbar-nav .nav-item.register a:hover {
    background: var(--ct-btn-hover) !important;
    color: #fff !important;
}

/* Logged-in user pill in the navbar (Computrabajo-style) */
.navbar-nav > li.ct-userbtn > a.ct-user-pill {
    display: flex; align-items: center; gap: 9px;
    border: 1px solid var(--ct-line);
    border-radius: 40px;
    padding: 5px 14px 5px 6px !important;
    background: #fff;
    line-height: 1;
    transition: all .15s ease;
}
.navbar-nav > li.ct-userbtn > a.ct-user-pill:hover { border-color: var(--ct-primary); box-shadow: 0 4px 12px rgba(0,30,70,.08); }
.ct-user-avatar { display: inline-flex; }
.ct-user-avatar img {
    width: 34px !important; height: 34px !important;
    border-radius: 50% !important; object-fit: cover;
    display: block;
}
.ct-user-name { font-size: 14px; font-weight: 700; color: var(--ct-ink); white-space: nowrap; }
.ct-user-pill .fa-chevron-down { font-size: 11px; color: var(--ct-muted); }
.navbar-nav > li.ct-userbtn .dropdown-menu {
    border: 1px solid var(--ct-line); border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0, 30, 70, 0.12);
    padding: 8px; min-width: 230px;
}
.navbar-nav > li.ct-userbtn .dropdown-menu li a {
    border-radius: 8px; padding: 9px 12px !important; font-size: 14px;
}
.navbar-nav > li.ct-userbtn .dropdown-menu li a:hover { background: #eef4fc; color: var(--ct-primary); }

@media (max-width: 991px) {
    /* Inside the collapsed mobile menu main.css hides the avatar; keep the pill readable. */
    .navbar-nav > li.ct-userbtn > a.ct-user-pill {
        width: 100%; padding: 8px 14px !important; margin: 6px 0;
        background: #f4f7fb; border-color: var(--ct-line);
    }
    .navbar-nav > li.ct-userbtn .ct-user-avatar img {
        display: block !important;
        width: 30px !important; height: 30px !important;
    }
    .ct-user-pill .fa-chevron-down { margin-left: auto; }
}

/* ---------------------------------------------------------
   HERO  (full-width photo + navy overlay, centered search)
   --------------------------------------------------------- */
.ct-hero {
    position: relative;
    background: #032a52 url('/images/login-bg.jpg') center/cover no-repeat;
    padding: 96px 16px 150px;
    overflow: hidden;
}
.ct-hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
.ct-hero::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(3, 42, 82, 0.86) 0%,
        rgba(0, 58, 112, 0.80) 55%,
        rgba(0, 75, 143, 0.78) 100%);
}
.ct-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
.ct-hero-inner h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 14px;
}
.ct-hero-inner .ct-sub {
    color: #eaf2fb;
    font-size: 19px;
    font-weight: 400;
    margin: 0 auto 34px;
    max-width: 640px;
}
.ct-hero-inner .ct-sub strong { font-weight: 800; color: #fff; }

/* curved bottom edge that flows into the page */
.ct-hero-curve {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    z-index: 1;
    line-height: 0;
}
.ct-hero-curve svg { width: 100%; height: 70px; display: block; }

/* ---------------------------------------------------------
   Search pill  (big white rounded bar, two fields + CTA)
   --------------------------------------------------------- */
.ct-searchbar {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 18px 45px rgba(0, 20, 50, 0.28);
    padding: 8px;
    max-width: 880px;
    margin: 0 auto;
    gap: 4px;
}
.ct-field {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 8px;
}
.ct-field + .ct-field { border-left: 1px solid var(--ct-line); }
.ct-field > i {
    color: var(--ct-primary);
    font-size: 18px;
    width: 34px;
    text-align: center;
    flex: 0 0 34px;
}
.ct-searchbar .form-control,
.ct-searchbar input.form-control,
.ct-searchbar select.form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 56px;
    font-size: 16px;
    color: var(--ct-ink);
    padding: 0 6px !important;
    margin: 0 !important;
    width: 100%;
}
.ct-searchbar .form-control:focus { outline: none; }
.ct-search-btn {
    border: none;
    background: var(--ct-btn);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    border-radius: 44px;
    padding: 0 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: background .2s ease;
}
.ct-search-btn:hover { background: var(--ct-btn-hover); color: #fff; }

/* quick popular links under the search bar */
.ct-quicklinks {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 20px;
    color: #dbe7f5;
    font-size: 14px;
}
.ct-quicklinks a {
    color: #fff;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 30px;
    padding: 5px 14px;
    margin: 4px 4px;
    display: inline-block;
    transition: all .2s ease;
}
.ct-quicklinks a:hover { background: #fff; color: var(--ct-primary); }

/* ---------------------------------------------------------
   "Publica un empleo" / CTA band under hero
   --------------------------------------------------------- */
.infodatawrap { padding-top: 46px; }
.userloginbox {
    background: var(--ct-bg-soft);
    border: 1px solid var(--ct-line);
    border-radius: 14px;
    transition: all .2s ease;
}
.userloginbox:hover {
    border-color: var(--ct-primary);
    box-shadow: 0 10px 25px rgba(0, 75, 143, 0.10);
    background: #fff;
}
.userloginbox h3 { color: var(--ct-ink); }

/* ---------------------------------------------------------
   Section titles + generic accents
   --------------------------------------------------------- */
.titleTop h3 { color: var(--ct-ink); font-weight: 800; }
.titleTop h3 i,
.titleTop h3 span,
.featuredlist .jobint strong i,
.featuredlist .jobint h4 a:hover,
.jobint .fticon i,
a.nav-link i { color: var(--ct-primary); }

/* Cards (featured / latest jobs) */
.featuredlist .jobint,
.newjbox li .jobint {
    border: 1px solid var(--ct-line);
    border-radius: 14px;
}
.featuredlist .jobint:hover,
.newjbox li .jobint:hover {
    border-color: var(--ct-primary);
    box-shadow: 0 12px 26px rgba(0, 75, 143, 0.12);
}
.featuredlist .jobint h4 a:hover { color: var(--ct-primary); }

/* Buttons */
.btn-yellow { background: var(--ct-btn); border-radius: 40px; box-shadow: none; }
.btn-yellow:hover { background: var(--ct-btn-hover); color: #fff; }
.btn-dark { background: var(--ct-primary); border-radius: 40px; border: none; }
.btn-dark:hover { background: var(--ct-primary-dark); color: #fff; }

.viewallbtn a {
    background: transparent;
    border: 1.5px solid var(--ct-primary);
    color: var(--ct-primary);
    border-radius: 40px;
}
.viewallbtn a:hover { background: var(--ct-primary); color: #fff; }

/* Links */
a { color: var(--ct-primary); }

/* ---------------------------------------------------------
   Employer "Recluta gratis" band  (3 numbered steps)
   --------------------------------------------------------- */
.ct-emp-band {
    background: #eef4fc;
    border-radius: 22px;
    padding: 40px 32px;
}
.ct-emp-title {
    text-align: center;
    color: var(--ct-ink);
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 30px;
}
.ct-emp-title strong { color: var(--ct-primary); font-weight: 800; }
.ct-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 28px;
}
.ct-step {
    background: #fff;
    border-radius: 16px;
    padding: 26px 22px;
    box-shadow: 0 8px 22px rgba(0, 30, 70, 0.06);
}
.ct-step-num {
    width: 42px; height: 42px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.ct-step-num-1 { background: #7c5cff; }
.ct-step-num-2 { background: #17b890; }
.ct-step-num-3 { background: var(--ct-primary); }
.ct-step-tag {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.ct-tag-1 { color: #7c5cff; }
.ct-tag-2 { color: #17b890; }
.ct-tag-3 { color: var(--ct-primary); }
.ct-step p { margin: 0; color: var(--ct-ink); font-size: 15px; line-height: 1.5; }
.ct-step p strong { font-weight: 700; }
.ct-emp-cta {
    display: inline-block;
    background: var(--ct-btn);
    color: #fff;
    font-weight: 700;
    border-radius: 40px;
    padding: 13px 34px;
}
.ct-emp-cta:hover { background: var(--ct-btn-hover); color: #fff; }

/* ---------------------------------------------------------
   "Si buscas trabajo" feature band (Computrabajo style)
   --------------------------------------------------------- */
.ct-works { background: #fff; }
.ct-works-head { text-align: center; margin-bottom: 32px; }
.ct-works-head h3 { font-size: 28px; font-weight: 500; color: var(--ct-ink); margin: 0 0 8px; }
.ct-works-head p { color: var(--ct-muted); font-size: 16px; margin: 0; }

.ct-works-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    align-items: stretch;
}
.ct-works-card {
    background: #eef4fc;
    border-radius: 18px;
    padding: 34px 26px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ct-works-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 75, 143, 0.10); }
.ct-works-icon {
    width: 64px; height: 64px;
    background: #fff; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 30, 70, 0.06);
}
.ct-works-icon .material-symbols-outlined { font-size: 30px; color: var(--ct-primary); }
.ct-works-card h4 { font-size: 18px; font-weight: 800; color: var(--ct-ink); margin: 0 0 10px; }
.ct-works-card p { font-size: 14.5px; color: #43536a; line-height: 1.55; margin: 0; }

.ct-works-card.blue { background: var(--ct-primary); color: #fff; }
.ct-works-card.blue h4 { color: #fff; }
.ct-works-card.blue p { color: #dbe9fa; }
.ct-works-blue-sub { font-weight: 700; color: #fff !important; margin-bottom: 14px !important; }
.ct-works-blue-icon {
    width: 84px; height: 84px; background: #fff; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; margin: 4px 0 16px;
}
.ct-works-blue-icon .material-symbols-outlined { font-size: 44px; color: var(--ct-primary); }

.ct-works-cta { text-align: center; margin-top: 30px; }
.ct-works-cta a {
    display: inline-block; background: var(--ct-btn); color: #fff;
    font-weight: 700; font-size: 15px; border-radius: 40px; padding: 14px 34px;
}
.ct-works-cta a:hover { background: var(--ct-btn-hover); color: #fff; }

@media (max-width: 991px) { .ct-works-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ct-works-grid { grid-template-columns: 1fr; } .ct-works-head h3 { font-size: 22px; } }

/* ---------------------------------------------------------
   "How It Works" -> Computrabajo feature cards
   --------------------------------------------------------- */
.howitsection.greybg { background: #fff; }
.howitwrap .titleTop h3 { font-weight: 800; }
.howlist { text-align: center; }
.howlist li {
    background: var(--ct-bg-soft);
    border-radius: 16px;
    padding: 34px 24px;
    text-align: center;
    transition: all .2s ease;
}
.howlist li:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 75, 143, 0.10);
    background: #fff;
    border: 1px solid var(--ct-line);
}
.howlist .iconcircle {
    width: 74px; height: 74px;
    background: #dbe8f7;
    color: var(--ct-primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
}
.howlist .iconcircle .material-symbols-outlined { font-size: 34px; color: var(--ct-primary); }
.howlist h4 { font-weight: 800; color: var(--ct-ink); }
.howlist p { color: var(--ct-muted); }

/* ---------------------------------------------------------
   Category / city cards -> rounded, soft
   --------------------------------------------------------- */
.catecard, .citycard {
    border-radius: 14px !important;
    border: 1px solid var(--ct-line) !important;
    transition: all .2s ease;
}
.catecard:hover, .citycard:hover {
    border-color: var(--ct-primary) !important;
    box-shadow: 0 10px 24px rgba(0, 75, 143, 0.10);
}
.catecard .badge { color: var(--ct-primary); }
.iconcircle { background: #eef4fc; }

/* Soft alternating section bg like Computrabajo */
.greybg { background: var(--ct-bg-soft); }

/* ---------------------------------------------------------
   Auth / Company registration  (Computrabajo split card)
   --------------------------------------------------------- */
.ct-auth {
    background: var(--ct-bg-soft);
    padding: 40px 0 60px;
    min-height: 70vh;
}
.ct-auth-card {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 30, 70, 0.12);
    max-width: 1040px;
    margin: 0 auto;
}
.ct-auth-form { padding: 44px 46px; }
.ct-auth-title { font-size: 28px; font-weight: 800; color: var(--ct-ink); margin: 0 0 6px; }
.ct-auth-sub { color: var(--ct-accent); font-weight: 600; font-size: 16px; margin: 0 0 26px; }

.ct-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 6px;
}
.ct-fieldrow { margin-bottom: 6px; }
.ct-fieldrow.ct-col-2 { grid-column: 1 / -1; }
.ct-auth-formel .form-control {
    width: 100%;
    height: 52px;
    border: 1px solid var(--ct-line);
    border-radius: 10px;
    padding: 0 16px;
    font-size: 15px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ct-auth-formel .form-control:focus {
    outline: none;
    border-color: var(--ct-primary);
    box-shadow: 0 0 0 3px rgba(0, 75, 143, 0.12);
}
.ct-fieldrow.has-error .form-control { border-color: #e01010; }
.ct-auth-formel .help-block { color: #e01010; font-size: 13px; display: block; margin-top: 4px; }

.ct-check { margin: 12px 0 4px; }
.ct-check label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ct-ink); margin: 0; cursor: pointer; }
.ct-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ct-primary); }
.ct-check a { color: var(--ct-primary); font-weight: 600; }

.ct-captcha { margin: 18px 0; transform-origin: left; }

.ct-auth-btn {
    background: var(--ct-accent);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 16px;
    border-radius: 10px;
    padding: 14px 34px;
    cursor: pointer;
    transition: background .2s ease;
}
.ct-auth-btn:hover { background: #e05e00; }

.ct-auth-legal { font-size: 12.5px; color: var(--ct-muted); line-height: 1.6; margin: 18px 0 0; max-width: 520px; }
.ct-auth-legal a { color: var(--ct-primary); }
.ct-auth-signin { margin-top: 22px; font-size: 15px; color: var(--ct-ink); }
.ct-auth-signin i { color: var(--ct-muted); margin-right: 4px; }
.ct-auth-signin a { color: var(--ct-primary); font-weight: 700; }

.ct-auth-media {
    position: relative;
    background: #04213f url('/images/login-bg.jpg') center/cover no-repeat;
    display: flex;
    align-items: flex-end;
    min-height: 100%;
}
.ct-auth-media::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(4,33,63,.35) 0%, rgba(0,58,112,.78) 100%);
}
.ct-auth-media-text { position: relative; z-index: 2; color: #fff; padding: 40px 34px; }
.ct-auth-media-text h3 { font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0 0 10px; }
.ct-auth-media-text h3 strong { font-weight: 800; }
.ct-auth-media-text p { font-size: 15px; color: #eaf2fb; margin: 0; }

/* Login-specific: navy CTA, social buttons, divider */
.ct-auth-card-sm { max-width: 900px; }
.ct-auth-btn-navy { background: var(--ct-btn); }
.ct-auth-btn-navy:hover { background: var(--ct-btn-hover); }
.ct-auth-formel .ct-auth-btn { width: 100%; margin-top: 4px; }

.ct-social { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ct-social-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 48px;
    border: 1px solid var(--ct-line);
    border-radius: 10px;
    color: var(--ct-ink);
    font-weight: 600;
    font-size: 15px;
    background: #fff;
    transition: all .15s ease;
}
.ct-social-btn:hover { border-color: var(--ct-primary); background: #f7fafd; color: var(--ct-primary); }
.ct-social-btn .fa-google { color: #ea4335; }
.ct-social-btn:hover .fa-google { color: #ea4335; }

.ct-divider { position: relative; text-align: center; margin: 6px 0 20px; }
.ct-divider::before {
    content: ""; position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: var(--ct-line);
}
.ct-divider span {
    position: relative; background: #fff; padding: 0 14px;
    color: var(--ct-muted); font-size: 13px;
}

.ct-forgot { font-size: 14px; color: var(--ct-ink); margin: 4px 0 16px; }
.ct-forgot i { color: var(--ct-muted); margin-right: 4px; }
.ct-forgot a { color: var(--ct-primary); font-weight: 600; }

@media (max-width: 860px) {
    .ct-auth-card { grid-template-columns: 1fr; }
    .ct-auth-media { min-height: 220px; order: -1; }
    .ct-auth-form { padding: 30px 22px; }
    .ct-auth-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Jobs listing — Computrabajo two-pane layout
   ========================================================= */
.ct-jobs { background: var(--ct-bg-soft); padding: 24px 0 50px; }

.ct-jobs-toolbar {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.ct-filter-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--ct-line);
    color: var(--ct-ink); font-weight: 600; font-size: 14px;
    border-radius: 30px; padding: 9px 18px; cursor: pointer;
    transition: all .15s ease;
}
.ct-filter-toggle:hover, .ct-filter-toggle.active { border-color: var(--ct-primary); color: var(--ct-primary); }
.ct-jobs-count { color: var(--ct-ink); font-size: 18px; }
.ct-jobs-count strong { color: var(--ct-primary); font-weight: 800; }

/* Filters off-canvas (slides in from the right) wrapping the sidebar include */
.ct-offcanvas {
    position: fixed; top: 0; right: 0; z-index: 1060;
    width: 400px; max-width: 92vw; height: 100vh;
    background: #fff;
    display: flex; flex-direction: column;
    box-shadow: -12px 0 40px rgba(0, 20, 50, 0.18);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.ct-offcanvas.open { transform: translateX(0); }
.ct-offcanvas-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--ct-line); flex: 0 0 auto;
}
.ct-offcanvas-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ct-ink); }
.ct-offcanvas-head h3 i { color: var(--ct-primary); margin-right: 8px; }
.ct-offcanvas-close {
    border: none; background: transparent; font-size: 30px; line-height: 1;
    color: var(--ct-muted); cursor: pointer; padding: 0 4px;
}
.ct-offcanvas-close:hover { color: var(--ct-ink); }
.ct-offcanvas-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 22px; }
.ct-offcanvas-body .col-lg-3 {
    width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0;
}
.ct-offcanvas-body .sidebar { display: block; }
.ct-offcanvas-body .filterjobsnav { display: none; }
/* Force the inner filter panel into normal flow inside the off-canvas
   (on mobile main.css turns #filterjobs into its own fixed slide-in overlay). */
.ct-offcanvas-body #filterjobs {
    display: block !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.ct-offcanvas-body .close-filterjobs { display: none !important; }

.ct-offcanvas-backdrop {
    position: fixed; inset: 0; z-index: 1055;
    background: rgba(6, 22, 44, 0.45);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.ct-offcanvas-backdrop.open { opacity: 1; visibility: visible; }
body.ct-noscroll { overflow: hidden; }

/* Split panes */
.ct-jobs-split {
    display: grid;
    grid-template-columns: minmax(340px, 430px) 1fr;
    gap: 20px;
    align-items: start;
}

/* LEFT list */
.ct-jobs-list { display: flex; flex-direction: column; gap: 14px; }
.ct-job-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 14px;
    padding: 20px 20px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.ct-job-card:hover { border-color: #b9c9dc; box-shadow: 0 8px 20px rgba(0, 30, 70, 0.08); }
.ct-job-card.active {
    border-color: var(--ct-primary);
    box-shadow: 0 8px 22px rgba(0, 75, 143, 0.14);
}
.ct-job-card.active::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 4px; border-radius: 4px; background: var(--ct-primary);
}
.ct-job-card-link { display: block; color: inherit; }
.ct-job-card-link:hover { color: inherit; }
.ct-job-card-title { font-size: 18px; font-weight: 700; color: var(--ct-ink); margin: 0 0 4px; }
.ct-job-card.active .ct-job-card-title { color: var(--ct-primary); }
.ct-job-card-company { font-size: 14px; color: var(--ct-ink); margin-bottom: 2px; }
.ct-job-card-loc { font-size: 14px; color: var(--ct-muted); margin-bottom: 8px; }
.ct-job-card-loc i { color: var(--ct-muted); margin-right: 4px; }
.ct-job-card-salary { font-size: 14px; font-weight: 700; color: #17825e; margin-bottom: 10px; }
.ct-job-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--ct-line); padding-top: 10px; margin-top: 4px;
}
.ct-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--ct-primary);
    background: #eef4fc; border-radius: 20px; padding: 4px 12px; font-weight: 600;
}
.ct-job-card-date { font-size: 12.5px; color: var(--ct-muted); }
.ct-job-flag {
    position: absolute; top: 0; right: 0;
    width: 0; height: 0; border-style: solid;
    border-width: 0 42px 42px 0; border-color: transparent var(--ct-accent) transparent transparent;
    border-top-right-radius: 14px;
}
.ct-job-flag i { position: absolute; top: 4px; right: -36px; color: #fff; font-size: 12px; }

.ct-jobs-empty {
    background: #fff; border: 1px dashed var(--ct-line);
    border-radius: 14px; padding: 40px; text-align: center; color: var(--ct-muted);
}
.ct-jobs-pagination { margin-top: 6px; }
.ct-jobs-pagination .pagination { flex-wrap: wrap; }

/* RIGHT detail pane */
.ct-jobs-detail {
    position: sticky; top: var(--ct-sticky-top);
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 16px;
    padding: 30px 32px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.ct-detail-placeholder {
    text-align: center; color: var(--ct-muted); padding: 80px 20px;
}
.ct-detail-placeholder i { font-size: 40px; color: #c6d3e2; margin-bottom: 14px; display: block; }
.ct-detail-loading { display: flex; justify-content: center; padding: 90px 0; }
.ct-spinner {
    width: 38px; height: 38px; border-radius: 50%;
    border: 4px solid #e3ecf6; border-top-color: var(--ct-primary);
    animation: ctspin .8s linear infinite;
}
@keyframes ctspin { to { transform: rotate(360deg); } }

.ct-detail-head { display: flex; justify-content: space-between; gap: 16px; }
.ct-detail-title { font-size: 26px; font-weight: 800; color: var(--ct-ink); margin: 0 0 6px; line-height: 1.2; }
.ct-detail-company { color: var(--ct-primary); font-weight: 700; font-size: 16px; }
.ct-detail-company:hover { text-decoration: underline; color: var(--ct-primary); }
.ct-detail-loc { color: var(--ct-muted); font-size: 14px; margin-top: 4px; }
.ct-detail-loc i { margin-right: 4px; }
.ct-detail-logo img { width: 76px; height: 76px; object-fit: contain; border-radius: 10px; border: 1px solid var(--ct-line); background: #fff; }
.ct-detail-logo.sm img { width: 54px; height: 54px; }

.ct-detail-actions { display: flex; align-items: center; gap: 10px; margin: 20px 0 22px; flex-wrap: wrap; }
.ct-apply-btn {
    background: var(--ct-btn); color: #fff; font-weight: 700; font-size: 15px;
    border-radius: 40px; padding: 12px 34px; transition: background .2s ease;
}
.ct-apply-btn:hover { background: var(--ct-btn-hover); color: #fff; }
.ct-apply-done { background: #17825e; }
.ct-detail-expired { color: #b23; font-weight: 700; }
.ct-icon-btn {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--ct-line); color: var(--ct-primary);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.ct-icon-btn:hover { background: #eef4fc; color: var(--ct-primary); border-color: var(--ct-primary); }

.ct-detail-meta {
    list-style: none; padding: 16px 0; margin: 0;
    border-top: 1px solid var(--ct-line); border-bottom: 1px solid var(--ct-line);
    display: flex; flex-direction: column; gap: 10px;
}
.ct-detail-meta li { color: var(--ct-ink); font-size: 14.5px; }
.ct-detail-meta li i { color: var(--ct-primary); width: 22px; text-align: center; margin-right: 6px; }

.ct-detail-section { margin-top: 22px; }
.ct-detail-section h3 { font-size: 17px; font-weight: 800; color: var(--ct-ink); margin: 0 0 10px; }
.ct-detail-desc { color: #384656; font-size: 15px; line-height: 1.65; }
.ct-detail-desc p { margin: 0 0 10px; }
.ct-skills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ct-skills li, .ct-skills a { background: #eef4fc; color: var(--ct-primary); border-radius: 20px; padding: 5px 14px; font-size: 13px; font-weight: 600; }

/* Bottom action bar of the job detail */
.ct-detail-footer {
    margin-top: 26px; padding-top: 22px;
    border-top: 1px solid var(--ct-line);
    display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.ct-detail-footer-main { display: flex; align-items: center; gap: 12px; }
.ct-detail-footer-main .ct-apply-btn { padding: 13px 42px; }
.ct-detail-footer-links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; }
.ct-detail-footer-links button {
    display: inline-flex; align-items: center; gap: 9px;
    background: transparent; border: none; cursor: pointer;
    color: var(--ct-ink); font-size: 15px; padding: 4px 2px;
}
.ct-detail-footer-links button i { color: var(--ct-primary); font-size: 16px; }
.ct-detail-footer-links button:hover { color: var(--ct-primary); text-decoration: underline; }

.ct-detail-company-box { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--ct-line); }
.ct-detail-company-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.ct-detail-openings { display: block; color: var(--ct-primary); font-size: 13.5px; font-weight: 600; margin-top: 4px; }

@media (max-width: 991px) {
    .ct-jobs-split { grid-template-columns: 1fr; }
    .ct-jobs-detail { display: none; }   /* on mobile the detail opens in a bottom sheet */
}

/* Mobile bottom sheet for job detail (AJAX, stays on page) */
.ct-sheet-backdrop {
    position: fixed; inset: 0; z-index: 1190;
    background: rgba(6, 22, 44, 0.5);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.ct-sheet-backdrop.open { opacity: 1; visibility: visible; }
.ct-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    background: #fff; border-radius: 22px 22px 0 0;
    height: 92vh; max-height: 92vh;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.32, .72, 0, 1);
    box-shadow: 0 -12px 40px rgba(0, 20, 50, 0.22);
}
.ct-sheet.open { transform: translateY(0); }
.ct-sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: #cbd5e1; margin: 10px auto 2px; flex: 0 0 auto; }
.ct-sheet-close {
    position: absolute; top: 12px; right: 14px; z-index: 2;
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: #f1f5f9; color: var(--ct-ink); font-size: 16px; cursor: pointer;
}
.ct-sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 22px 18px; }
.ct-sheet-body .ct-detail-title { font-size: 22px; }
.ct-sheet-body .ct-detail-actions { display: none; }   /* replaced by sticky footer */
.ct-sheet-footer {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ct-line); background: #fff;
}
.ct-sheet-apply {
    flex: 1; text-align: center; background: var(--ct-btn); color: #fff;
    font-weight: 700; font-size: 16px; border-radius: 40px; padding: 15px 20px;
}
.ct-sheet-apply:hover { background: var(--ct-btn-hover); color: #fff; }
.ct-sheet-apply.done { background: #17825e; cursor: default; }
.ct-sheet-apply.done:hover { background: #17825e; }
.ct-sheet-apply.done i { margin-right: 6px; }
.ct-sheet-expired { flex: 1; text-align: center; color: var(--ct-muted); font-weight: 600; }
.ct-sheet-fav {
    width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%;
    border: 1px solid var(--ct-line); color: var(--ct-primary); background: #eef4fc;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
@media (min-width: 992px) {
    .ct-sheet, .ct-sheet-backdrop { display: none !important; }
}

/* Share / more dropdown inside the job detail */
.ct-dd { position: relative; display: inline-flex; }
.ct-dd-menu {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
    min-width: 210px; background: #fff;
    border: 1px solid var(--ct-line); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 30, 70, 0.16);
    padding: 6px; display: none;
}
.ct-dd-menu.ct-dd-right, .ct-dd:last-child .ct-dd-menu { left: auto; right: 0; }
.ct-dd.open .ct-dd-menu { display: block; }
.ct-dd-menu a, .ct-dd-menu button {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: transparent; border: none; text-align: left;
    padding: 10px 12px; border-radius: 8px;
    font-size: 14.5px; color: var(--ct-ink); cursor: pointer;
}
.ct-dd-menu a:hover, .ct-dd-menu button:hover { background: #eef4fc; color: var(--ct-primary); }
.ct-dd-menu i { width: 18px; text-align: center; color: var(--ct-muted); font-size: 15px; }
.ct-dd-menu a:hover i, .ct-dd-menu button:hover i { color: var(--ct-primary); }
.ct-dd-menu .fa-whatsapp { color: #25d366; }
.ct-dd-menu .fa-facebook-f { color: #1877f2; }
.ct-dd-menu .fa-twitter { color: #1da1f2; }

/* Print: only the job detail */
#ctPrintArea { display: none; }
@media print {
    body.ct-printing > * { display: none !important; }
    body.ct-printing > #ctPrintArea { display: block !important; padding: 0; }
    #ctPrintArea .ct-detail-actions,
    #ctPrintArea .ct-dd,
    #ctPrintArea .ct-detail-footer,
    #ctPrintArea .ct-detail-logo { display: none !important; }
    #ctPrintArea .ct-detail-title { font-size: 22pt; }
    #ctPrintArea .ct-detail-meta { border-color: #ccc; }
    #ctPrintArea a { color: #000; text-decoration: none; }
}

/* Centered AJAX modal (report abuse) */
.ct-modal-backdrop {
    position: fixed; inset: 0; z-index: 1290;
    background: rgba(6, 22, 44, 0.5);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.ct-modal-backdrop.open { opacity: 1; visibility: visible; }
.ct-modal {
    position: fixed; left: 50%; top: 50%; z-index: 1300;
    width: 520px; max-width: 94vw; max-height: 90vh; overflow-y: auto;
    background: #fff; border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 20, 50, 0.3);
    transform: translate(-50%, -46%) scale(.96);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.ct-modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.ct-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid var(--ct-line);
}
.ct-modal-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ct-ink); }
.ct-modal-head h3 i { color: var(--ct-accent); margin-right: 8px; }
.ct-modal-close {
    border: none; background: transparent; font-size: 28px; line-height: 1;
    color: var(--ct-muted); cursor: pointer; padding: 0 4px;
}
.ct-modal-close:hover { color: var(--ct-ink); }
.ct-modal-body { padding: 22px 24px 26px; }
.ct-modal-intro { color: var(--ct-muted); font-size: 14.5px; margin: 0 0 16px; }
.ct-modal-body .ct-fieldrow { margin-bottom: 14px; }
.ct-modal-body .ct-fieldrow label { display: block; font-size: 13px; font-weight: 700; color: var(--ct-ink); margin-bottom: 6px; }
.ct-modal-body .form-control {
    width: 100%; height: 48px; border: 1px solid var(--ct-line); border-radius: 10px;
    padding: 0 14px; font-size: 14.5px;
}
.ct-modal-body .form-control:focus { outline: none; border-color: var(--ct-primary); box-shadow: 0 0 0 3px rgba(0,75,143,.1); }
.ct-modal-body .form-control[readonly] { background: #f4f7fb; color: var(--ct-muted); }
.ct-modal-submit { width: 100%; margin-top: 6px; }
.ct-modal-errors {
    background: #fdecec; border: 1px solid #f5c2c7; color: #b02a37;
    border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px;
}
.ct-modal-errors ul { margin: 0; padding-left: 18px; }

/* Toast notification (favourites, etc.) */
.ct-toast {
    position: fixed; left: 50%; bottom: 26px; z-index: 2000;
    transform: translate(-50%, 24px);
    display: flex; align-items: center; gap: 9px;
    background: var(--ct-ink); color: #fff;
    padding: 13px 22px; border-radius: 40px;
    font-size: 14.5px; font-weight: 600;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
    max-width: 92vw;
}
.ct-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ct-toast.success i { color: #ff5b78; }
.ct-toast.info i { color: #a9bccf; }

/* Favourite (heart) toggle state */
.ct-fav-toggle { transition: all .15s ease; }
.ct-fav-toggle.active { background: #fdecef; border-color: #f4c2cf; color: #e0245e; }
.ct-fav-toggle.active i { color: #e0245e; }
.ct-fav-toggle.loading { opacity: .55; pointer-events: none; }
.ct-sheet-fav.active { background: #fdecef; color: #e0245e; }
.ct-sheet-fav.active i { color: #e0245e; }

/* Filters off-canvas footer (Borrar / Aplicar) */
.ct-offcanvas-foot {
    flex: 0 0 auto; display: flex; gap: 12px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ct-line); background: #fff;
}
.ct-oc-clear {
    flex: 1; text-align: center; border: 1.5px solid var(--ct-primary);
    color: var(--ct-primary); border-radius: 40px; padding: 13px; font-weight: 700;
}
.ct-oc-clear:hover { background: #eef4fc; color: var(--ct-primary); }
.ct-oc-apply {
    flex: 1.5; border: none; background: var(--ct-btn); color: #fff;
    border-radius: 40px; padding: 13px; font-weight: 700; font-size: 15px; cursor: pointer;
}
.ct-oc-apply:hover { background: var(--ct-btn-hover); }
.ct-offcanvas-body button[type="submit"] { display: none; } /* footer's Aplicar replaces it */

/* Prev / Next pager */
.ct-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.ct-pager-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--ct-primary); color: var(--ct-primary); background: #fff;
    border-radius: 40px; padding: 12px 28px; font-weight: 700; font-size: 15px; transition: all .15s ease;
}
.ct-pager-btn:hover { background: #eef4fc; }
.ct-pager-btn.primary { background: var(--ct-btn); border-color: var(--ct-btn); color: #fff; }
.ct-pager-btn.primary:hover { background: var(--ct-btn-hover); color: #fff; }
.ct-pager-btn.disabled { border-color: var(--ct-line); color: #b6c2d1; background: #f4f7fb; pointer-events: none; }
.ct-pager-info { color: var(--ct-muted); font-size: 14px; font-weight: 600; }

/* Mobile polish for the jobs listing */
@media (max-width: 991px) {
    .ct-jobs { padding: 14px 0 40px; }
    .ct-jobs-toolbar {
        position: sticky; top: 0; z-index: 30;
        background: var(--ct-bg-soft); padding: 10px 0; margin-bottom: 12px;
    }
    .ct-job-card { padding: 18px 16px; }
    .ct-job-card-title { font-size: 17px; }
    /* Filters panel becomes a bottom sheet on mobile */
    .ct-offcanvas {
        top: auto; bottom: 0; left: 0; right: 0;
        width: 100%; max-width: 100%; height: 88vh;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -12px 40px rgba(0, 20, 50, 0.20);
    }
    .ct-offcanvas.open { transform: translateY(0); }
}
@media (max-width: 600px) {
    .ct-pager-info { display: none; }
    .ct-pager { justify-content: space-between; gap: 10px; }
    .ct-pager-btn { flex: 1; justify-content: center; padding: 13px 10px; }
}

/* =========================================================
   Blog — Computrabajo-style magazine layout
   ========================================================= */
.ct-blog { background: var(--ct-bg-soft); padding: 34px 0 60px; }

.ct-blog-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; margin-bottom: 20px;
}
.ct-blog-h1 { font-size: 30px; font-weight: 800; color: var(--ct-ink); margin: 0 0 6px; }
.ct-blog-lead { color: var(--ct-muted); font-size: 16px; margin: 0; max-width: 620px; }

.ct-blog-search {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--ct-line);
    border-radius: 40px; padding: 5px 6px 5px 16px; min-width: 320px;
}
.ct-blog-search i { color: var(--ct-muted); }
.ct-blog-search input { border: none; outline: none; flex: 1; height: 40px; font-size: 15px; background: transparent; }
.ct-blog-search button {
    border: none; background: var(--ct-btn); color: #fff; font-weight: 700;
    border-radius: 40px; padding: 9px 22px; cursor: pointer;
}
.ct-blog-search button:hover { background: var(--ct-btn-hover); }

.ct-blog-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 600; color: var(--ct-muted); margin-bottom: 10px;
}
.ct-blog-back:hover { color: var(--ct-primary); }
.ct-blog-back i { font-size: 12px; }

.ct-blog-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ct-blog-chips a {
    background: #fff; border: 1px solid var(--ct-line); color: var(--ct-ink);
    border-radius: 30px; padding: 7px 16px; font-size: 14px; font-weight: 600;
    transition: all .15s ease;
}
.ct-blog-chips a:hover, .ct-blog-chips a.active { background: var(--ct-primary); border-color: var(--ct-primary); color: #fff; }

/* Featured hero */
.ct-blog-hero {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
    background: #fff; border: 1px solid var(--ct-line); border-radius: 18px;
    overflow: hidden; margin-bottom: 40px;
    box-shadow: 0 12px 30px rgba(0, 30, 70, 0.06);
}
.ct-blog-hero-media { position: relative; display: block; min-height: 300px; }
.ct-blog-hero-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ct-blog-badge {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    background: var(--ct-accent); color: #fff; font-size: 12px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase; border-radius: 20px; padding: 5px 14px;
}
.ct-blog-hero-body { padding: 40px 42px; display: flex; flex-direction: column; justify-content: center; }
.ct-blog-hero-body h2 { font-size: 27px; font-weight: 800; line-height: 1.25; margin: 12px 0; }
.ct-blog-hero-body h2 a { color: var(--ct-ink); }
.ct-blog-hero-body h2 a:hover { color: var(--ct-primary); }
.ct-blog-hero-body p { color: #445; font-size: 15.5px; line-height: 1.65; margin: 0 0 18px; }

.ct-blog-cat {
    display: inline-block; color: var(--ct-primary); background: #eef4fc;
    border-radius: 20px; padding: 4px 12px; font-size: 12.5px; font-weight: 700;
    letter-spacing: .02em;
}
a.ct-blog-cat:hover { background: var(--ct-primary); color: #fff; }

.ct-blog-readmore { color: var(--ct-primary); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.ct-blog-readmore i { transition: transform .15s ease; }
.ct-blog-readmore:hover { color: var(--ct-primary-dark); }
.ct-blog-readmore:hover i { transform: translateX(3px); }
.ct-blog-readmore.sm { font-size: 14px; }

.ct-blog-titlewrap { margin: 0 0 20px; }
.ct-blog-titlewrap.center { text-align: center; margin: 10px 0 28px; }
.ct-blog-section-title { font-size: 22px; font-weight: 800; color: var(--ct-ink); margin: 0; }
.ct-blog-titlewrap.center .ct-blog-section-title { font-size: 30px; }
.ct-blog-subtitle { display: none; color: var(--ct-muted); font-size: 16px; margin: 8px 0 0; }
.ct-blog-loading { display: none; justify-content: center; padding: 30px 0; }

/* Card grid */
.ct-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ct-blog-card {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 16px;
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ct-blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 30, 70, 0.10); border-color: #cdd9e8; }
.ct-blog-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #eef2f7; }
.ct-blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ct-blog-card:hover .ct-blog-card-media img { transform: scale(1.05); }
.ct-blog-card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ct-blog-card-body h4 { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 2px 0 0; }
.ct-blog-card-body h4 a { color: var(--ct-ink); }
.ct-blog-card-body h4 a:hover { color: var(--ct-primary); }
.ct-blog-card-body p { color: var(--ct-muted); font-size: 14px; line-height: 1.55; margin: 0; flex: 1; }
.ct-blog-cat { align-self: flex-start; }

.ct-blog-empty {
    background: #fff; border: 1px dashed var(--ct-line); border-radius: 14px;
    padding: 50px; text-align: center; color: var(--ct-muted);
}
.ct-blog-pagination { margin-top: 34px; display: flex; justify-content: center; }
.ct-blog-pagination .pagination { flex-wrap: wrap; gap: 4px; }

/* Home "Últimas noticias" section (reuses blog cards) */
.ct-home-blogs { background: var(--ct-bg-soft); }
.ct-home-blogs .titleTop { text-align: center; margin-bottom: 26px; }
.ct-home-blogs .titleTop h3 { font-weight: 800; }
.ct-home-blogs .viewallbtn { text-align: center; }

/* Blog detail (article page) */
.ct-post { background: var(--ct-bg-soft); padding: 34px 0 60px; }
.ct-post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start; }
.ct-post-main { background: #fff; border: 1px solid var(--ct-line); border-radius: 18px; padding: 36px 40px; }
.ct-post-title { font-size: 32px; font-weight: 800; color: var(--ct-ink); line-height: 1.2; margin: 0 0 14px; }
.ct-post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.ct-post-date { color: var(--ct-muted); font-size: 14px; }
.ct-post-date i { margin-right: 5px; }
.ct-post-cover { border-radius: 14px; overflow: hidden; margin-bottom: 24px; aspect-ratio: 16 / 8; background: #eef2f7; }
.ct-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.ct-post-content { color: #33414f; font-size: 16px; line-height: 1.75; }
.ct-post-content p { margin: 0 0 16px; }
.ct-post-content h2, .ct-post-content h3 { color: var(--ct-ink); font-weight: 800; margin: 26px 0 12px; }
.ct-post-content ul, .ct-post-content ol { margin: 0 0 16px; padding-left: 22px; }
.ct-post-content img { max-width: 100%; height: auto; border-radius: 10px; }
.ct-post-content a { color: var(--ct-primary); text-decoration: underline; }

.ct-post-side { position: sticky; top: var(--ct-sticky-top); display: flex; flex-direction: column; gap: 20px; }
.ct-side-box { background: #fff; border: 1px solid var(--ct-line); border-radius: 16px; padding: 20px 20px; }
.ct-side-title { font-size: 16px; font-weight: 800; color: var(--ct-ink); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ct-line); }
.ct-side-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ct-side-item { display: flex; gap: 12px; align-items: flex-start; }
.ct-side-thumb { flex: 0 0 74px; width: 74px; height: 58px; border-radius: 8px; overflow: hidden; background: #eef2f7; }
.ct-side-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ct-side-text { display: flex; flex-direction: column; gap: 4px; }
.ct-side-item-title { font-size: 14px; font-weight: 600; color: var(--ct-ink); line-height: 1.35; }
.ct-side-item:hover .ct-side-item-title { color: var(--ct-primary); }
.ct-side-item-date { font-size: 12px; color: var(--ct-muted); }
.ct-blog-search.sm { min-width: 0; width: 100%; padding: 4px 5px 4px 14px; }
.ct-blog-search.sm input { height: 36px; font-size: 14px; }
.ct-blog-search.sm button { padding: 7px 16px; font-size: 14px; }
.ct-blog-chips.vertical { flex-direction: column; align-items: stretch; gap: 8px; }
.ct-blog-chips.vertical a { text-align: left; }

/* Also / prev-next / more */
.ct-post-also {
    background: #eef4fc; border: 1px solid #d7e6f7; border-radius: 40px;
    padding: 14px 24px; text-align: center; margin: 34px 0 6px; font-size: 15px; color: var(--ct-ink);
}
.ct-post-also a { color: var(--ct-primary); font-weight: 700; text-decoration: underline; margin-left: 6px; }

.ct-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 22px 0 10px; }
.ct-nav-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--ct-line); border-radius: 40px;
    padding: 16px 26px; transition: all .15s ease;
}
.ct-nav-card:hover { border-color: var(--ct-primary); box-shadow: 0 10px 24px rgba(0,75,143,.10); }
.ct-nav-card.next { text-align: right; justify-content: flex-end; }
.ct-nav-card i { color: var(--ct-primary); font-size: 15px; flex: 0 0 auto; }
.ct-nav-card span { display: flex; flex-direction: column; min-width: 0; }
.ct-nav-card small { color: var(--ct-muted); font-size: 12.5px; }
.ct-nav-card strong { color: var(--ct-ink); font-weight: 700; font-size: 15px; }
.ct-nav-card:hover strong { color: var(--ct-primary); }

.ct-post-more { margin-top: 44px; }
.ct-post-more-title { text-align: center; font-size: 26px; font-weight: 800; color: var(--ct-primary); margin: 0 0 26px; }

@media (max-width: 991px) {
    .ct-blog-grid { grid-template-columns: repeat(2, 1fr); }
    .ct-blog-hero { grid-template-columns: 1fr; }
    .ct-blog-hero-media { min-height: 220px; position: relative; }
    .ct-blog-hero-media img { position: relative; }
    .ct-post-grid { grid-template-columns: 1fr; }
    .ct-post-side { position: static; }
    .ct-post-main { padding: 26px 22px; }
    .ct-post-title { font-size: 25px; }
    .ct-post-nav { grid-template-columns: 1fr; }
    .ct-nav-card.next { text-align: left; justify-content: flex-start; flex-direction: row-reverse; }
}
@media (max-width: 600px) {
    .ct-blog-grid { grid-template-columns: 1fr; }
    .ct-blog-search { min-width: 100%; }
    .ct-blog-head { gap: 14px; }
}

/* =========================================================
   Companies listing — Computrabajo-style rows
   ========================================================= */
.ct-cos { background: var(--ct-bg-soft); padding: 26px 0 60px; }
.ct-cos-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ct-cos-title { font-size: 26px; font-weight: 800; color: var(--ct-ink); margin: 0; }
.ct-cos-title small, .ct-cos-title span { color: var(--ct-primary); }
.ct-cos-filter-toggle {
    display: none; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--ct-line); color: var(--ct-ink);
    font-weight: 600; font-size: 14px; border-radius: 30px; padding: 9px 18px; cursor: pointer;
}
.ct-cos-filter-toggle.active, .ct-cos-filter-toggle:hover { border-color: var(--ct-primary); color: var(--ct-primary); }

.ct-cos-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 26px; align-items: start; }

/* Sidebar (static on desktop, bottom-sheet on mobile — same UX as jobs filter) */
.ct-co-offcanvas {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 16px;
    position: sticky; top: var(--ct-sticky-top);
    display: flex; flex-direction: column;
}
.ct-co-offcanvas form { display: flex; flex-direction: column; min-height: 0; }
.ct-co-offcanvas .ct-offcanvas-head { display: none; }       /* no header chrome on desktop */
.ct-co-offcanvas-body { padding: 22px 20px; }
.ct-co-offcanvas .ct-offcanvas-foot { border-top: 1px solid var(--ct-line); }
.ct-co-backdrop { display: none; }
.ct-cos-side-title { font-size: 17px; font-weight: 800; color: var(--ct-ink); margin: 0 0 16px; }
.ct-cos-field { margin-bottom: 16px; }
.ct-cos-field > label { display: block; font-size: 13px; font-weight: 700; color: var(--ct-ink); margin-bottom: 6px; }
.ct-cos-field .form-control {
    width: 100%; height: 44px; border: 1px solid var(--ct-line); border-radius: 10px;
    padding: 0 12px; font-size: 14px; background: #fff;
}
.ct-cos-field .form-control:focus { outline: none; border-color: var(--ct-primary); box-shadow: 0 0 0 3px rgba(0,75,143,.1); }
.ct-cos-industries { list-style: none; padding: 0; margin: 0; max-height: 260px; overflow-y: auto; }
.ct-cos-industries li { margin-bottom: 4px; }
.ct-cos-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ct-ink); cursor: pointer; margin: 0; padding: 4px 0; }
.ct-cos-check input { width: 16px; height: 16px; accent-color: var(--ct-primary); }
.ct-cos-check span { flex: 1; }
.ct-cos-check em { font-style: normal; color: var(--ct-muted); font-size: 12.5px; background: #eef4fc; border-radius: 20px; padding: 1px 9px; }
.ct-cos-apply {
    width: 100%; border: none; background: var(--ct-btn); color: #fff;
    font-weight: 700; border-radius: 40px; padding: 12px; margin-top: 8px; cursor: pointer;
}
.ct-cos-apply:hover { background: var(--ct-btn-hover); }

/* Company rows */
.ct-cos-list { display: flex; flex-direction: column; gap: 14px; }
.ct-co-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 20px;
    background: #fff; border: 1px solid var(--ct-line); border-radius: 14px;
    padding: 22px 24px; transition: border-color .15s ease, box-shadow .15s ease;
}
.ct-co-row:hover { border-color: #cdd9e8; box-shadow: 0 8px 22px rgba(0, 30, 70, 0.07); }
.ct-co-row[data-href] { cursor: pointer; }
.ct-co-row[data-href]:hover { border-color: var(--ct-primary); box-shadow: 0 10px 26px rgba(0, 30, 70, 0.10); }
.ct-co-row[data-href]:hover .ct-co-name { text-decoration: underline; }
.ct-co-row[data-href]:focus-visible { outline: 2px solid var(--ct-primary); outline-offset: 2px; }
.ct-co-row[data-href]:active { box-shadow: 0 4px 12px rgba(0, 30, 70, 0.10); }
.ct-co-name { font-size: 19px; font-weight: 700; color: var(--ct-primary); }
.ct-co-name:hover { text-decoration: underline; color: var(--ct-primary); }
.ct-co-sector { font-size: 14px; font-weight: 700; color: var(--ct-ink); margin: 4px 0 8px; }
.ct-co-desc { font-size: 14px; color: var(--ct-muted); line-height: 1.55; margin: 0 0 10px; }
.ct-co-offers { font-size: 14px; font-weight: 700; color: var(--ct-primary); }
.ct-co-offers:hover { text-decoration: underline; color: var(--ct-primary); }
.ct-co-stats { display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--ct-line); padding-left: 20px; }
.ct-co-stat { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ct-ink); line-height: 1.35; }
.ct-co-stat i { color: var(--ct-muted); width: 18px; text-align: center; margin-top: 2px; flex: 0 0 18px; }

/* ---------------------------------------------------------
   Collapsible filter groups (candidate search)
   Native <details>/<summary> — no JS.
   --------------------------------------------------------- */
.ct-cos-group { border-bottom: 1px solid var(--ct-line); padding: 2px 0; }
.ct-cos-group:last-of-type { border-bottom: 0; }
.ct-cos-group > summary {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 2px; cursor: pointer; list-style: none;
    font-size: 13.5px; font-weight: 700; color: var(--ct-ink);
    user-select: none;
}
.ct-cos-group > summary::-webkit-details-marker { display: none; }
.ct-cos-group > summary::marker { content: ''; }
.ct-cos-group > summary > span { flex: 1; }
.ct-cos-group > summary:hover { color: var(--ct-primary); }
.ct-cos-group > summary i {
    font-size: 12px; color: var(--ct-muted); transition: transform .2s ease; flex: 0 0 auto;
}
.ct-cos-group[open] > summary i { transform: rotate(180deg); }
.ct-cos-group[open] > summary { color: var(--ct-primary); }
.ct-cos-count {
    background: var(--ct-primary); color: #fff; font-size: 11px; font-weight: 700;
    border-radius: 20px; padding: 1px 8px; line-height: 1.6;
}
.ct-cos-group > summary:focus-visible { outline: 2px solid var(--ct-primary); outline-offset: 2px; border-radius: 4px; }
.ct-cos-group .ct-cos-industries { padding-bottom: 12px; }
.ct-cos-group .ct-cos-industries:empty::after {
    content: attr(data-empty); display: block; font-size: 13px; color: var(--ct-muted); padding-bottom: 12px;
}
.ct-cos-salary { display: flex; align-items: center; gap: 8px; padding: 2px 0 14px; }
.ct-cos-salary .form-control {
    border: 1px solid var(--ct-line); border-radius: 8px; padding: 9px 11px; font-size: 14px; width: 100%;
}
.ct-cos-salary .form-control:focus {
    outline: none; border-color: var(--ct-primary); box-shadow: 0 0 0 3px rgba(0, 75, 143, .1);
}
.ct-cos-salary span { color: var(--ct-muted); }

/* Results column next to the filter (candidate cards keep their own styling) */
.ct-cos-results { min-width: 0; }
.ct-cos-results .userlisting { list-style: none; padding: 0; margin: 0; }
.ct-cos-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-top: 10px;
}
.ct-cos-foot .showreslt { font-size: 13.5px; color: var(--ct-muted); }
.ct-cos-foot .ct-cos-pagination,
.ct-cos-foot .ct-pager { margin-top: 0; }

@media (max-width: 991px) {
    .ct-cos-grid > form { display: contents; }   /* let the sheet escape the grid */
    .ct-cos-foot { justify-content: center; }
}

.ct-cos-pagination { margin-top: 22px; display: flex; justify-content: center; }
.ct-cos-pagination .pagination { flex-wrap: wrap; gap: 4px; }

@media (max-width: 991px) {
    .ct-cos-filter-toggle { display: inline-flex; }
    .ct-cos-grid { grid-template-columns: 1fr; }
    .ct-co-row { grid-template-columns: 1fr; padding: 18px 18px; gap: 14px; }
    .ct-co-stats { border-left: none; border-top: 1px solid var(--ct-line); padding-left: 0; padding-top: 14px; }

    /* Filter becomes a bottom sheet (identical UX to the jobs filter) */
    .ct-co-offcanvas {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        width: 100%; max-width: 100%; height: 88vh;
        border-radius: 22px 22px 0 0; border: none;
        transform: translateY(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 0 -12px 40px rgba(0, 20, 50, 0.20); z-index: 1060;
    }
    .ct-co-offcanvas.open { transform: translateY(0); }
    .ct-co-offcanvas form { height: 100%; }
    .ct-co-offcanvas .ct-offcanvas-head { display: flex; }
    .ct-co-offcanvas .ct-cos-side-title { display: none; }
    .ct-co-offcanvas-body { flex: 1 1 auto; overflow-y: auto; }
    .ct-co-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1055;
        background: rgba(6, 22, 44, 0.45);
        opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
    }
    .ct-co-backdrop.open { opacity: 1; visibility: visible; }
}

/* =========================================================
   Footer — dark charcoal (Computrabajo-style)
   ========================================================= */
.footerWrap {
    background: #23272f;
    padding: 38px 0 28px;
}
.footerWrap h5 {
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 14px;
}
.footerWrap .quicklinks { list-style: none; padding: 0; margin: 0; }
.footerWrap .quicklinks li { margin-bottom: 8px; }
.footerWrap .quicklinks li a {
    color: #aeb6c3;
    font-size: 14.5px;
    transition: color .15s ease;
}
.footerWrap .quicklinks li a:hover { color: #fff; }

.footerWrap .address {
    color: #aeb6c3; font-size: 14.5px; line-height: 1.6;
    position: relative; padding-left: 26px; margin-bottom: 14px;
}
.footerWrap .address::before {
    content: "\f3c5"; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 2px; top: 2px; color: #8f9aab;
}
.footerWrap .email {
    position: relative; padding-left: 26px; margin-bottom: 18px;
}
.footerWrap .email::before {
    content: "\f0e0"; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 2px; top: 2px; color: #8f9aab;
}
.footerWrap .email a { color: #aeb6c3; font-size: 14.5px; }
.footerWrap .email a:hover { color: #fff; }
.footerWrap .social { margin-top: 6px; }
.footerWrap .social a { margin-right: 10px; font-size: 22px; }

/* Bottom bar stays light */
.copyright {
    background: #fff;
    border-top: 1px solid var(--ct-line);
    padding: 18px 0;
}
.copyright .bttxt { color: var(--ct-muted); font-size: 14px; }
.copyright .bttxt a { color: var(--ct-primary); }
.copyright .paylogos { text-align: right; }
.copyright .paylogos img { max-height: 26px; width: auto; }

@media (max-width: 767px) {
    .footerWrap { padding: 40px 0 30px; }
    .footerWrap h5 { margin-top: 22px; }
    .copyright .paylogos { text-align: left; margin-top: 10px; }
}

/* =========================================================
   Company profile — Computrabajo-style (header + tabs)
   ========================================================= */
.ct-comp { background: #fff; padding: 30px 0 60px; }

.ct-comp-head { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.ct-comp-logo img {
    width: 110px; height: 88px; object-fit: contain;
    border: 1px solid var(--ct-line); border-radius: 10px; background: #fff; padding: 6px;
}
.ct-comp-headtext { flex: 1; min-width: 200px; }
.ct-comp-name { font-size: 26px; font-weight: 800; color: var(--ct-ink); margin: 0 0 4px; }
.ct-comp-followers { color: var(--ct-muted); font-size: 15px; }
.ct-comp-actions { display: flex; align-items: center; gap: 10px; }
.ct-follow-btn {
    border: 1.5px solid var(--ct-primary); background: #fff; color: var(--ct-primary);
    font-weight: 700; font-size: 15px; border-radius: 40px; padding: 10px 24px; cursor: pointer;
    transition: all .15s ease;
}
.ct-follow-btn:hover { background: #eef4fc; }
.ct-follow-btn.following { background: var(--ct-primary); color: #fff; }

/* Tabs */
.ct-comp-tabs {
    display: flex; background: #eef4fc; border-radius: 40px; padding: 5px;
    margin-bottom: 28px; gap: 4px;
}
.ct-comp-tabs button {
    flex: 1; border: none; background: transparent; color: var(--ct-muted);
    font-weight: 600; font-size: 15px; border-radius: 34px; padding: 12px 10px; cursor: pointer;
    transition: all .15s ease;
}
.ct-comp-tabs button em { font-style: normal; color: #9db2c9; margin-left: 4px; }
.ct-comp-tabs button.active { background: #fff; color: var(--ct-ink); font-weight: 700; box-shadow: 0 4px 12px rgba(0,30,70,.08); }
.ct-comp-tabs button.active em { color: var(--ct-primary); }

/* Empresa tab */
.ct-comp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; align-items: start; }
.ct-comp-h2 { font-size: 21px; font-weight: 800; color: var(--ct-ink); margin: 0 0 14px; }
.ct-comp-h3 { font-size: 18px; font-weight: 800; color: var(--ct-ink); margin: 0 0 18px; }
.ct-comp-about { color: #33414f; font-size: 15.5px; line-height: 1.7; margin: 0 0 18px; }
.ct-comp-meta { display: flex; flex-wrap: wrap; gap: 18px; color: var(--ct-muted); font-size: 14.5px; }
.ct-comp-meta i { color: var(--ct-primary); margin-right: 6px; }
.ct-comp-sep { border: 0; border-top: 1px solid var(--ct-line); margin: 24px 0; }
.ct-comp-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ct-comp-detail { display: flex; flex-direction: column; gap: 3px; }
.ct-comp-detail i { color: var(--ct-primary); font-size: 20px; margin-bottom: 6px; }
.ct-comp-detail strong { font-size: 12.5px; color: var(--ct-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.ct-comp-detail span { font-size: 15px; color: var(--ct-ink); font-weight: 700; }
.ct-comp-side { position: sticky; top: var(--ct-sticky-top); display: flex; flex-direction: column; gap: 16px; }
.ct-comp-map { border: 1px solid var(--ct-line); border-radius: 14px; overflow: hidden; }
.ct-comp-map iframe { width: 100%; height: 300px; border: 0; display: block; }
.ct-comp-web {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    border: 1.5px solid var(--ct-primary); color: var(--ct-primary);
    border-radius: 40px; padding: 11px; font-weight: 700;
}
.ct-comp-web:hover { background: #eef4fc; color: var(--ct-primary); }

@media (max-width: 991px) {
    .ct-comp-grid { grid-template-columns: 1fr; }
    .ct-comp-side { position: static; }
    .ct-comp-details { grid-template-columns: repeat(2, 1fr); }
    .ct-comp-name { font-size: 21px; }
    .ct-comp-logo img { width: 84px; height: 68px; }
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 767px) {
    .ct-hero { padding: 60px 16px 110px; }
    .ct-hero-inner h1 { font-size: 28px; }
    .ct-hero-inner .ct-sub { font-size: 16px; }
    .ct-searchbar {
        flex-direction: column;
        border-radius: 20px;
        padding: 12px;
        gap: 10px;
    }
    .ct-field + .ct-field { border-left: none; border-top: 1px solid var(--ct-line); }
    .ct-searchbar .form-control { height: 48px; }
    .ct-search-btn { justify-content: center; padding: 14px; border-radius: 12px; }
    .ct-steps { grid-template-columns: 1fr; }
    .ct-emp-band { padding: 28px 18px; }
    .ct-emp-title { font-size: 19px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .ct-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   Apply modal ("Postularme") — centered dialog on desktop,
   bottom-sheet on mobile.
   ============================================================ */
.ct-modal-apply .ct-modal-head h3 i { color: var(--ct-primary); }

.ct-apply-job {
    padding: 15px 24px;
    background: var(--ct-bg-soft);
    border-bottom: 1px solid var(--ct-line);
}
.ct-apply-job-title { font-size: 16px; font-weight: 800; color: var(--ct-ink); line-height: 1.32; }
.ct-apply-job-company { font-size: 13.5px; color: var(--ct-muted); margin-top: 3px; }

.ct-fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ct-modal-body .ct-fieldrow label em { font-style: normal; font-weight: 500; color: var(--ct-muted); }
.ct-field-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ct-muted); }
.ct-modal-body input[type="file"].form-control { height: auto; padding: 11px 14px; line-height: 1.35; }
.ct-modal-body select.form-control { appearance: auto; background: #fff; }

.ct-apply-note {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--ct-bg-soft); border: 1px solid var(--ct-line);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.ct-apply-note i { font-size: 20px; color: var(--ct-primary); margin-top: 2px; }
.ct-apply-note p { margin: 0; font-size: 14.5px; color: var(--ct-ink); line-height: 1.5; }
.ct-apply-note.ok { background: #eaf7ee; border-color: #bfe5cb; }
.ct-apply-note.ok i { color: #1a7f37; }
.ct-apply-note.warn { background: #fff6e6; border-color: #ffd9a0; }
.ct-apply-note.warn i { color: #b26a00; }

.ct-apply-alt {
    display: block; text-align: center; margin-top: 14px;
    font-size: 14px; font-weight: 600; color: var(--ct-primary);
}
.ct-apply-alt:hover { text-decoration: underline; color: var(--ct-primary); }

a.ct-modal-submit { display: block; text-align: center; text-decoration: none; }
.ct-modal-submit[disabled] { opacity: .6; cursor: not-allowed; }

/* Mobile: every ct-modal becomes a bottom-sheet */
@media (max-width: 767px) {
    .ct-modal {
        left: 0; right: 0; top: auto; bottom: 0;
        width: 100%; max-width: 100%; max-height: 92vh;
        border-radius: 22px 22px 0 0;
        padding-top: 10px;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, visibility .2s ease;
        box-shadow: 0 -12px 40px rgba(0, 20, 50, 0.22);
    }
    .ct-modal.open { transform: translateY(0); }
    .ct-modal::before {
        content: ''; display: block;
        width: 42px; height: 4px; border-radius: 4px;
        background: #d6dee8; margin: 0 auto 6px;
    }
    .ct-modal-head { padding: 12px 18px 14px; }
    .ct-modal-head h3 { font-size: 17px; }
    .ct-apply-job { padding: 13px 18px; }
    .ct-modal-body { padding: 18px 18px calc(24px + env(safe-area-inset-bottom)); }
    .ct-fieldgrid { grid-template-columns: 1fr; }
}

/* Required-field marker + error state inside the modal */
.ct-req { color: #e01010; font-weight: 700; }
.ct-modal-body .ct-fieldrow.has-error .form-control {
    border-color: #e01010;
    box-shadow: 0 0 0 3px rgba(224, 16, 16, .09);
}
.ct-modal-errors strong { display: block; margin-bottom: 4px; }

/* Auth: helper text + status alert (password recovery) */
.ct-auth-hint { font-size: 14.5px; color: var(--ct-muted); line-height: 1.6; margin: 0 0 20px; }
.ct-auth-alert {
    display: flex; align-items: flex-start; gap: 10px;
    border-radius: 12px; padding: 13px 16px; margin-bottom: 18px;
    font-size: 14.5px; line-height: 1.5;
}
.ct-auth-alert i { font-size: 18px; margin-top: 1px; }
.ct-auth-alert.ok { background: #eaf7ee; border: 1px solid #bfe5cb; color: #14622c; }
.ct-auth-alert.ok i { color: #1a7f37; }

/* Auth: email verification screen */
.ct-verify-icon {
    width: 66px; height: 66px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 75, 143, .08);
    color: var(--ct-primary); font-size: 28px;
    margin-bottom: 18px;
}
.ct-verify-mail { color: var(--ct-ink); font-weight: 700; word-break: break-all; }

.ct-verify-tips { list-style: none; margin: 0 0 22px; padding: 0; }
.ct-verify-tips li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: var(--ct-muted); line-height: 1.5;
    padding: 7px 0;
}
.ct-verify-tips li i { color: var(--ct-primary); font-size: 15px; width: 18px; text-align: center; margin-top: 2px; flex: 0 0 18px; }

.ct-auth-formel .ct-auth-btn i { margin-right: 8px; }

.ct-verify-actions {
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid var(--ct-line);
}
.ct-verify-actions a {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 600; color: var(--ct-primary);
}
.ct-verify-actions a:hover { text-decoration: underline; color: var(--ct-primary); }

/* =========================================================
   Panel del empleador  (.ct-panel)
   Shared shell for every employer dashboard screen: sidebar,
   stat tiles, content cards, tables, empty states.
   ========================================================= */

.ct-panel { background: var(--ct-bg-soft); padding: 15px 0 56px; }

/* ---- Sidebar ---- */
.ct-panel .usernavwrap {
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
    margin-bottom: 24px;
}
.ct-panel-id {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--ct-line);
    background: linear-gradient(180deg, #f8fafd 0%, #fff 100%);
}
.ct-panel-id img {
    width: 44px; height: 44px; border-radius: 10px;
    object-fit: cover; border: 1px solid var(--ct-line); background: #fff; flex: 0 0 44px;
}
.ct-panel-id .nm {
    font-size: 15px; font-weight: 700; color: var(--ct-ink); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-panel-id .rl { font-size: 12px; color: var(--ct-muted); }

.ct-panel .usernavdash { padding: 8px; margin: 0; list-style: none; }
.ct-panel .usernavdash li { margin: 0; }
.ct-panel .usernavdash li a {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; margin-bottom: 2px;
    border-radius: 8px; border: 0;
    font-size: 14.5px; font-weight: 500; color: #46586c;
    text-decoration: none; transition: background .15s, color .15s;
}
.ct-panel .usernavdash li i {
    width: 18px; font-size: 15px; text-align: center; color: #8fa1b5; transition: color .15s;
}
.ct-panel .usernavdash li a:hover { background: var(--ct-bg-soft); color: var(--ct-primary); }
.ct-panel .usernavdash li a:hover i { color: var(--ct-primary); }
.ct-panel .usernavdash li.active a { background: #e8f0fa; color: var(--ct-primary); font-weight: 700; }
.ct-panel .usernavdash li.active a i { color: var(--ct-primary); }
.ct-panel .usernavdash li.ct-nav-sep { border-top: 1px solid var(--ct-line); margin: 8px 0; }
.ct-panel .usernavdash li.ct-nav-out a { color: #b4232a; }
.ct-panel .usernavdash li.ct-nav-out a i { color: #b4232a; }
.ct-panel .usernavdash li.ct-nav-out a:hover { background: #fdeced; color: #8f1c22; }

/* ---- Stat tiles ---- */
/* Rejilla propia: al anular los márgenes negativos de .row, el padding de
   las columnas metía la fila 12px por lado y la desalineaba con las
   secciones de abajo. grid-auto-flow sirve igual para 3 o 4 indicadores. */
.ct-panel .profilestat {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 20px;
    list-style: none; padding: 0; margin: 0 0 24px;
}
.ct-panel .profilestat > li {
    width: auto; max-width: none; flex: none; padding: 0; margin: 0;
}
@media (max-width: 991px) {
    .ct-panel .profilestat {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.ct-panel .profilestat .inbox {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--ct-line); border-radius: 12px;
    padding: 18px 20px; text-decoration: none; height: 100%;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.ct-panel .profilestat .inbox:hover {
    border-color: #c9d8ea; box-shadow: 0 6px 18px rgba(16, 24, 40, .08); transform: translateY(-1px);
}
.ct-panel .profilestat .inbox i {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: #e8f0fa; color: var(--ct-primary); font-size: 18px;
}
.ct-panel .profilestat .inbox h6 {
    margin: 0; font-size: 26px; font-weight: 800; color: var(--ct-ink); line-height: 1.1;
}
.ct-panel .profilestat .inbox h6 strong {
    display: block; font-size: 13px; font-weight: 500; color: var(--ct-muted); margin-top: 3px;
}

/* ---- Content card ---- */
.ct-panel .myads,
.ct-panel .userccount,
.ct-panel .instoretxt,
.ct-panel .ct-card {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    padding: 24px; margin-bottom: 24px;
}
.ct-panel .myads > h3,
.ct-panel .instoretxt > h3,
.ct-panel .ct-card > h3,
.ct-panel .four-plan > h3 {
    font-size: 19px; font-weight: 800; color: var(--ct-ink);
    margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ct-line);
}
.ct-panel .four-plan > h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }

/* ---- Status banner ---- */
.ct-panel .userprofilealert {
    background: #eaf7ee; border: 1px solid #bfe5cb; border-radius: 12px;
    padding: 14px 18px; margin-bottom: 24px; animation: none;
}
.ct-panel .userprofilealert h5 { font-size: 14.5px; font-weight: 600; color: #14622c; }
.ct-panel .userprofilealert h5 i { font-size: 17px; color: #1a7f37; margin-right: 10px; }
.ct-panel .userprofilealert.is-warn { background: #fff6e5; border-color: #f5d9a3; }
.ct-panel .userprofilealert.is-warn h5 { color: #7a4b07; }
.ct-panel .userprofilealert.is-warn h5 i { color: #b06f0a; }

/* ---- Tables ---- */
.ct-panel .table { border: 0; margin-bottom: 0; font-size: 14px; }
.ct-panel .table > :not(caption) > * > * { padding: 13px 14px; }
.ct-panel .table thead th,
.ct-panel .table thead.table-dark th {
    background: var(--ct-bg-soft); color: var(--ct-muted);
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    border-bottom: 1px solid var(--ct-line); border-right: 0; text-align: left; white-space: nowrap;
}
.ct-panel .table tbody td, .ct-panel .table tbody th {
    border-top: 1px solid var(--ct-line); color: var(--ct-ink);
    text-align: left; vertical-align: middle; background: transparent;
}
.ct-panel .table tbody tr:hover td { background: #fafcfe; }
.ct-panel .table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }

/* ---- Empty state ---- */
.ct-panel .nodatabox {
    width: 100%; text-align: center; padding: 44px 20px;
    background: var(--ct-bg-soft); border: 1px dashed #cdd8e5; border-radius: 12px;
}
.ct-panel .nodatabox h4 { font-size: 16px; font-weight: 600; color: var(--ct-muted); margin: 0; }
.ct-panel .nodatabox .viewallbtn a {
    display: inline-block; margin-top: 14px; padding: 10px 22px; border-radius: 8px;
    background: var(--ct-btn); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
}
.ct-panel .nodatabox .viewallbtn a:hover { background: var(--ct-btn-hover); }

/* ---- List rows (followers, hired, unlocked) ---- */
.ct-panel .searchList { list-style: none; padding: 0; margin: 0; }
.ct-panel .searchList > li {
    border: 1px solid var(--ct-line); border-radius: 10px;
    padding: 18px; margin-bottom: 14px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.ct-panel .searchList > li:hover { border-color: #c9d8ea; box-shadow: 0 4px 14px rgba(16, 24, 40, .06); }
.ct-panel .searchList .jobinfo h3 { font-size: 16px; font-weight: 700; margin: 0 0 3px; }
.ct-panel .searchList .jobinfo h3 a { color: var(--ct-ink); text-decoration: none; }
.ct-panel .searchList .jobinfo h3 a:hover { color: var(--ct-primary); }
.ct-panel .searchList .location { font-size: 13px; color: var(--ct-muted); }
.ct-panel .searchList > li > p { font-size: 13.5px; color: var(--ct-muted); margin: 12px 0 0; }
.ct-panel .listbtn a {
    display: inline-block; padding: 9px 18px; border-radius: 8px;
    border: 1px solid var(--ct-btn); background: #fff; color: var(--ct-btn);
    font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ct-panel .listbtn a:hover { background: var(--ct-btn); color: #fff; }
.ct-panel .minsalary { font-size: 14px; font-weight: 700; color: var(--ct-ink); }
.ct-panel .minsalary span { font-weight: 400; color: var(--ct-muted); }

/* ---- Candidate cards (Usuarios desbloqueados) ---- */
.ct-panel .userlisting { list-style: none; padding: 0; margin: 0; }
.ct-panel .seekerbox {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 12px;
    padding: 22px 18px; text-align: center; height: 100%; margin-bottom: 20px;
    transition: border-color .15s, box-shadow .15s;
}
.ct-panel .seekerbox:hover { border-color: #c9d8ea; box-shadow: 0 6px 18px rgba(16, 24, 40, .08); }
.ct-panel .seekerbox .userltimg img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.ct-panel .seekerbox h3 { font-size: 16px; font-weight: 700; margin: 12px 0 6px; color: var(--ct-ink); }
.ct-panel .seekerbox .hmcate { font-size: 13px; color: var(--ct-muted); margin-bottom: 3px; }
.ct-panel .seekerbox .listbtn { margin-top: 14px; }

/* ---- Job cards (Administrar empleos) ---- */
.ct-panel .featuredlist { list-style: none; padding: 0; margin: 0; }
.ct-panel .featuredlist .jobint {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 10px;
    padding: 18px; height: 100%; margin-bottom: 20px; transition: border-color .15s, box-shadow .15s;
}
.ct-panel .featuredlist .jobint:hover { border-color: #c9d8ea; box-shadow: 0 4px 14px rgba(16, 24, 40, .06); }
.ct-panel .featuredlist .fticon {
    display: inline-flex; align-items: center; gap: 6px;
    background: #e8f0fa; color: var(--ct-primary); border-radius: 999px;
    padding: 4px 12px; font-size: 12px; font-weight: 600; margin-bottom: 10px;
}
.ct-panel .featuredlist h4 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.ct-panel .featuredlist h4 a { color: var(--ct-ink); text-decoration: none; }
.ct-panel .featuredlist h4 a:hover { color: var(--ct-primary); }
.ct-panel .featuredlist .salary { font-size: 13.5px; color: var(--ct-muted); }
.ct-panel .featuredlist .jobint > strong,
.ct-panel .featuredlist .jobint > span { display: block; font-size: 13px; color: var(--ct-muted); font-weight: 500; }
.ct-panel .compjobslinks .btn { border-radius: 8px; font-size: 13.5px; font-weight: 600; padding: 8px 14px; }
.ct-panel .compjobslinks .btn-primary { background: var(--ct-btn); border-color: var(--ct-btn); }
.ct-panel .compjobslinks .btn-primary:hover { background: var(--ct-btn-hover); border-color: var(--ct-btn-hover); }

/* ---- Tabs ---- */
.ct-panel .nav-tabs { border-bottom: 1px solid var(--ct-line); margin-bottom: 20px; }
.ct-panel .nav-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    padding: 10px 4px; margin-right: 22px;
    color: var(--ct-muted); font-size: 14.5px; font-weight: 600; background: none;
}
.ct-panel .nav-tabs .nav-link:hover { color: var(--ct-primary); }
.ct-panel .nav-tabs .nav-link.active { color: var(--ct-primary); border-bottom-color: var(--ct-primary); background: none; }

/* ---- Pricing cards ---- */
/* Rejilla propia: las columnas Bootstrap dejaban las tarjetas pegadas al
   saltar de fila y con los botones a distinta altura. */
.ct-panel .four-plan .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
}
@media (max-width: 991px) {
    .ct-panel .four-plan .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .ct-panel .four-plan .row { grid-template-columns: minmax(0, 1fr); }
}
.ct-panel .four-plan .row > [class*="col-"] {
    width: auto; max-width: none; flex: none; padding: 0;
}
.ct-panel .four-plan + .four-plan,
.ct-panel .paypackages + .paypackages { margin-top: 32px; }

.ct-panel .boxes {
    list-style: none; padding: 0; margin: 0;
    background: #fff; border: 1px solid var(--ct-line); border-radius: 12px;
    overflow: hidden; height: 100%; transition: border-color .15s, box-shadow .15s;
    display: flex; flex-direction: column;
}
/* el bloque de botones queda abajo aunque las tarjetas listen distinto */
.ct-panel .boxes .order { margin-top: auto; }
.ct-panel .boxes .order + .order { margin-top: 0; padding-top: 0; }
.ct-panel .boxes .order.trial a {
    background: #fff; color: var(--ct-btn); border: 1px solid var(--ct-btn);
}
.ct-panel .boxes .order.trial a:hover { background: var(--ct-bg-soft); }
.ct-panel .boxes:hover { border-color: #c9d8ea; box-shadow: 0 6px 20px rgba(16, 24, 40, .08); }
/* icono decorativo suelto que solo trae la vista de mejora */
.ct-panel .boxes .icon { display: none; }
.ct-panel .boxes .plan-name {
    padding: 16px 20px; background: var(--ct-bg-soft); border-bottom: 1px solid var(--ct-line);
    font-size: 16px; font-weight: 700; color: var(--ct-ink);
}
.ct-panel .boxes .main-plan { padding: 20px; display: flex; align-items: baseline; gap: 4px; justify-content: center; }
.ct-panel .boxes .plan-price1-1 { font-size: 15px; font-weight: 600; color: var(--ct-muted); float: none; }
.ct-panel .boxes .plan-price1-2 { font-size: 34px; font-weight: 800; color: var(--ct-primary); float: none; }
.ct-panel .boxes .plan-pages {
    padding: 10px 20px; font-size: 14px; color: #46586c; display: flex; align-items: center; gap: 9px;
}
.ct-panel .boxes .plan-pages i { color: #1a7f37; }
.ct-panel .boxes .plan-pages.noadded i { color: #c0392b; }
.ct-panel .boxes .plan-pages.noadded { color: #8a94a0; }
.ct-panel .boxes .order { padding: 18px 20px 22px; }
.ct-panel .boxes .order a {
    display: block; text-align: center; padding: 12px; border-radius: 8px;
    background: var(--ct-btn); color: #fff; font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.ct-panel .boxes .order a:hover { background: var(--ct-btn-hover); }
/* botones de igual alto: la flecha decorativa traía un círculo que partía
   las etiquetas largas en dos líneas y descuadraba las tarjetas */
.ct-panel .boxes .order a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 11px 14px; font-size: 14px; line-height: 1.3;
}
.ct-panel .boxes .order a > .fa-arrow-right { display: none; }

/* ---- Plan recomendado ----
   Sustituye a la regla nth-child(2) de main.css, que resaltaba a ciegas el
   segundo plan de la fila; ahora lo decide el administrador. */
.ct-panel .four-plan .row { align-items: stretch; padding-top: 14px; }
.ct-panel .boxes.is-recommended {
    border-color: var(--ct-primary);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .14);
    position: relative;
    transform: translateY(-10px);
}
.ct-panel .boxes.is-recommended:hover { border-color: var(--ct-primary); }
.ct-panel .boxes.is-recommended:before {
    content: attr(data-reco);
    display: block; text-align: center;
    background: var(--ct-primary); color: #fff;
    font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 7px 10px;
}
/* gana a la regla nth-child(2) de main.css, que pintaba de amarillo */
.ct-panel .four-plan .row > div .boxes.is-recommended { background: #fff; }
.ct-panel .four-plan .row > div .boxes.is-recommended .plan-pages i { color: #1a7f37; }
.ct-panel .four-plan .row > div .boxes.is-recommended .plan-pages.noadded i { color: #c0392b; }
.ct-panel .four-plan .row > div .boxes.is-recommended .order a { background: var(--ct-primary); color: #fff; }
.ct-panel .four-plan .row > div .boxes.is-recommended .order a:hover { background: var(--ct-btn-hover); }
.ct-panel .boxes.is-recommended .plan-name { background: #fff; }
.ct-panel .boxes.is-recommended .plan-price1-2 { font-size: 40px; }
.ct-panel .boxes.is-recommended .order a { background: var(--ct-primary); }
.ct-panel .boxes.is-recommended .order a:hover { background: var(--ct-btn-hover); }
/* el resaltado por posición ya no aplica dentro del panel */
.ct-panel .four-plan .row > div:nth-child(2) .boxes:not(.is-recommended) { background: #fff; }
.ct-panel .four-plan .row > div:nth-child(2) .boxes:not(.is-recommended) .plan-pages i { color: #1a7f37; }
.ct-panel .four-plan .row > div:nth-child(2) .boxes:not(.is-recommended) .order a { background: var(--ct-btn); color: #fff; }
@media (max-width: 575px) {
    .ct-panel .boxes.is-recommended { transform: none; }
}

/* ---- Forms ---- */
.ct-panel .formpanel { padding: 0; background: none; border: 0; }
.ct-panel .formrow label,
.ct-panel .form-group > label,
.ct-panel .control-label { font-size: 13.5px; font-weight: 600; color: var(--ct-ink); margin-bottom: 6px; }
.ct-panel .form-control, .ct-panel .form-select {
    border: 1px solid var(--ct-line); border-radius: 8px; padding: 10px 13px; font-size: 14.5px; color: var(--ct-ink);
}
.ct-panel .form-control:focus, .ct-panel .form-select:focus {
    border-color: var(--ct-primary); box-shadow: 0 0 0 3px rgba(0, 75, 143, .1);
}
.ct-panel .btn-primary { background: var(--ct-btn); border-color: var(--ct-btn); border-radius: 8px; font-weight: 600; }
.ct-panel .btn-primary:hover { background: var(--ct-btn-hover); border-color: var(--ct-btn-hover); }

/* main.css targets .searchList li .listbtn a and .seekerbox .listbtn a with
   higher specificity than the generic panel rule above - match it here. */
.ct-panel .searchList li .listbtn a,
.ct-panel .seekerbox .listbtn a,
.ct-panel .userlisting li .listbtn a {
    display: inline-block; padding: 9px 18px; border-radius: 8px;
    border: 1px solid var(--ct-btn); background: #fff; color: var(--ct-btn);
    font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.ct-panel .searchList li .listbtn a:hover,
.ct-panel .seekerbox .listbtn a:hover,
.ct-panel .userlisting li .listbtn a:hover { background: var(--ct-btn); color: #fff; }

/* ---- Pagination ---- */
.ct-panel .showreslt { font-size: 13.5px; color: var(--ct-muted); }
.ct-panel .pagination { margin: 0; }
.ct-panel .page-link { border: 1px solid var(--ct-line); border-radius: 8px; margin-left: 4px; color: var(--ct-ink); font-size: 14px; }
.ct-panel .page-item.active .page-link { background: var(--ct-btn); border-color: var(--ct-btn); color: #fff; }

@media (max-width: 991px) {
    .ct-panel { padding: 15px 0 40px; }
    .ct-panel .usernavwrap { margin-bottom: 20px; }
}


.ct-panel .searchList > li.is-unread { border-left: 3px solid var(--ct-accent); background: #fffdf7; }
.ct-panel .searchList > li > a { text-decoration: none; color: inherit; display: block; }
.ct-panel .searchList h4 { font-size: 15px; font-weight: 700; color: var(--ct-ink); margin: 0 0 4px; }

/* ---- Form sections inside the panel ---- */
.ct-panel .userccount h5,
.ct-panel .formpanel h5 {
    font-size: 16px; font-weight: 800; color: var(--ct-ink);
    margin: 4px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ct-line);
}
.ct-panel .userccount h5:not(:first-child),
.ct-panel .formpanel h5:not(:first-child) { margin-top: 30px; }
.ct-panel .formrow { margin-bottom: 18px; }
.ct-panel .formrow label { display: block; }
.ct-panel .userimgupbox { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ct-panel .userimgupbox .imagearea img {
    width: 88px; height: 88px; border-radius: 10px; object-fit: cover; border: 1px solid var(--ct-line);
}
.ct-panel .help-block { display: block; font-size: 12.5px; color: #b4232a; margin-top: 5px; }
.ct-panel .has-error .form-control { border-color: #e4a5a8; }
.ct-panel .select2-container--default .select2-selection--single,
.ct-panel .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--ct-line); border-radius: 8px; min-height: 42px;
}

/* On mobile main.css turns .usernavdash into a fixed bottom sheet:
   keep the panel identity card out of the way and let the sheet own its padding. */
@media screen and (max-width: 767px) {
    .ct-panel .usernavwrap { background: none; border: 0; box-shadow: none; margin-bottom: 0; }
    .ct-panel-id { display: none; }
    .ct-panel .usernavdash { padding: 15px 0; }
    .ct-panel .usernavdash li a { padding: 13px 22px; border-radius: 0; }
    .ct-panel .usernavdash li.ct-nav-sep { margin: 6px 0; }
}

/* =========================================================
   Perfil público del candidato  (.ct-profile)
   ========================================================= */

.ct-profile { background: var(--ct-bg-soft); padding: 28px 0 60px; }

/* Cover + identity header become one card.
   main.css already sizes .usercoverimg (240px) and its img - only the frame changes here. */
.ct-profile .usercoverimg {
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--ct-line); border-bottom: 0;
}
.ct-profile .userMaininfo {
    background: #fff; border: 1px solid var(--ct-line); border-top: 0;
    border-radius: 0 0 14px 14px; padding: 22px 26px 24px; margin: 0;
    display: flex; align-items: flex-start; gap: 20px;
}
.ct-profile .userMaininfo .userPic { flex: 0 0 auto; margin: -62px 0 0; }
.ct-profile .userMaininfo .userPic img {
    width: 104px; height: 104px; border-radius: 14px; object-fit: cover;
    border: 4px solid #fff; box-shadow: 0 6px 18px rgba(16, 24, 40, .12); background: #fff;
}
.ct-profile .userMaininfo .title { min-width: 0; }
.ct-profile .userMaininfo h3 { font-size: 25px; font-weight: 800; color: var(--ct-ink); margin: 0 0 6px; }
.ct-profile .userMaininfo h3 span { font-size: 15px; font-weight: 500; color: var(--ct-muted); }
.ct-profile .redyto span {
    display: inline-flex; align-items: center; gap: 7px;
    background: #eaf7ee; border: 1px solid #bfe5cb; color: #14622c;
    border-radius: 20px; padding: 4px 13px; font-size: 12.5px; font-weight: 700; margin-bottom: 8px;
}
.ct-profile .userMaininfo .desi,
.ct-profile .userMaininfo .membersinc {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: var(--ct-muted); margin-top: 5px;
}
.ct-profile .userMaininfo .desi i,
.ct-profile .userMaininfo .membersinc i { color: #8fa1b5; width: 15px; text-align: center; }

/* Action bar under the header */
.ct-profile .userlinkstp {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 18px 0 0; padding: 0;
}
.ct-profile .userlinkstp .btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ct-btn); border: 1px solid var(--ct-btn); color: #fff;
    border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600;
}
.ct-profile .userlinkstp .btn:hover { background: var(--ct-btn-hover); border-color: var(--ct-btn-hover); color: #fff; }
.ct-profile .userlinkstp .btn.report { background: #fff; color: var(--ct-btn); }
.ct-profile .userlinkstp .btn.report:hover { background: #eef4fc; color: var(--ct-btn); }
.ct-profile-hint { font-size: 13px; color: var(--ct-muted); }
.ct-profile-note {
    display: flex; align-items: flex-start; gap: 10px; width: 100%;
    background: #fff6e5; border: 1px solid #f5d9a3; color: #7a4b07;
    border-radius: 10px; padding: 13px 16px; font-size: 14px; font-weight: 500;
}
.ct-profile-note i { color: #b06f0a; font-size: 16px; margin-top: 1px; }

/* Content sections */
/* Mismo borde y sombra que las tarjetas de la derecha, para que las dos
   columnas se lean igual. */
.ct-profile .userdetailbox {
    background: #fff; border: 1px solid #cbd6e4; border-radius: 14px;
    box-shadow: 0 4px 16px rgba(16, 40, 80, .07);
    padding: 24px 26px; margin-top: 20px;
}
.ct-profile .userdetailbox > h3 {
    font-size: 18px; font-weight: 800; color: var(--ct-ink);
    margin: 0 0 16px; padding-bottom: 13px; border-bottom: 1px solid var(--ct-line);
}
.ct-profile .userdetailbox p { font-size: 14.5px; color: #46586c; line-height: 1.6; margin: 0; }
.ct-profile .no-records { color: var(--ct-muted); font-style: italic; }

/* Skills + languages chips */
.ct-profile .profileskills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ct-profile .profileskills .skillbox,
.ct-profile .profilelang .langbox {
    background: var(--ct-bg-soft); border: 1px solid var(--ct-line); border-radius: 10px;
    padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--ct-ink); min-width: 130px;
}
.ct-profile .profileskills .skillbox .text-success { display: block; font-size: 13px; font-weight: 500; color: #1a7f37 !important; margin-top: 2px; }
.ct-profile .profilelang { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-profile .profilelang .langbox h5 { font-size: 14px; font-weight: 700; color: var(--ct-ink); margin: 0; }
.ct-profile .profilelang .langbox p { font-size: 13px; color: var(--ct-muted); margin: 2px 0 0; }

/* Experience / education timeline */
.ct-profile .experienceList,
.ct-profile .educationList { list-style: none; padding: 0; margin: 0; }
.ct-profile .experienceList > li,
.ct-profile .educationList > li { position: relative; padding: 0 0 22px 26px; }
.ct-profile .experienceList > li:last-child,
.ct-profile .educationList > li:last-child { padding-bottom: 0; }
.ct-profile .experienceList > li::before,
.ct-profile .educationList > li::before {
    content: ''; position: absolute; left: 5px; top: 16px; bottom: 0; width: 1px; background: var(--ct-line);
}
.ct-profile .experienceList > li:last-child::before,
.ct-profile .educationList > li:last-child::before { display: none; }
.ct-profile .exdot {
    position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%;
    background: #fff; border: 2px solid var(--ct-primary);
}
.ct-profile .expbox h4 { font-size: 16px; font-weight: 700; color: var(--ct-ink); margin: 0 0 8px; }
.ct-profile .expbox .excity,
.ct-profile .expbox .expcomp,
.ct-profile .expbox .date {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--ct-muted); margin-bottom: 4px;
}
.ct-profile .expbox i { color: #8fa1b5; width: 15px; text-align: center; }
.ct-profile .expbox p { font-size: 13.5px; color: #46586c; margin-top: 8px; }

/* Right column: details card, sticky so it doesn't leave a hole.
   El borde de --ct-line (#e3e8ef) apenas se distingue del fondo claro de la
   página: se marca un poco más y se añade una sombra suave para que cada
   tarjeta se lea como una pieza aparte. */
.ct-profile .job-header {
    position: sticky; top: var(--ct-sticky-top);
    background: #fff;
    border: 1px solid #cbd6e4;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(16, 40, 80, .07);
    padding: 24px 22px; margin-bottom: 20px;
}
.ct-profile .job-header + .job-header { position: static; }
.ct-profile .jobdetail > h3 {
    font-size: 18px; font-weight: 800; color: var(--ct-primary);
    margin: 0 0 18px; padding-bottom: 13px; border-bottom: 1px solid var(--ct-line);
}
.ct-profile .jbdetail { list-style: none; padding: 0; margin: 0; }
.ct-profile .jbdetail > li { margin-bottom: 20px; }
.ct-profile .jbitlist .material-symbols-outlined { color: var(--ct-primary); font-size: 24px; }
.ct-profile .jbitdata strong {
    display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ct-muted); margin: 6px 0 3px;
}
.ct-profile .jbitdata span { font-size: 14.5px; font-weight: 600; color: var(--ct-ink); line-height: 1.35; }
.ct-profile .candidateinfo .loctext {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--ct-ink); padding: 8px 0; word-break: break-word;
}
.ct-profile .candidateinfo .loctext i { color: var(--ct-primary); width: 16px; text-align: center; flex: 0 0 16px; }
.ct-profile .candidateinfo .loctext a { color: var(--ct-ink); }
.ct-profile .candidateinfo .loctext a:hover { color: var(--ct-primary); }
.ct-profile .profileproject iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 10px; }

@media (max-width: 991px) {
    .ct-profile { padding: 18px 0 40px; }
    .ct-profile .userMaininfo { flex-direction: column; gap: 12px; padding: 20px; }
    .ct-profile .userMaininfo .userPic { margin-top: -58px; }
    .ct-profile .usercoverimg { height: 170px; }
    .ct-profile .job-header { position: static; margin-top: 20px; }
}

/* =========================================================
   Página de contacto  (.ct-contact)
   ========================================================= */

.ct-contact { background: var(--ct-bg-soft); padding: 44px 0 56px; }
.ct-contact-grid {
    display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 28px; align-items: start;
}

/* ---- Left column ---- */
.ct-contact-intro { margin-bottom: 22px; }
.ct-contact-eyebrow {
    display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ct-primary); margin-bottom: 10px;
}
.ct-contact-intro h2 {
    font-size: 32px; font-weight: 800; color: var(--ct-ink); line-height: 1.2; margin: 0 0 12px;
}
.ct-contact-intro p { font-size: 15px; color: var(--ct-muted); line-height: 1.6; margin: 0; }

.ct-contact-item {
    display: flex; align-items: flex-start; gap: 15px;
    background: #fff; border: 1px solid var(--ct-line); border-radius: 12px;
    padding: 18px 20px; margin-bottom: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.ct-contact-item:hover { border-color: #c9d8ea; box-shadow: 0 6px 18px rgba(16, 24, 40, .07); }
.ct-contact-ico {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #e8f0fa; color: var(--ct-primary); font-size: 17px;
}
.ct-contact-item strong {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ct-muted); margin-bottom: 3px;
}
.ct-contact-item p { font-size: 15px; color: var(--ct-ink); margin: 0; line-height: 1.5; word-break: break-word; }
.ct-contact-item a { color: var(--ct-ink); }
.ct-contact-item a:hover { color: var(--ct-primary); text-decoration: underline; }

/* ---- Form card ---- */
.ct-contact-card {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 14px;
    padding: 30px 32px 32px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.ct-contact-card > h3 { font-size: 21px; font-weight: 800; color: var(--ct-ink); margin: 0 0 6px; }
.ct-contact-card-sub {
    font-size: 14.5px; color: var(--ct-muted); margin: 0 0 24px;
    padding-bottom: 20px; border-bottom: 1px solid var(--ct-line);
}
/* Two-column field grid; the textarea, captcha and actions span both. */
.ct-contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.ct-contact-field { margin-bottom: 0; min-width: 0; }
.ct-contact-field.ct-span-2 { grid-column: 1 / -1; }
.ct-contact-actions { grid-column: 1 / -1; margin-top: 4px; }
.ct-contact-field > label {
    display: block; font-size: 13.5px; font-weight: 600; color: var(--ct-ink); margin-bottom: 7px;
}
.ct-contact-form .form-control {
    width: 100%; background: #fff;
    border: 1px solid var(--ct-line); border-radius: 9px;
    padding: 11px 14px; font-size: 15px; color: var(--ct-ink);
    transition: border-color .15s, box-shadow .15s;
}
.ct-contact-form .form-control::placeholder { color: #9aa9b9; }
.ct-contact-form .form-control:focus {
    outline: none; border-color: var(--ct-primary); box-shadow: 0 0 0 3px rgba(0, 75, 143, .1);
}
.ct-contact-form textarea.form-control { min-height: 150px; resize: vertical; }
.ct-contact-field.has-error .form-control { border-color: #e4a5a8; background: #fffafa; }
.ct-contact-form .help-block { display: block; font-size: 12.5px; color: #b4232a; margin-top: 6px; }
.ct-contact-form .g-recaptcha { margin-bottom: 4px; }

.ct-contact-submit {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--ct-btn); border: none; color: #fff;
    border-radius: 40px; padding: 14px 34px; font-size: 15px; font-weight: 700; cursor: pointer;
    transition: background .15s, transform .15s;
}
.ct-contact-submit:hover { background: var(--ct-btn-hover); }
.ct-contact-submit:active { transform: translateY(1px); }
.ct-contact-submit:focus-visible { outline: 2px solid var(--ct-primary); outline-offset: 3px; }

/* ---- Map ---- */
.ct-contact-map { line-height: 0; }
.ct-contact-map iframe { width: 100%; height: 380px; border: 0; display: block; }

@media (max-width: 991px) {
    .ct-contact { padding: 28px 0 40px; }
    .ct-contact-grid { grid-template-columns: 1fr; gap: 22px; }
    .ct-contact-intro h2 { font-size: 26px; }
    .ct-contact-card { padding: 24px 20px 26px; }
    .ct-contact-fields { grid-template-columns: 1fr; gap: 16px; }
    .ct-contact-map iframe { height: 280px; }
}

/* =========================================================
   Panel del candidato — pieces the employer panel doesn't have.
   Everything else (sidebar, tiles, cards, tables, empty states)
   comes from the shared .ct-panel block above.
   ========================================================= */

/* ---- Featured profile promo (sidebar) ---- */
.ct-panel .featuredprofile {
    background: linear-gradient(160deg, #0a2c5c 0%, #004b8f 100%);
    border: 0; border-radius: 12px; overflow: hidden;
    padding: 20px; margin-bottom: 20px; color: #fff;
    box-shadow: 0 6px 20px rgba(0, 40, 90, .18);
}
.ct-panel .featuredprofile .packginfor h5 {
    display: flex; align-items: center; gap: 9px;
    font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 12px;
}
.ct-panel .featuredprofile .packginfor h5 i { color: #ffc247; }
.ct-panel .featuredprofile .featprice {
    font-size: 30px; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 12px;
}
.ct-panel .featuredprofile .featprice span {
    display: block; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .75); margin-top: 3px;
}
.ct-panel .featuredprofile .packginfor p {
    font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .82); margin: 0 0 16px;
}
.ct-panel .featuredprofile .pckfeatlist { list-style: none; padding: 0; margin: 0 0 18px; }
.ct-panel .featuredprofile .pckfeatlist li {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; color: rgba(255, 255, 255, .92); padding: 5px 0;
}
.ct-panel .featuredprofile .pckfeatlist li i { color: #ffc247; width: 16px; text-align: center; font-size: 13px; }
.ct-panel .featuredprofile .order a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #ffc247; color: #0a2c5c; border-radius: 8px;
    padding: 11px 16px; font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.ct-panel .featuredprofile .order a:hover { background: #ffd06e; color: #0a2c5c; }
.ct-panel .featuredprofile.purchased { background: linear-gradient(160deg, #12603a 0%, #1a7f37 100%); }
.ct-panel .featuredprofile.purchased .order {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 13px; color: rgba(255, 255, 255, .85); padding: 7px 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.ct-panel .featuredprofile.purchased .order strong { color: #fff; }

/* ---- "Open to Work" switch (top of the sidebar nav) ---- */
.ct-panel .switchbox {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--ct-line); background: var(--ct-bg-soft);
}
.ct-panel .switchbox .txtlbl {
    display: flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 700; color: var(--ct-ink);
}
.ct-panel .switchbox .txtlbl i { color: #9aa9b9; font-size: 13px; cursor: help; }

/* ---- Followed companies ---- */
.ct-panel .compnaieslist { list-style: none; padding: 0; margin: 0; }
.ct-panel .compnaieslist li .empint {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 12px;
    padding: 20px 18px; height: 100%; margin-bottom: 20px; text-align: center;
    transition: border-color .15s, box-shadow .15s;
}
.ct-panel .compnaieslist li .empint:hover {
    border-color: #c9d8ea; background: #fff; box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
}
.ct-panel .empint a { text-decoration: none; }
.ct-panel .compnaieslist .emptbox .comimg img {
    width: 68px; height: 68px; object-fit: contain; border-radius: 10px;
    border: 1px solid var(--ct-line); background: #fff; padding: 5px;
}
.ct-panel .empint h4 { font-size: 15.5px; font-weight: 700; color: var(--ct-ink); margin: 12px 0 5px; }
.ct-panel .empint .indst,
.ct-panel .empint .emloc { font-size: 13px; color: var(--ct-muted); margin-bottom: 3px; }
.ct-panel .empint .cm-info-bottom {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ct-line);
    font-size: 13px; color: var(--ct-primary); font-weight: 600;
}

/* ---- Applied / favourite job rows ---- */
.ct-panel .searchList .jobimg img {
    width: 56px; height: 56px; object-fit: contain; border-radius: 8px;
    border: 1px solid var(--ct-line); background: #fff; padding: 4px; float: left; margin-right: 14px;
}
.ct-panel .searchList .companyName a { font-size: 13.5px; color: var(--ct-primary); font-weight: 600; }
.ct-panel .searchList .location { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ct-panel .searchList label.fulltime {
    background: #e8f0fa; color: var(--ct-primary); border-radius: 20px;
    padding: 2px 11px; font-size: 12px; font-weight: 600; margin: 0;
}

/* ---- Resume builder / profile forms ---- */
.ct-panel .resumeWrap, .ct-panel .cvtempbox {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 12px; padding: 22px;
}

/* =========================================================
   Construir currículum  (.ct-cv) — Computrabajo-style CV editor
   ========================================================= */

.ct-cv { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.ct-cv-main { min-width: 0; }

/* ---- Identity / headline cards ---- */
.ct-cv-profile {
    position: relative;
    display: flex; align-items: flex-start; gap: 20px;
    background: #fff; border: 1px solid var(--ct-line); border-radius: 14px;
    padding: 26px 28px; margin-bottom: 18px;
}
.ct-cv-avatar { flex: 0 0 96px; }
.ct-cv-avatar img {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--ct-line); background: #fff;
}
.ct-cv-profile-body { min-width: 0; flex: 1; padding-right: 34px; }
.ct-cv-profile-body h2 { font-size: 21px; font-weight: 800; color: var(--ct-ink); margin: 0 0 5px; }
.ct-cv-profile-body h3 { font-size: 18px; font-weight: 800; color: var(--ct-ink); margin: 0 0 8px; }
.ct-cv-profile-body p { font-size: 14px; color: #46586c; line-height: 1.6; margin: 0; }
.ct-cv-loc { font-size: 13.5px; color: var(--ct-muted); margin-bottom: 8px; }
.ct-cv-loc i { color: #8fa1b5; margin-right: 5px; }
.ct-cv-contact { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ct-cv-contact span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ct-ink); }
.ct-cv-contact i { color: var(--ct-primary); font-size: 13px; }
.ct-cv-edit {
    position: absolute; top: 20px; right: 20px;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ct-primary); background: #fff; border: 1px solid var(--ct-line);
    font-size: 13px; transition: background .15s, border-color .15s;
}
.ct-cv-edit:hover { background: #e8f0fa; border-color: #c9d8ea; color: var(--ct-primary); }
.ct-cv-tip {
    display: flex; align-items: flex-start; gap: 11px;
    background: var(--ct-bg-soft); border-radius: 10px; padding: 13px 15px; margin-top: 10px;
    font-size: 13.5px; color: #46586c; line-height: 1.55;
}
.ct-cv-tip i { color: #f0a500; font-size: 15px; margin-top: 2px; }

/* ---- Sections ---- */
.ct-cv-section {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 14px;
    padding: 24px 28px; margin-bottom: 18px;
}
.ct-cv-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ct-line);
}
.ct-cv-head h4 { font-size: 17px; font-weight: 800; color: var(--ct-ink); margin: 0; }
.ct-cv-add {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 700; color: var(--ct-primary);
    border: 1px solid var(--ct-line); border-radius: 20px; padding: 6px 15px;
    white-space: nowrap; transition: background .15s, border-color .15s;
}
.ct-cv-add:hover { background: #e8f0fa; border-color: #c9d8ea; color: var(--ct-primary); }
.ct-cv-add i { font-size: 11px; }
.ct-cv-empty { font-size: 13.5px; color: var(--ct-muted); font-style: italic; padding: 4px 0; }

/* ---- Timeline items (experience / education) ---- */
.ct-cv-item { position: relative; display: flex; gap: 14px; padding: 0 0 20px 20px; }
.ct-cv-item:last-child { padding-bottom: 0; }
.ct-cv-item::before {
    content: ''; position: absolute; left: 4px; top: 15px; bottom: 0; width: 1px; background: var(--ct-line);
}
.ct-cv-item:last-child::before { display: none; }
.ct-cv-dot {
    position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--ct-primary);
}
.ct-cv-body { flex: 1; min-width: 0; }
.ct-cv-body h5 { font-size: 15px; font-weight: 700; color: var(--ct-ink); margin: 0 0 3px; }
.ct-cv-org { font-size: 13.5px; color: var(--ct-muted); margin-bottom: 4px; }
.ct-cv-body p { font-size: 13.5px; color: #46586c; line-height: 1.55; margin: 0 0 5px; }
.ct-cv-meta { font-size: 12.5px; color: var(--ct-muted); }
.ct-cv-actions { display: flex; align-items: flex-start; gap: 6px; flex: 0 0 auto; }
.ct-cv-actions a {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ct-primary); font-size: 12px; transition: background .15s;
}
.ct-cv-actions a:hover { background: #e8f0fa; color: var(--ct-primary); }
.ct-cv-actions a.del { color: #b4232a; }
.ct-cv-actions a.del:hover { background: #fdeced; color: #8f1c22; }

/* ---- Chips (skills / languages) ---- */
.ct-cv-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ct-cv-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ct-bg-soft); border: 1px solid var(--ct-line); border-radius: 22px;
    padding: 7px 8px 7px 15px; font-size: 13.5px; color: var(--ct-ink);
}
.ct-cv-chip b { font-weight: 700; }
.ct-cv-chip em { font-style: normal; color: var(--ct-muted); font-size: 12.5px; }
.ct-cv-chip a {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ct-muted); font-size: 11px;
}
.ct-cv-chip a:hover { background: #e8f0fa; color: var(--ct-primary); }
.ct-cv-chip a.del:hover { background: #fdeced; color: #b4232a; }

/* CV + project sections keep their own tables/grids, just tidy the spacing */
.ct-cv-content .table { margin-bottom: 0; font-size: 14px; }
.ct-cv-content .table thead th {
    background: var(--ct-bg-soft); color: var(--ct-muted);
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    border-bottom: 1px solid var(--ct-line); white-space: nowrap;
}
.ct-cv-content .table tbody td { border-top: 1px solid var(--ct-line); vertical-align: middle; }

/* ---- Helper column ---- */
.ct-cv-aside { position: sticky; top: var(--ct-sticky-top); }
.ct-cv-help {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 14px;
    padding: 20px; margin-bottom: 16px;
}
.ct-cv-help h5 {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 800; color: var(--ct-ink); margin: 0 0 8px;
}
.ct-cv-help h5 i { color: #f0a500; }
.ct-cv-help p { font-size: 13px; color: var(--ct-muted); line-height: 1.55; margin: 0 0 14px; }
.ct-cv-help-btn {
    display: block; text-align: center; background: var(--ct-btn); color: #fff;
    border-radius: 8px; padding: 11px; font-size: 14px; font-weight: 700; text-decoration: none;
}
.ct-cv-help-btn:hover { background: var(--ct-btn-hover); color: #fff; }
.ct-cv-help-btn.outline { background: #fff; color: var(--ct-btn); border: 1px solid var(--ct-btn); }
.ct-cv-help-btn.outline:hover { background: #eef4fc; color: var(--ct-btn); }
.ct-cv-tips { list-style: none; padding: 0; margin: 0; }
.ct-cv-tips li { padding: 11px 0; border-top: 1px solid var(--ct-line); }
.ct-cv-tips li:first-child { border-top: 0; padding-top: 0; }
.ct-cv-tips strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ct-ink); margin-bottom: 2px; }
.ct-cv-tips span { font-size: 12.5px; color: var(--ct-muted); line-height: 1.5; }

@media (max-width: 1199px) {
    .ct-cv { grid-template-columns: 1fr; }
    .ct-cv-aside { position: static; }
}
@media (max-width: 767px) {
    .ct-cv-profile { flex-direction: column; padding: 20px; }
    .ct-cv-profile-body { padding-right: 0; }
    .ct-cv-section { padding: 20px; }
    .ct-cv-head { flex-wrap: wrap; }
}

/* =========================================================
   Imprimir currículum (.ct-cvprint) — design picker + CV paper
   The accent colour lives in --cv-accent on .ct-cvprint.
   ========================================================= */

.ct-cvprint { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.ct-cvprint-doc { min-width: 0; }

.ct-cv-paper {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 12px;
    overflow: hidden; box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
}

/* ---- Picker panel ---- */
.ct-cvprint-panel {
    position: sticky; top: var(--ct-sticky-top);
    background: #fff; border: 1px solid var(--ct-line); border-radius: 14px; padding: 22px;
}
.ct-cvprint-panel > h4 { font-size: 18px; font-weight: 800; color: var(--ct-ink); margin: 0 0 6px; }
.ct-cvprint-panel > p { font-size: 13.5px; color: var(--ct-muted); line-height: 1.5; margin: 0 0 16px; }
.ct-cvprint-sub {
    font-size: 13px; color: var(--ct-muted); line-height: 1.5;
    margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid var(--ct-line);
}

.ct-cvdesigns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-cvdesign {
    padding: 0; background: none; border: 2px solid var(--ct-line); border-radius: 8px;
    cursor: pointer; overflow: hidden; line-height: 0; transition: border-color .15s, box-shadow .15s;
}
.ct-cvdesign:hover { border-color: #c9d8ea; }
.ct-cvdesign.active { border-color: var(--ct-primary); box-shadow: 0 0 0 3px rgba(0, 75, 143, .12); }

/* Miniature previews, drawn in CSS so they follow the chosen accent. */
.ct-cvthumb { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; background: #fff; }
.ct-cvthumb .t-band, .ct-cvthumb .t-side { position: absolute; background: var(--cv-accent, #1e5395); }
.ct-cvthumb .t-lines { position: absolute; display: block; }
.ct-cvthumb .t-lines i { display: block; height: 3px; background: #dde3ea; border-radius: 2px; margin-bottom: 4px; }
.ct-cvthumb .t-lines i:nth-child(2) { width: 80%; }
.ct-cvthumb .t-lines i:nth-child(3) { width: 90%; }
.ct-cvthumb .t-lines i:nth-child(4) { width: 65%; }

.ct-cvthumb-1 .t-side { left: 0; top: 0; bottom: 0; width: 38%; }
.ct-cvthumb-1 .t-band { left: 38%; right: 0; top: 0; height: 22%; opacity: .75; }
.ct-cvthumb-1 .t-lines { left: 43%; right: 8%; top: 30%; }

.ct-cvthumb-2 .t-side { display: none; }
.ct-cvthumb-2 .t-band { left: 0; right: 0; top: 0; height: 26%; }
.ct-cvthumb-2 .t-lines { left: 10%; right: 10%; top: 36%; }

.ct-cvthumb-3 .t-side { left: 0; top: 0; bottom: 0; width: 6%; }
.ct-cvthumb-3 .t-band { left: 12%; right: 8%; top: 10%; height: 6%; }
.ct-cvthumb-3 .t-lines { left: 12%; right: 8%; top: 26%; }

.ct-cvcolors { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.ct-cvcolor {
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    background: var(--dot); border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--ct-line); transition: box-shadow .15s, transform .15s;
}
.ct-cvcolor:hover { transform: scale(1.08); }
.ct-cvcolor.active { box-shadow: 0 0 0 2px var(--ct-ink); }

.ct-cvprint-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
    background: var(--ct-btn); color: #fff; border: none; border-radius: 40px;
    padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.ct-cvprint-btn:hover { background: var(--ct-btn-hover); }
.ct-cvprint-link {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    background: none; border: none; color: var(--ct-primary);
    padding: 12px 0 0; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ct-cvprint-link:hover { text-decoration: underline; }
.ct-cvprint-saved {
    display: block; text-align: center; margin-top: 10px; font-size: 12.5px; color: #1a7f37;
    opacity: 0; transition: opacity .2s;
}
.ct-cvprint-saved.show { opacity: 1; }

/* =========================================================
   The CV document itself
   ========================================================= */
.cv-doc {
    background: #fff; color: #1b2733;
    font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5;
}
.cv-doc h1, .cv-doc h2, .cv-doc h3, .cv-doc h4 { margin: 0; }
.cv-doc section { margin-bottom: 20px; }
.cv-doc section:last-child { margin-bottom: 0; }
.cv-doc section > h2 {
    font-size: 15px; font-weight: 700; color: var(--cv-accent, #1e5395);
    text-transform: uppercase; letter-spacing: .04em;
    padding-bottom: 6px; margin-bottom: 12px; border-bottom: 2px solid var(--cv-accent, #1e5395);
}
.cv-doc section > p { margin: 0; color: #40505f; }
.cv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cv-entry { margin-bottom: 14px; }
.cv-entry:last-child { margin-bottom: 0; }
.cv-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cv-entry-head h4 { font-size: 13.5px; font-weight: 700; color: #1b2733; }
.cv-entry-date { font-size: 11.5px; color: #6b7a89; white-space: nowrap; }
.cv-entry-org { font-size: 12.5px; color: var(--cv-accent, #1e5395); font-weight: 600; margin: 1px 0 3px; }
.cv-entry p { margin: 0; font-size: 12.5px; color: #46586c; }

.cv-taglist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cv-taglist li {
    background: #f2f5f9; border-radius: 20px; padding: 4px 11px; font-size: 12px; color: #1b2733;
}
.cv-taglist li em { font-style: normal; color: #6b7a89; }

/* ---- Design 1: accent sidebar ---- */
.cv-t1 { display: flex; min-height: 1000px; }
.cv-t1-side {
    flex: 0 0 34%; background: var(--cv-accent, #1e5395); color: #fff; padding: 26px 22px;
}
.cv-t1-side .cv-photo {
    width: 130px; height: 130px; border-radius: 50%; overflow: hidden;
    margin: 0 auto 20px; border: 3px solid rgba(255,255,255,.55); background: #fff;
}
.cv-side-h {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding-bottom: 7px; margin: 22px 0 12px; border-bottom: 1px solid rgba(255,255,255,.32);
}
.cv-side-h:first-of-type { margin-top: 0; }
.cv-side-list { list-style: none; padding: 0; margin: 0; }
.cv-side-list li { font-size: 12px; margin-bottom: 8px; word-break: break-word; }
.cv-side-list i { width: 15px; opacity: .85; }
.cv-t1-exp { text-align: center; border: 1px solid rgba(255,255,255,.5); padding: 12px 8px; margin: 20px 0; }
.cv-t1-exp strong { display: block; font-size: 22px; text-transform: uppercase; }
.cv-t1-exp span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.cv-side-table { width: 100%; font-size: 11.5px; }
.cv-side-table th { text-align: left; font-weight: 700; padding: 4px 8px 4px 0; vertical-align: top; width: 46%; }
.cv-side-table td { padding: 4px 0; vertical-align: top; }
.cv-side-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.cv-side-tags li {
    background: rgba(255,255,255,.16); border-radius: 20px; padding: 3px 10px; font-size: 11.5px;
}
.cv-t1-avail {
    margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.32);
    font-size: 12px; font-style: italic; font-weight: 700; text-align: center;
}
.cv-t1-main { flex: 1; min-width: 0; }
.cv-t1-name { background: var(--cv-accent, #1e5395); filter: brightness(1.15); color: #fff; padding: 26px 28px; }
.cv-t1-name h1 { font-size: 26px; font-weight: 700; }
.cv-t1-name p { margin: 4px 0 0; font-size: 13px; opacity: .9; }
.cv-t1-body { padding: 24px 28px; }

/* ---- Design 2: header band ---- */
.cv-t2-head {
    background: var(--cv-accent, #1e5395); color: #fff; padding: 26px 30px;
    display: flex; align-items: center; gap: 22px;
}
.cv-t2-head .cv-photo {
    width: 96px; height: 96px; flex: 0 0 96px; border-radius: 50%; overflow: hidden;
    border: 3px solid rgba(255,255,255,.55); background: #fff;
}
.cv-t2-head h1 { font-size: 26px; font-weight: 700; }
.cv-t2-role { margin: 3px 0 10px; font-size: 13.5px; opacity: .9; }
.cv-t2-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.cv-t2-contact li { font-size: 12px; }
.cv-t2-contact i { opacity: .85; margin-right: 5px; }
.cv-t2-body { padding: 26px 30px; }
.cv-t2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.cv-t2-details { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 26px; }
.cv-t2-details li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; border-bottom: 1px dotted #dde3ea; padding-bottom: 5px; }
.cv-t2-details strong { font-weight: 700; color: #1b2733; }
.cv-t2-details span { color: #46586c; text-align: right; }

/* ---- Design 3: minimal rail ---- */
.cv-t3 { border-left: 6px solid var(--cv-accent, #1e5395); }
.cv-t3-head {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 26px 30px 18px; border-bottom: 2px solid var(--cv-accent, #1e5395);
}
.cv-t3-name h1 { font-size: 27px; font-weight: 700; color: #1b2733; }
.cv-t3-name p { margin: 4px 0 0; font-size: 13.5px; color: var(--cv-accent, #1e5395); font-weight: 600; }
.cv-t3-head .cv-photo {
    width: 84px; height: 84px; flex: 0 0 84px; border-radius: 50%; overflow: hidden;
    border: 2px solid var(--cv-accent, #1e5395);
}
.cv-t3-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 0; }
.cv-t3-main { padding: 24px 26px; min-width: 0; }
.cv-t3-side { padding: 24px 26px; background: #f7f9fc; border-left: 1px solid #e6ebf1; }
.cv-t3-side section > h2 { font-size: 13px; border-bottom-width: 1px; }
.cv-t3-contact { list-style: none; padding: 0; margin: 0; }
.cv-t3-contact li { font-size: 12px; margin-bottom: 7px; word-break: break-word; color: #40505f; }
.cv-t3-contact i { color: var(--cv-accent, #1e5395); width: 14px; }
.cv-t3-facts { list-style: none; padding: 0; margin: 0; }
.cv-t3-facts li { display: flex; flex-direction: column; font-size: 12px; margin-bottom: 8px; }
.cv-t3-facts strong { color: #1b2733; }
.cv-t3-facts span { color: #6b7a89; }
.cv-t3-avail {
    margin-top: 16px; padding: 9px 12px; border-radius: 6px;
    background: var(--cv-accent, #1e5395); color: #fff;
    font-size: 11.5px; font-weight: 700; text-align: center;
}

@media (max-width: 1199px) {
    .ct-cvprint { grid-template-columns: 1fr; }
    .ct-cvprint-panel { position: static; order: -1; }
}
@media (max-width: 767px) {
    .cv-t1 { display: block; }
    .cv-t2-cols, .cv-t2-details, .cv-t3-grid { grid-template-columns: 1fr; }
    .cv-t3-side { border-left: 0; border-top: 1px solid #e6ebf1; }
}

/* ---- Print: only the CV ---- */
@media print {
    body * { visibility: hidden !important; }
    #printableArea, #printableArea * { visibility: visible !important; }
    #printableArea {
        position: absolute; left: 0; top: 0; width: 100%;
        margin: 0; border: 0; border-radius: 0; box-shadow: none;
    }
    .cv-doc { min-height: 0; }
    @page { size: A4; margin: 0; }
}

/* =========================================================
   «Empleos por ciudades» (includes/top_cities.blade.php)
   El tema deja la figura flotando al 48% y la imagen sin alto,
   así que cada tarjeta medía según la foto y la rejilla salía
   escalonada. Aquí la caja manda: 4:3 recortado, misma medida
   para todas, y las columnas de Bootstrap siguen mandando en el
   número de tarjetas por fila.
   ========================================================= */
.citiessrchlist { align-items: stretch; }
.citiessrchlist > li {
    display: flex;
    margin-top: 24px;
}
.citiessrchlist li figure {
    float: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: none;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
}
.citiessrchlist li figure img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}
.citiessrchlist li figure figcaption { padding: 1.25em; }
.citiessrchlist li figure h2 { margin-top: 0; font-size: 22px; line-height: 1.2; }
.citiessrchlist li figure p { font-size: 15px; }

/* En pantallas medianas las 4 columnas dejaban tarjetas de 156 px: mejor 2, y 1 en móvil. */
@media (max-width: 991.98px) {
    .citiessrchlist > li { width: 50%; }
}
@media (max-width: 575.98px) {
    .citiessrchlist > li { width: 100%; }
}

/* =========================================================
   Buscador de las páginas interiores (.pageSearch)
   Lo usan la lista de candidatos, la de empleos, el detalle de
   vacante y las páginas del CMS. El tema dejaba los campos
   apilados y el botón como un cuadrito suelto; aquí se convierte
   en la misma barra blanca de la portada, en una sola fila.
   ========================================================= */
.pageSearch {
    background: var(--ct-bg-soft, #f2f6fd);
    padding: 34px 0;
    border-bottom: 1px solid var(--ct-line, #e3e9f2);
}
.pageSearch h3,
.pageSearch h5 {
    font-size: 22px;
    font-weight: 800;
    color: var(--ct-ink, #1f2a37);
    margin: 0 0 16px;
    text-align: center;
}
.pageSearch .searchform {
    background: #fff;
    border: 1px solid var(--ct-line, #e3e9f2);
    border-radius: 50px;
    box-shadow: 0 10px 28px rgba(16, 40, 80, .10);
    padding: 8px;
    margin: 0 auto;
    max-width: 880px;
}
.pageSearch .searchform .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
}
.pageSearch .searchform .form-control,
.pageSearch .searchform input.form-control,
.pageSearch .searchform select.form-control {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 52px;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 15.5px;
    color: var(--ct-ink, #1f2a37);
    padding: 0 18px !important;
    margin: 0 !important;
}
.pageSearch .searchform .form-control:focus { outline: none; }
/* Separador fino entre campos, como en la barra de la portada */
.pageSearch .searchform .form-control + .form-control { border-left: 1px solid var(--ct-line, #e3e9f2) !important; }
.pageSearch .searchform .btn {
    flex: 0 0 auto;
    height: 52px;
    min-width: 52px;
    padding: 0 26px;
    border: none;
    border-radius: 44px !important;
    margin-left: 10px !important;
    background: var(--ct-btn, #0b4dab);
    color: #fff;
    font-weight: 700;
    font-size: 15.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: background .2s ease;
}
.pageSearch .searchform .btn:hover,
.pageSearch .searchform .btn:focus { background: var(--ct-btn-hover, #093b83); color: #fff; }

@media (max-width: 767.98px) {
    .pageSearch { padding: 24px 0; }
    .pageSearch .searchform { border-radius: 16px; }
    .pageSearch .searchform .input-group { flex-wrap: wrap; }
    .pageSearch .searchform .form-control,
    .pageSearch .searchform select.form-control { flex: 1 1 100%; height: 52px; }
    .pageSearch .searchform .form-control + .form-control {
        border-left: none !important;
        border-top: 1px solid var(--ct-line, #e3e9f2) !important;
    }
    .pageSearch .searchform .btn { flex: 1 1 100%; width: 100%; margin: 8px 0 0 !important; border-radius: 12px !important; }
}

/* select2 dentro del buscador: sustituye el <select> por un <span> con
   width:100% en línea, y como elemento flex se comía el ancho del input. */
.pageSearch .searchform .select2-container {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    align-self: center;
    border-left: 1px solid var(--ct-line, #e3e9f2);
}
.pageSearch .searchform .select2-container--default .select2-selection--single {
    height: 52px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    padding: 0 8px 0 18px;
}
.pageSearch .searchform .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    padding: 0;
    color: var(--ct-ink, #1f2a37);
    font-size: 15.5px;
}
.pageSearch .searchform .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 52px !important;
    right: 6px;
}
.pageSearch .searchform .select2-container--open .select2-selection--single { box-shadow: none !important; }

@media (max-width: 767.98px) {
    .pageSearch .searchform .select2-container {
        flex: 1 1 100% !important;
        border-left: none;
        border-top: 1px solid var(--ct-line, #e3e9f2);
    }
}

/* =========================================================
   select2 y el apilamiento
   main.css sube TODOS los .select2-container a z-index 100000, así que un
   select cerrado (el del buscador, sin ir más lejos) se dibujaba por encima
   del panel de filtros y de los modales. El que sí necesita flotar es el
   desplegable abierto, que select2 cuelga del <body>: ése conserva el valor
   alto y vuelve a la normalidad al cerrarse.
   ========================================================= */
.select2-container { z-index: auto !important; }
.select2-container--open { z-index: 100000 !important; }

/* En móvil la cabecera fija mide un poco más (logo + botón de menú). */
@media (max-width: 991.98px) {
    :root { --ct-header-h: 88px; }
}

/* Tarjeta de contacto del perfil público: borde de 5 px en el azul de la
   marca, para que se distinga del resto de tarjetas de un vistazo. */
.ct-profile .job-header.ct-contact-card {
    border: 2px solid var(--ct-primary);
    box-shadow: 0 6px 20px rgba(0, 75, 143, .12);
}
.ct-profile .job-header.ct-contact-card .jobdetail > h3 { margin-bottom: 16px; }

/* =========================================================
   Preguntas frecuentes
   El acordeón venía con el estilo por defecto de Bootstrap (cabecera azul
   claro, texto a todo el ancho de la pantalla y las respuestas apretadas).
   Aquí sigue el mismo lenguaje que el resto: tarjetas blancas, borde suave
   y una columna de lectura cómoda.
   ========================================================= */
.ct-faq { max-width: 860px; margin: 0 auto; padding: 8px 0 10px; }
.ct-faq-intro {
    font-size: 15.5px; color: var(--ct-muted); line-height: 1.6;
    margin: 0 0 22px;
}
.ct-faq .accordion { --bs-accordion-border-color: transparent; }
.ct-faq .accordion-item {
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ct-faq .accordion-item:hover { border-color: #cbd6e4; box-shadow: 0 4px 16px rgba(16, 40, 80, .07); }

.ct-faq .accordion-button {
    background: #fff !important;
    color: var(--ct-ink) !important;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.45;
    padding: 18px 22px;
    box-shadow: none !important;
    gap: 14px;
}
.ct-faq .accordion-button:not(.collapsed) { color: var(--ct-primary) !important; }
.ct-faq .accordion-button:focus { box-shadow: none !important; border-color: transparent; }
/* Flecha propia: la de Bootstrap es una imagen incrustada que no sigue el color */
.ct-faq .accordion-button::after {
    background: none;
    content: "\f078";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: var(--ct-muted);
    width: auto; height: auto;
    transition: transform .2s ease, color .2s ease;
    /* El tema ya rotaba la flecha, así que se fija el ángulo en los dos estados. */
    transform: rotate(0deg) !important;
}
.ct-faq .accordion-button:not(.collapsed)::after { color: var(--ct-primary); transform: rotate(180deg) !important; }

.ct-faq .accordion-body {
    padding: 0 22px 20px;
    font-size: 15.5px;
    line-height: 1.75;
    color: #46586c;
}
.ct-faq .accordion-body p { margin: 0 0 12px; }
.ct-faq .accordion-body p:last-child { margin-bottom: 0; }
.ct-faq .accordion-body a { color: var(--ct-primary); text-decoration: underline; }
.ct-faq-empty { color: var(--ct-muted); font-style: italic; }

/* Cierre: la salida a contacto cuando la respuesta no está en la lista */
.ct-faq-help {
    margin-top: 26px;
    background: var(--ct-bg-soft);
    border: 1px solid var(--ct-line);
    border-radius: 14px;
    padding: 24px 26px;
    text-align: center;
}
.ct-faq-help h4 { font-size: 17px; font-weight: 800; color: var(--ct-ink); margin: 0 0 6px; }
.ct-faq-help p { font-size: 14.5px; color: var(--ct-muted); margin: 0 0 16px; }
.ct-faq-help-btn {
    display: inline-block;
    background: var(--ct-btn);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 11px 26px;
    border-radius: 30px;
    transition: background .2s ease;
}
.ct-faq-help-btn:hover { background: var(--ct-btn-hover); color: #fff; }
.ct-faq-ad { margin-top: 24px; text-align: center; }

@media (max-width: 575.98px) {
    .ct-faq .accordion-button { font-size: 15.5px; padding: 16px 18px; }
    .ct-faq .accordion-body { padding: 0 18px 18px; font-size: 15px; }
    .ct-faq-help { padding: 20px 18px; }
}

/* =========================================================
   Páginas de error (404, 419, 429, 500, 503)
   Antes eran un título y una línea sueltos pegados a la izquierda,
   con media pantalla vacía. Ahora una tarjeta centrada con el código,
   el mensaje y salidas útiles.
   ========================================================= */
.ct-error { padding: 56px 0 72px; background: var(--ct-bg-soft); }
.ct-error-box {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 18px;
    box-shadow: 0 10px 34px rgba(16, 40, 80, .08);
    padding: 54px 40px 40px;
    text-align: center;
    overflow: hidden;
}
/* El número grande de fondo, en muy bajo contraste */
.ct-error-code {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 140px;
    font-weight: 800;
    line-height: 1;
    color: var(--ct-primary);
    opacity: .07;
    pointer-events: none;
    user-select: none;
}
.ct-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50% !important;
    background: #eaf1fb;
    color: var(--ct-primary);
    font-size: 30px;
    margin-bottom: 18px;
}
.ct-error-box h1 {
    font-size: 26px;
    font-weight: 800;
    color: var(--ct-ink);
    margin: 0 0 10px;
}
.ct-error-box p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ct-muted);
    margin: 0 auto 26px;
    max-width: 460px;
}
.ct-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 26px;
}
.ct-error-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--ct-btn);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 26px;
    border-radius: 30px !important;
    transition: background .2s ease, border-color .2s ease;
}
.ct-error-btn:hover { background: var(--ct-btn-hover); color: #fff; }
.ct-error-btn.outline {
    background: #fff;
    color: var(--ct-primary);
    border: 1px solid var(--ct-line);
}
.ct-error-btn.outline:hover { background: #eaf1fb; border-color: #c9d8ea; color: var(--ct-primary); }
.ct-error-links {
    border-top: 1px solid var(--ct-line);
    padding-top: 18px;
    font-size: 14px;
    color: var(--ct-muted);
}
.ct-error-links a { color: var(--ct-primary); }
.ct-error-links a:hover { text-decoration: underline; }
.ct-error-links span { margin: 0 8px; color: #c3ccd9; }

@media (max-width: 575.98px) {
    .ct-error { padding: 32px 0 44px; }
    .ct-error-box { padding: 42px 22px 30px; border-radius: 14px; }
    .ct-error-code { font-size: 104px; }
    .ct-error-box h1 { font-size: 22px; }
    .ct-error-actions .ct-error-btn { width: 100%; justify-content: center; }
    .ct-error-links span { margin: 0 4px; }
}


/* ---------------------------------------------------------
   Mensajería (paneles de empresa y de candidato)
   Una sola tarjeta: lista de conversaciones + hilo tipo chat.
   --------------------------------------------------------- */
.messageWrap { padding: 34px 0 46px; }
.ct-chat-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ct-ink);
    margin: 0 0 18px;
}

/* La tarjeta hereda .myads (padding 24px): aquí el contenido va a sangre. */
.ct-panel .myads.message-body {
    padding: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(16, 32, 60, .07);
    margin-bottom: 0;
}
/* Columnas en flex para que las dos midan lo mismo sin alto fijo. */
.messageWrap .message-body > .row { min-height: 620px; }
.messageWrap .message-body > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---- Columna izquierda: conversaciones ---- */
.messageWrap .message-inbox {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid var(--ct-line);
}
.messageWrap .message-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ct-line);
}
.messageWrap .message-header h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ct-ink);
    margin: 0;
    letter-spacing: .01em;
}
.messageWrap .ct-chat-total {
    float: none;
    background: var(--ct-bg-soft);
    color: var(--ct-muted);
    border: 1px solid var(--ct-line);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
}
.messageWrap .message-inbox .list-wrap {
    flex: 1;
    min-height: 0;
    height: auto;
    background: #fff;
    display: flex;
    padding: 0;
}
.messageWrap .message-inbox .list-wrap .nodatabox {
    margin: 18px;
    align-self: flex-start;
    padding: 30px 18px;
}
.messageWrap .message-history {
    flex: 1;
    width: 100%;
    max-height: none;
    overflow-y: auto;
    padding: 6px 0;
}
.messageWrap .message-history li {
    border-bottom: 1px solid #f1f4f8;
    background: #fff;
}
.messageWrap .message-history li:last-child { border-bottom: 0; }
.messageWrap .message-history li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    position: relative;
    overflow: visible;
}
.messageWrap .message-history li:hover { background: #f7fafd; }
.messageWrap .message-history li.active {
    background: #eef4fb;
    box-shadow: inset 3px 0 0 var(--ct-primary);
}
.messageWrap .message-history li .image {
    float: none;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ct-line);
}
.messageWrap .message-history li .image img {
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    display: block;
}
/* En el panel del candidato la lista son logotipos: no se recortan. */
.messageWrap.ct-chat-logos .message-history li .image img {
    object-fit: contain;
    padding: 3px;
}
.messageWrap .message-history li .user-name {
    margin-left: 0;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.messageWrap .message-history li .user-name .author { margin-top: 0; min-width: 0; flex: 1; }
.messageWrap .message-history li .user-name .author span {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ct-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.messageWrap .message-history li .user-name .count-messages {
    float: none;
    margin: 0;
    flex: 0 0 auto;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--ct-accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 21px;
    text-align: center;
}

/* ---- Columna derecha: el hilo ---- */
.messageWrap .message-content { padding: 0; }
.messageWrap .message-details {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--ct-bg-soft) url(../images/chat-bg.png) repeat;
    overflow: hidden;
}
.messageWrap #append_messages {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ct-chat-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #fff;
    border-bottom: 1px solid var(--ct-line);
}
.ct-chat-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ct-line);
}
.ct-chat-avatar img {
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    display: block;
}
.ct-chat-avatar.is-logo img { object-fit: contain; padding: 3px; }
.ct-chat-who { min-width: 0; }
.ct-chat-who strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ct-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ct-chat-who span { font-size: 12.5px; color: var(--ct-muted); }

.messageWrap .messages {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    padding: 22px 20px 8px;
    margin: 0;
}
.messageWrap .messages > li {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}
.messageWrap .messages .profile-picture {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ct-line);
    margin: 0;
}
.messageWrap .messages .profile-picture img {
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    border-radius: 0;
    display: block;
}
.messageWrap .messages .profile-picture.is-logo img { object-fit: contain; padding: 2px; }
.messageWrap .messages .message {
    max-width: 72%;
    width: auto;
    min-height: 0;
    margin-bottom: 0;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 2px rgba(16, 32, 60, .08);
}
/* La burbuja del tema base llevaba un pico en ::before; sobra con las esquinas. */
.messageWrap .messages .message::before { display: none; }
.messageWrap .friend-message .message {
    background: #fff;
    color: var(--ct-ink);
    border: 1px solid var(--ct-line);
    border-bottom-left-radius: 4px;
}
.messageWrap .my-message .message {
    background: var(--ct-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.messageWrap .messages .message .time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 11.5px;
    line-height: 1.2;
    margin-top: 6px;
    text-align: right;
}
.messageWrap .friend-message .message .time { color: var(--ct-muted); }
.messageWrap .my-message .message .time { color: rgba(255, 255, 255, .78); }

/* ---- Sin conversación seleccionada ---- */
.ct-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 26px;
}
.ct-chat-empty i {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ct-line);
    color: #9fb3cd;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.ct-chat-empty h4 { font-size: 17px; font-weight: 700; color: var(--ct-ink); margin: 0 0 6px; }
.ct-chat-empty p { font-size: 14px; color: var(--ct-muted); margin: 0; max-width: 340px; }

/* ---- Redactar ---- */
.messageWrap .chat-form {
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid var(--ct-line);
    margin-top: 0;
    padding: 12px 16px;
}
.messageWrap .chat-form .form-group { width: 100%; margin: 0; }
.messageWrap .chat-form .input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.messageWrap .chat-form textarea.form-control {
    flex: 1;
    width: auto;
    min-height: 44px;
    max-height: 120px;
    padding: 11px 16px;
    border: 1px solid var(--ct-line);
    border-radius: 22px;
    resize: none;
    font-size: 14.5px;
    line-height: 1.45;
    box-shadow: none;
}
.messageWrap .chat-form textarea.form-control:focus {
    border-color: var(--ct-primary);
    box-shadow: 0 0 0 3px rgba(0, 75, 143, .12);
    outline: 0;
}
.messageWrap .chat-form .input-group-prepend { position: static; top: auto; right: auto; }
.messageWrap .chat-form .input-group-prepend .input-group-text {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ct-primary);
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.messageWrap .chat-form .input-group-prepend .input-group-text:hover { background: var(--ct-primary-dark); }
.messageWrap .chat-form label.error {
    display: block;
    color: #c0392b;
    font-size: 12.5px;
    margin: 6px 0 0 16px;
}

@media (max-width: 767.98px) {
    .messageWrap { padding: 22px 0 32px; }
    .messageWrap .message-body > .row { min-height: 0; }
    .messageWrap .message-inbox {
        flex: 0 0 auto;
        border-right: 0;
        border-bottom: 1px solid var(--ct-line);
    }
    .messageWrap .message-history { max-height: 240px; }
    /* Apiladas ya no hay columna que iguale: el hilo lleva alto propio. */
    .messageWrap .message-details { flex: 0 0 460px; height: 460px; }
    .messageWrap .messages .message { max-width: 84%; }
}

/* ============================================================
   Panel de candidato
   ============================================================ */

/* Las secciones usan la misma tarjeta que el resto del panel */
.ct-panel .appliedjobswrap,
.ct-panel .profbox {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    padding: 24px; margin-bottom: 24px;
}
.ct-panel .appliedjobswrap > h3,
.ct-panel .profbox > h3 {
    font-size: 19px; font-weight: 800; color: var(--ct-ink);
    margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ct-line);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ct-panel .profbox > h3 a {
    font-size: 13.5px; font-weight: 600; color: var(--ct-primary); text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.ct-panel .profbox > h3 a:hover { text-decoration: underline; }
.ct-panel .appliedjobswrap > p {
    margin: 0; padding: 34px 20px; text-align: center;
    background: var(--ct-bg-soft); border: 1px dashed #cdd8e5; border-radius: 10px;
    color: var(--ct-muted); font-size: 15px;
}

/* Rejilla de tarjetas: estos <ul> no llevan .row, así que los col-lg-*
   de Bootstrap se quedaban sin contenedor flex y se apilaban a un tercio
   del ancho dejando el resto vacío. */
.ct-panel .featuredlist,
.ct-panel .compnaieslist {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    list-style: none; padding: 0; margin: 0;
}
.ct-panel .featuredlist > li,
.ct-panel .compnaieslist > li {
    width: auto; max-width: none; flex: none; padding: 0; margin: 0;
}
.ct-panel .featuredlist .jobint,
.ct-panel .compnaieslist li .empint { margin-bottom: 0; }
@media (max-width: 1199px) {
    .ct-panel .featuredlist,
    .ct-panel .compnaieslist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .ct-panel .featuredlist,
    .ct-panel .compnaieslist { grid-template-columns: minmax(0, 1fr); }
}

/* Ficha de perfil montada sobre la portada */
.ct-panel .usercoverphoto { border-radius: 14px; }
.ct-panel .abtuser {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 14px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
    margin: 0 30px 24px; padding: 22px 26px;
}
.ct-panel .abtuser > .row { align-items: center; }
.ct-panel .uavatar img {
    width: 96px; height: 96px; border-radius: 12px;
    border: 3px solid #fff; box-shadow: 0 2px 10px rgba(16, 24, 40, .12);
}
.ct-panel .abtuser h4 { font-size: 21px; font-weight: 800; color: var(--ct-ink); margin: 0 0 9px; }
.ct-panel .abtuser .userdata {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 6px 24px;
}
.ct-panel .abtuser .userdata li {
    font-size: 14px; color: var(--ct-muted);
    display: inline-flex; align-items: center; gap: 7px;
}
.ct-panel .abtuser .userdata li i { color: var(--ct-primary); }
@media (max-width: 767px) {
    .ct-panel .abtuser { margin: 0 12px 24px; text-align: center; }
    .ct-panel .abtuser .userdata { justify-content: center; }
}

/* El bloque de planes se presenta como una sección más */
.ct-panel .paypackages {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    padding: 24px; margin-bottom: 24px;
}
.ct-panel .paypackages .four-plan > h3 {
    font-size: 19px; font-weight: 800; color: var(--ct-ink);
    margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ct-line);
}
.ct-panel .paypackages .four-plan + .four-plan { margin-top: 28px; }

/* Resumen del plan contratado: tres datos en línea, no tres párrafos */
.ct-panel .planresumen {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.ct-panel .planresumen .credit {
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ct-muted); line-height: 1.5;
}
.ct-panel .planresumen .credit strong {
    display: block; margin-top: 5px;
    font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ct-ink);
}
.ct-panel .planresumen .credit + .credit { border-left: 1px solid var(--ct-line); padding-left: 20px; }
@media (max-width: 767px) {
    .ct-panel .planresumen { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ct-panel .planresumen .credit + .credit { border-left: 0; padding-left: 0; }
}

/* Estado de la postulación como etiqueta, no texto crudo de la base */
.ct-panel .estado-postulacion {
    display: inline-block; padding: 4px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 700; line-height: 1.5;
    background: var(--ct-bg-soft); color: var(--ct-muted); white-space: nowrap;
}
.ct-panel .estado-applied { background: #e8f0fa; color: #1c4e80; }
.ct-panel .estado-shortlisted,
.ct-panel .estado-shortlist { background: #fff4e0; color: #8a5300; }
.ct-panel .estado-hired { background: #e6f6ea; color: #14622c; }
.ct-panel .estado-rejected { background: #fdeaea; color: #a12626; }

/* El detalle del plan vive dentro del bloque de paquetes: sin esto
   quedaba una tarjeta dentro de otra */
.ct-panel .paypackages .instoretxt {
    background: transparent; border: 0; box-shadow: none;
    padding: 0; margin: 0 0 26px;
}
.ct-panel .paypackages .instoretxt > h3 { margin-bottom: 16px; }

/* ---- Aviso de publicaciones gratuitas ----
   main.css lo dejaba en #ccc con texto blanco (contraste 1.6:1, ilegible)
   y con una animación colorChange que no existe en ninguna hoja. */
.ct-panel .freepackagebox {
    background: linear-gradient(100deg, #12603a 0%, #17794a 100%);
    border: 0; border-radius: 12px;
    box-shadow: 0 6px 20px rgba(18, 96, 58, .22);
    padding: 22px 26px; margin-bottom: 24px;
    display: flex; align-items: center; gap: 24px;
    animation: none;
}
.ct-panel .freepackagebox h5 {
    color: #fff; font-size: 19px; font-weight: 800; margin: 0 0 5px;
    display: flex; align-items: center; gap: 10px;
}
.ct-panel .freepackagebox p {
    color: #d8f0e2; font-size: 14.5px; margin: 0; line-height: 1.5;
}
.ct-panel .freepackagebox a {
    margin-left: auto; flex: 0 0 auto;
    background: #fff; color: #12603a;
    border-radius: 8px; padding: 12px 22px;
    font-size: 14.5px; font-weight: 700; text-decoration: none;
    white-space: nowrap; transition: background .15s;
}
.ct-panel .freepackagebox a:hover { background: #eafaf1; color: #0d4a2c; }
@media (max-width: 767px) {
    .ct-panel .freepackagebox { flex-direction: column; align-items: flex-start; gap: 16px; }
    .ct-panel .freepackagebox a { margin-left: 0; width: 100%; text-align: center; }
}

/* ---- Espacios publicitarios ---- */
.site-ad { margin: 0 0 24px; text-align: center; line-height: 0; }
.site-ad img { max-width: 100%; height: auto; border-radius: 10px; }
.site-ad a { display: inline-block; line-height: 0; }
.site-ad-index_below_top_employers,
.site-ad-index_above_footer { margin: 32px 0; }
.site-ad-listing_sidebar,
.site-ad-dashboard_sidebar { margin-top: 20px; }