/* Ofertas de empleo de Odoo con el diseño de la web 2 (plantillas en odoo/empleo.xml).
   La cabecera reutiliza .w2-ev-top (eventos.css) y las etiquetas .w2-ev-estado. */

/* ── Listado (/jobs) ── */
#wrapwrap .o_website_hr_recruitment_jobs_list { background: var(--paper) !important; }
#wrapwrap .o_website_hr_recruitment_jobs_list > .navbar { background: var(--white); border-block: 1px solid var(--line) !important; box-shadow: none !important; padding-block: 14px; }
#wrapwrap .o_website_hr_recruitment_jobs_list > .navbar .container,
#wrapwrap .o_website_hr_recruitment_jobs_list .oe_website_jobs { max-width: var(--wrap); }
.w2-jobs-n { font: 400 15px var(--body); color: var(--muted); }
.w2-jobs-n b { color: var(--ink); font-weight: 600; }
#wrapwrap .o_jobs_topbar_search_bar .input-group { border: 1px solid var(--line); border-radius: 999px; background: var(--white); overflow: hidden; }
#wrapwrap .o_jobs_topbar_search_bar .input-group:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0, 180, 213, .15); }
#wrapwrap .o_jobs_topbar_search_bar :is(input, .btn) { border: 0 !important; background: transparent !important; box-shadow: none !important; }
#wrapwrap .o_jobs_topbar_search_bar input { padding-left: 18px; }
#wrapwrap .o_jobs_topbar_search_bar .btn { color: var(--cyan-deep); }
#wrapwrap .oe_website_jobs > .row { padding-top: 36px !important; }

.w2-job { display: grid; gap: 14px; padding: 24px 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius, 16px); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.w2-job:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--cyan); color: var(--ink); }
.w2-job-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.w2-job-cab h2 { font: 600 clamp(22px, 2.2vw, 26px)/1.2 var(--display); margin: 0 auto 0 0; }
.w2-job-cab .w2-ev-estado { margin: 0; }
/* La descripción completa es larga: en el listado, las primeras líneas */
.w2-job-desc { color: var(--muted); font-size: 15px; line-height: 1.6; max-height: 9.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.w2-job-desc :is(p, ul, ol) { margin: 0 0 6px; }
.w2-job-desc :is(ul, ol) { padding-left: 1.2em; }
.w2-job-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.w2-job-ir { margin-left: auto; color: var(--cyan-deep); font-weight: 600; }

.w2-jobs-aside { position: sticky; top: 100px; display: grid; gap: 12px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius, 16px); }
.w2-jobs-aside h2 { font: 500 24px/1.2 var(--display); margin: 0; }
.w2-jobs-aside h2 b { font-weight: 700; }
.w2-jobs-aside p { margin: 0; color: var(--muted); line-height: 1.6; }
.w2-jobs-aside a:not(.w2-btn) { color: var(--cyan-deep); }
.w2-jobs-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.w2-jobs-aside li::before { content: "✓"; color: var(--cyan-deep); font-weight: 700; margin-right: 8px; }
.w2-jobs-aside .w2-btn { justify-self: start; margin-top: 4px; }

/* ── Oferta (/jobs/…): la barra de Odoo pasa a migas; la cabecera, como las de la web ── */
.w2-jobs-migas { padding: 14px 0; background: var(--white); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.w2-jobs-migas a { color: var(--muted); }
.w2-jobs-migas a:hover { color: var(--cyan-deep); }
#wrapwrap .w2-job-top { background: var(--paper); border-bottom: 1px solid var(--line); padding-bottom: 32px; }
#wrapwrap .w2-job-top h1 { font: 700 clamp(32px, 4vw, 48px)/1.1 var(--display); margin: 0 0 6px; }
#wrapwrap .w2-job-top h5 { color: var(--muted); font: 400 17px var(--body); }
#wrapwrap .js_hr_recruitment :is(h2, h3, h4) { font-family: var(--display); }

/* ── Candidatura (/jobs/apply/…) ── */
#wrapwrap .w2-jobs-form { max-width: var(--wrap); padding-bottom: 56px; }
.w2-jobs-migas-form { background: transparent; border: 0; padding: 28px 0 8px; }
#wrapwrap .w2-jobs-form h1 { font: 500 clamp(30px, 3.6vw, 42px)/1.15 var(--display); margin: 0 0 6px; }
#wrapwrap .w2-jobs-form h1 b { font-weight: 700; }
#wrapwrap .w2-jobs-form .w2-lead { margin: 0 0 24px; color: var(--muted); font-size: 17px; }
#wrapwrap .w2-jobs-form #forms > .container { padding: 24px 26px 4px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius, 16px); }
#wrapwrap .w2-jobs-form .s_website_form_label_content { font-weight: 600; color: var(--ink); }
#wrapwrap .w2-jobs-form .s_website_form_mark { color: var(--cyan-deep); }
#wrapwrap .w2-jobs-form .form-control { min-height: 46px; border-radius: 10px; border-color: var(--line); }
#wrapwrap .w2-jobs-form .form-control:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0, 180, 213, .15); }
#wrapwrap .w2-jobs-form .s_website_form_submit { margin-bottom: 24px !important; }
#wrapwrap .w2-jobs-form #jobs_section > .row > section:last-child { padding: 0 0 0 28px !important; }
#wrapwrap .w2-jobs-form #jobs_section > .row > section:last-child .text-muted { text-transform: uppercase; letter-spacing: .08em; font-size: 11px !important; font-weight: 600; color: var(--cyan-deep) !important; }
#wrapwrap .w2-jobs-form #jobs_section > .row > section:last-child h6 { font: 500 16px var(--body); margin-bottom: 14px; }
#wrapwrap .w2-jobs-form .o_apply_description_link { border-radius: 999px; font-size: 15px; }

@media (max-width: 991px) {
    .w2-jobs-aside { position: static; margin-top: 8px; }
    #wrapwrap .w2-jobs-form #jobs_section > .row > section:last-child { padding: 24px 12px 0 !important; }
}
@media (max-width: 640px) {
    .w2-job { padding: 20px; }
    .w2-job-ir { margin-left: 0; flex-basis: 100%; }
    #wrapwrap .w2-jobs-form #jobs_section { padding: 0; }
    #wrapwrap .w2-jobs-form #forms > .container { padding: 18px 16px 2px; }
    #wrapwrap .w2-jobs-form .s_website_form_label { width: 100% !important; }
}