/* ============================================================
   BOLSA DE TRABAJO UDELLPA — ESTILOS PREMIUM
   ============================================================ */

:root {

    --azul-udellpa:#062446;
    --azul-medio:#0a3d7a;
    --azul-claro:#e8f0fb;

    --dorado:#ffc903;
    --dorado-claro:#fff8e1;
    --dorado-oscuro:#d4a800;

    --texto:#1a1a2e;
    --gris-suave:#f4f6f9;
    --borde:#dee2e6;

    --exito:#198754;
    --peligro:#dc3545;

    --radio:12px;

    --sombra:
        0 4px 20px rgba(6,36,70,.10);

    --sombra-hover:
        0 8px 32px rgba(6,36,70,.18);

    --fuente-titulo:
        'Playfair Display', serif;

    --fuente-cuerpo:
        'Source Sans 3', sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */

*{
    box-sizing:border-box;
}

body{
    font-family:var(--fuente-cuerpo);
    color:var(--texto);
    background-color:var(--gris-suave);
    line-height:1.6;
    margin:0;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.navbar-udellpa{

    background:var(--azul-udellpa);

    padding:14px 0;

    box-shadow:
        0 2px 12px rgba(0,0,0,.30);
}

.navbar-udellpa .navbar-brand{

    color:#fff;

    font-weight:300;

    font-size:1rem;

    display:flex;

    align-items:center;

    gap:.7rem;

    text-decoration:none;
}

.navbar-udellpa .navbar-brand strong{

    font-weight:700;

    color:var(--dorado);

    font-size:1.08rem;
}

/* LOGO */

.logo-img{

    height:56px;

    width:auto;

    object-fit:contain;

    display:block;
}

/* LINKS */

.navbar-udellpa .nav-link{

    color:rgba(255,255,255,.86) !important;

    font-weight:500;

    padding:.45rem .9rem;

    border-radius:8px;

    transition:.2s;
}

.navbar-udellpa .nav-link:hover,
.navbar-udellpa .nav-link.active{

    background:rgba(255,255,255,.12);

    color:#fff !important;
}

/* BOTON PRINCIPAL */

.btn-primary-udellpa{

    background:var(--dorado);

    color:var(--azul-udellpa) !important;

    border:none;

    border-radius:8px;

    padding:.55rem 1.3rem;

    font-weight:700;

    text-decoration:none;

    transition:.2s;

    display:inline-block;
}

.btn-primary-udellpa:hover{

    background:var(--dorado-oscuro);

    transform:translateY(-1px);
}


/* ============================================================
   HERO PREMIUM
   ============================================================ */

.hero-section{

    position:relative;

    background-image:

        linear-gradient(
            rgba(6,36,70,.35),
            rgba(6,36,70,.45)
        ),

        url("https://bolsadetrabajo.udellpa.edu.pa/assets/img/hero.png");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    min-height:700px;

    width:100%;

    display:flex;

    align-items:center;

    color:#fff;

    overflow:hidden;
}

/* OVERLAY */

.hero-section::before{

    content:'';

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(6,36,70,.78) 0%,
            rgba(6,36,70,.45) 40%,
            rgba(6,36,70,.08) 100%
        );

    z-index:1;
}
/* CONTENIDO */

.hero-section .container{

    position: relative;

    z-index: 2;
}

/* TITULO */

.hero-section h1{

    font-family:var(--fuente-titulo);

    font-size:4.5rem;

    font-weight:700;

    line-height:1.05;

    margin-bottom:1.2rem;

    color:#fff;

    max-width:650px;

    text-shadow:
        0 4px 20px rgba(0,0,0,.35);
}

/* TEXTO */

.hero-section .lead{

    font-size: 1.4rem;

    opacity: .96;

    max-width: 700px;

    color: #fff;

    text-shadow:
        0 2px 12px rgba(0,0,0,.35);
}

/* STATS */

.hero-stat-num{

    font-size: 2.4rem;

    font-weight: 700;

    color: var(--dorado);

    line-height: 1;
}

.hero-stat-label{

    font-size: .95rem;

    opacity: .9;

    color: #fff;
}

/* RESPONSIVE */

@media(max-width:992px){

    .hero-section{

        min-height: 520px;

        padding: 80px 0;
    }

    .hero-section h1{

        font-size: 3.5rem;
    }

    .hero-section .lead{

        font-size: 1.15rem;
    }

}

@media(max-width:768px){

    .hero-section{

        min-height: 450px;

        padding: 60px 0;

        text-align: center;
    }

    .hero-section h1{

        font-size: 2.4rem;
    }

    .hero-section .lead{

        font-size: 1rem;

        margin: auto;
    }

}
/* ============================================================
   SEARCH BOX
   ============================================================ */

.search-box{

    background:#fff;

    border-radius:18px;

    padding:1.7rem;

    box-shadow:var(--sombra-hover);

    border-top:4px solid var(--dorado);

    margin-top:-45px;

    position:relative;

    z-index:20;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.filtros-sidebar{

    background:#fff;

    border-radius:14px;

    padding:20px;

    border:1px solid #e5e7eb;

    box-shadow:var(--sombra);

    position:sticky;

    top:90px;
}

.filtros-sidebar h6{

    color:var(--azul-udellpa);

    font-weight:700;

    font-size:.9rem;

    text-transform:uppercase;

    letter-spacing:.4px;

    margin-bottom:15px;

    padding-bottom:8px;

    border-bottom:2px solid var(--dorado);

    display:flex;

    align-items:center;

    gap:.4rem;
}

/* ITEMS */

.filtro-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    padding:10px 14px;

    margin-bottom:8px;

    border-radius:10px;

    text-decoration:none;

    color:#1e293b;

    background:#f8fafc;

    transition:.2s ease;

    border:1px solid transparent;
}

.filtro-item:hover{

    background:#e8f1ff;

    border-color:#c7dbff;

    color:#062446;

    text-decoration:none;
}

.filtro-item.activo{

    background:#062446;

    color:#fff !important;

    font-weight:600;
}

/* BADGE */

.badge-count{

    background:#ffc90e;

    color:#062446;

    font-size:12px;

    padding:4px 8px;

    border-radius:999px;

    font-weight:700;

    flex-shrink:0;
}

/* ============================================================
   TARJETAS
   ============================================================ */

.card-vacante{

    background:#fff;

    border:1px solid var(--borde);

    border-radius:var(--radio);

    padding:1.4rem;

    transition:.25s;

    height:100%;

    display:flex;

    flex-direction:column;
}

.card-vacante:hover{

    box-shadow:var(--sombra-hover);

    transform:translateY(-3px);

    border-color:var(--azul-medio);
}

/* LOGO EMPRESA */

.card-vacante .logo-empresa{

    width:52px;

    height:52px;

    object-fit:contain;

    border:1px solid var(--borde);

    border-radius:8px;

    padding:4px;

    background:#fff;
}

.card-vacante .logo-placeholder{

    width:52px;

    height:52px;

    border-radius:8px;

    background:var(--azul-claro);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.3rem;

    color:var(--azul-udellpa);

    border:1px solid var(--borde);

    flex-shrink:0;
}

.card-vacante .empresa-nombre{

    color:var(--azul-medio);

    font-weight:600;

    font-size:.85rem;
}

.card-vacante h5{

    font-family:var(--fuente-titulo);

    font-size:1.1rem;

    margin:.4rem 0 .8rem;

    flex-grow:1;
}

.card-vacante h5 a{

    color:var(--texto);

    text-decoration:none;
}

/* BADGES */

.badge-tipo{

    background:var(--azul-claro);

    color:var(--azul-udellpa);

    border-radius:20px;

    padding:.2rem .7rem;

    font-size:.75rem;

    font-weight:600;
}

.badge-provincia{

    background:var(--dorado-claro);

    color:var(--dorado-oscuro);

    border-radius:20px;

    padding:.2rem .7rem;

    font-size:.75rem;

    font-weight:600;
}

/* META */

.card-vacante .meta-info{

    color:#666;

    font-size:.82rem;

    margin-top:auto;

    padding-top:.8rem;

    border-top:1px solid var(--borde);
}

/* ============================================================
   BOTONES
   ============================================================ */

.btn-udellpa{

    background:var(--azul-udellpa);

    color:#fff;

    border:none;

    border-radius:8px;

    padding:.55rem 1.4rem;

    font-weight:600;

    transition:.2s;
}

.btn-udellpa:hover{

    background:var(--azul-medio);

    color:#fff;

    transform:translateY(-1px);
}

/* ============================================================
   TITULOS
   ============================================================ */

.section-title{

    font-family:var(--fuente-titulo);

    color:var(--azul-udellpa);

    position:relative;

    padding-bottom:.5rem;

    margin-bottom:1.5rem;
}

.section-title::after{

    content:'';

    position:absolute;

    bottom:0;

    left:0;

    width:50px;

    height:3px;

    background:var(--dorado);

    border-radius:2px;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state{

    text-align:center;

    padding:4rem 1rem;

    color:#999;
}

.empty-state i{

    font-size:3.5rem;

    margin-bottom:1rem;

    opacity:.4;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer-udellpa{

    background:var(--azul-udellpa);

    color:rgba(255,255,255,.85);

    border-top:3px solid var(--dorado);
}

.footer-udellpa a{

    color:var(--dorado);
}

.footer-udellpa .text-muted{

    color:rgba(255,255,255,.55) !important;
}

/* ============================================================
   UTILIDADES
   ============================================================ */

.main-content{

    min-height:calc(100vh - 140px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:992px){

    .hero-section{

        min-height:520px;

        padding:80px 0;
    }

    .hero-section h1{

        font-size:3.5rem;
    }

    .hero-section .lead{

        font-size:1.15rem;
    }

}

@media(max-width:768px){

    .hero-section{

        min-height:450px;

        padding:60px 0;

        text-align:center;
    }

    .hero-section h1{

        font-size:2.4rem;
    }

    .hero-section .lead{

        font-size:1rem;

        margin:auto;
    }

    .logo-img{

        height:44px;
    }

    .navbar-brand{

        font-size:1rem;
    }

    .filtros-sidebar{

        position:static;

        margin-bottom:1rem;
    }

    .search-box{

        margin-top:-25px;
    }

}