:root{
    --blue:#054468;
    --dark:#34495e;
    --muted:#6b7280;
    --line:#e5e7eb;
    --bg:#f6f7f9;
    --white:#fff;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    color:var(--dark);
    background:#fff;
}

.page{
    max-width:1140px;
    margin:auto;
    padding:0;
}

/* RECUADRO BOLSA LABORAL / CONVOCATORIAS */
.hero{
    max-width: 1145px;
    margin: 12px auto 25px auto;
    padding: 40px 38px;
    min-height: 230px;
    background:
        linear-gradient(110deg,
            #111111 0%,
            #111111 63%,
            #ffc000 63.2%,
            #ffc000 100%
        );

    border: none;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.eyebrow{
    display: inline-block;
    background: #ffc000;
    color: #000;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .5px;
    padding: 9px 14px;
    margin-bottom: 12px;
}

h1,
h2{
    color:var(--blue);
    margin:8px 0 10px;
}

.hero h1{
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.hero p{
    color: #ffffff;
    font-size: 17px;
    line-height: 1.55;
    max-width: 650px;
    margin: 0;
}

.search-box{
    background:#f3f3f3;
    padding:28px;
    border:1px solid #eee;
    margin-bottom:30px;
}

.search-box input,
.search-box select{
    width:100%;
    height:42px;
    border:1px solid #d8dce1;
    padding:0 14px;
    background:white;
    color:#555;
}

.filters{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 160px;
    gap:28px;
    margin-top:28px;
}

.btn{
    background:#ffc000;
    color:#030303;
    border:0;
    font-size:12px;
    font-weight:800;
    padding:11px 16px;
    border-radius:4px;
    text-transform:uppercase;
    cursor:pointer;
    transition: .2s;
}

.btn:hover{
    background:#000000;
    color:#ffffff;
}

.btn:active{
    background:#000000;
    color:#ffffff;
    transform:scale(0.98);
}

.btn-search{
    font-size:20px;
}

.ghost{
    background:white;
    color:var(--blue);
    border:1px solid var(--blue);
}

.jobs{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
}

.card{
    background:#ffffff;
    border:2px solid #ffc000;
    padding:35px;
    min-height:400px;
    border-radius:0;
    transition:all .3s ease;
}

.card-top{
    display:flex;
    gap:18px;
}

.logo-box{
    width:58px;
    height:58px;
    border:1px solid var(--line);
    background:#f8f8f8;
    display:grid;
    place-items:center;
    flex:0 0 58px;
}

.logo-box img{
    max-width:48px;
    max-height:48px;
}

.card h3{
    font-size:17px;
    line-height:1.25;
    margin:0;
    color:var(--blue);
    text-transform:uppercase;
}

.card:hover{
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transform:translateY(-3px);
}

.meta{
    font-size:13px;
    color:var(--blue);
    display:flex;
    flex-direction:column;
    gap:8px;
}

.excerpt{
    line-height:1.45;
    margin:0;
    flex:1;
}

.job-detail,
.apply{
    display:none;
    margin-top:28px;
}

.detail-head{
    display:flex;
    justify-content:space-between;
    gap:15px;
    align-items:center;
    border-bottom:1px solid var(--line);
    margin-bottom:15px;
}

.meta-row{
    display:grid;
    grid-template-columns:70px 1fr 1fr 1fr 1fr;
    gap:18px;
    align-items:center;
    margin:18px 0 25px;
    font-size:13px;
}

.content{
    line-height:1.65;
}

.content ul{
    list-style:none;
    padding-left:0;
}

.content li{
    margin:7px 0;
}

.content li:before{
    content:'›';
    color:#f7c201;
    font-weight:bold;
    margin-right:8px;
}

.category-box{
    margin-top:25px;
    border:1px solid var(--line);
    padding:14px;
    text-align:center;
}

.category-box span{
    display:block;
    text-align:left;
    color:var(--blue);
    margin-bottom:12px;
}

.apply h2{
    font-size:18px;
}

.apply form{
    display:grid;
    gap:16px;
}

.apply label{
    font-size:14px;
    color:#555;
}

.apply input{
    display:block;
    width:100%;
    height:44px;
    margin-top:8px;
    border:1px solid #d8dce1;
    padding:0 12px;
}

.apply input[type=file]{
    padding:10px;
    height:auto;
}

.msg{
    font-weight:700;
    color:var(--blue);
}

/* Compatibilidad si tu HTML usa otros nombres de clase */
.convocatoria-info,
.bolsa-laboral,
.jobs-intro{
    max-width:1135px;
    margin:48px auto 26px auto;
    padding:32px 28px;
    background:linear-gradient(90deg, #eef9ff 0%, #ffffff 100%);
    border:1px solid #d8e4ec;
    box-sizing:border-box;
}

.convocatoria-info .tag,
.bolsa-laboral .tag,
.jobs-intro .tag{
    color:#004b75;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.convocatoria-info h1,
.bolsa-laboral h1,
.jobs-intro h1{
    color:#004b75;
    font-size:32px;
    font-weight:800;
    line-height:1.2;
    margin:0 0 16px 0;
}

.convocatoria-info p,
.bolsa-laboral p,
.jobs-intro p{
    color:#4d6575;
    font-size:16px;
    line-height:1.65;
    margin:0;
}

@media(max-width:900px){
    .page{
        padding:14px;
    }

    .hero{
    min-height: auto;
    padding: 32px 22px;
    background:
        linear-gradient(110deg,
            #111111 0%,
            #111111 100%
        );
}

.hero h1{
    font-size: 28px;
}

.hero p{
    font-size: 15px;
}

    .hero,
    .convocatoria-info,
    .bolsa-laboral,
    .jobs-intro{
        margin:25px auto 20px auto;
        padding:26px 22px;
    }

    .hero h1,
    .convocatoria-info h1,
    .bolsa-laboral h1,
    .jobs-intro h1{
        font-size:28px;
    }

    .filters,
    .jobs,
    .meta-row{
        grid-template-columns:1fr;
    }

    .jobs{
        gap:18px;
    }

    .detail-head{
        display:block;
    }
}


/* =========================================================
   CORRECCIÓN FINAL - PÁGINA CONVOCATORIA
   Se elimina visualmente el buscador/filtros y se ordena la bolsa laboral
   ========================================================= */
.search-box{
    display:none !important;
}

.hero{
    margin-bottom:32px;
}

.jobs{
    margin-top:0;
}

@media(max-width:900px){
    .search-box{
        display:none !important;
    }
}

/* Convocatoria: reparación funcional y presentación profesional */
.jobs .card{display:flex;flex-direction:column;gap:20px;min-height:390px;padding:28px;border-width:1px;border-top:5px solid #ffc000;box-shadow:0 8px 24px rgba(5,68,104,.08)}
.card-top small{display:block;margin-top:7px;color:#657786;font-size:12px;font-weight:700}
.job-category{display:inline-block;margin-bottom:8px;color:#805f00;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}
.meta i{width:16px;color:#c89500;text-align:center}
.job-open{align-self:flex-start;margin-top:auto}
.job-detail,.apply{padding:30px;background:#fff;border:1px solid #e3e8ec;box-shadow:0 10px 28px rgba(5,68,104,.08);scroll-margin-top:110px}
.detail-head h2{font-size:28px;text-transform:uppercase}
.apply{margin-bottom:45px}
.apply form{grid-template-columns:repeat(2,minmax(0,1fr))}
.apply form label:last-of-type,.apply form button{grid-column:1/-1}
.apply button[type="submit"]{min-height:46px;background:#ffc000;border:0;font-weight:900;cursor:pointer}
.apply button[type="submit"]:hover{background:#111;color:#fff}
.apply button:disabled{cursor:wait;opacity:.65}
.form-message{margin:16px 0 0;font-weight:800}
.form-message.is-success{color:#18723a}.form-message.is-error{color:#b42318}.form-message.is-loading{color:#054468}
#jobDetail[hidden],#applyForm[hidden]{display:none!important}
.content a{color:#054468;font-weight:800}
@media(max-width:900px){.jobs{grid-template-columns:1fr}.card{min-height:auto}.meta-row{grid-template-columns:58px 1fr}.apply form{grid-template-columns:1fr}.apply form label:last-of-type,.apply form button{grid-column:auto}.job-detail,.apply{padding:22px}.detail-head h2{font-size:23px}}
