/* ============================================
   EMPLEOS - Agregar al final de estilo.css
   ============================================ */
   
   /* Este comando cambia el fondo de toda la página */
body {
    background-color: #F8F6F2 !important;
}

/* Hero interno (reutilizable en todas las páginas internas) */
.hero-interno {
    background: linear-gradient(135deg, var(--verde-oscuro), var(--verde));
    color: #fff;
    padding: 3rem 0 2.5rem;
    text-align: center;
}
.hero-interno h1 {
    font-family: var(--font-titulo);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.hero-interno p { font-size: 1.1rem; opacity: .9; }

/* Lista de empleos */
.lista-empleos { display: flex; flex-direction: column; gap: 12px; }

.empleo-item {
    background: #fff;
    border-radius: var(--radio);
    padding: 1.2rem 1.5rem;
    box-shadow: var(--sombra);
    border-left: 4px solid var(--verde);
    transition: box-shadow .2s, transform .15s;
    position: relative;
}
.empleo-item:hover {
    box-shadow: var(--sombra-hover);
    transform: translateY(-2px);
}
.empleo-item.empleo-destacado { border-left-color: var(--amarillo); }

.emp-badge-dest {
    background: var(--amarillo);
    color: var(--gris-oscuro);
    font-size: .75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.emp-empresa {
    font-size: .82rem;
    font-weight: 700;
    color: var(--verde);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 2px;
}
.emp-titulo { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.emp-titulo a { color: var(--gris-oscuro); text-decoration: none; }
.emp-titulo a:hover { color: var(--verde); }

.emp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .83rem;
    color: var(--gris);
    margin-top: 4px;
}

.emp-contrato-badge {
    background: #e8f5e9;
    color: var(--verde-oscuro);
    border: 1px solid #c8e6c9;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    padding: 3px 10px;
    display: inline-block;
}
.emp-salario { font-size: .85rem; font-weight: 600; color: var(--gris-oscuro); }

/* Detalle de empleo */
.empleo-detalle-card {
    background: #fff;
    border-radius: var(--radio);
    padding: 2rem;
    box-shadow: var(--sombra);
}
.empleo-det-header { border-bottom: 2px solid var(--gris-claro); padding-bottom: 1.2rem; margin-bottom: 1.5rem; }
.empleo-det-titulo { font-family: var(--font-titulo); font-size: 1.8rem; font-weight: 700; margin: .3rem 0; }
.empleo-det-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .85rem;
    color: var(--gris);
    margin-top: .5rem;
}
.empleo-seccion { margin-top: 1.5rem; }
.empleo-sec-titulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--verde-oscuro);
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: .4rem;
    margin-bottom: .8rem;
}
.empleo-contenido { line-height: 1.8; color: var(--gris-oscuro); white-space: pre-wrap; }

/* Ficha lateral empleo */
.card-aplicar {
    background: #fff;
    border-radius: var(--radio);
    padding: 1.5rem;
    box-shadow: var(--sombra);
    border-top: 4px solid var(--verde);
}
.empleo-ficha { margin-top: .5rem; }
.ficha-fila {
    display: flex;
    justify-content: space-between;
    padding: .4rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .88rem;
}
.ficha-label { color: var(--gris); }
.ficha-valor { font-weight: 600; }

/* Botones de contacto */
.btn-contacto-wa {
    display: inline-block;
    background: #25D366;
    color: #fff !important;
    padding: .6rem 1.2rem;
    border-radius: var(--radio);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none !important;
    transition: background .2s;
}
.btn-contacto-wa:hover { background: #1da851; }

.btn-contacto-email {
    display: inline-block;
    background: var(--verde);
    color: #fff !important;
    padding: .6rem 1.2rem;
    border-radius: var(--radio);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none !important;
    transition: background .2s;
}
.btn-contactar-email:hover { background: var(--verde-oscuro); }

/* CTA publicar empleo */
.cta-publicar-empleo {
    background: linear-gradient(135deg, #e8f5e9, #fff);
    border-radius: var(--radio);
    padding: 2rem;
    border: 1px solid #c8e6c9;
}
.cta-publicar-empleo h4 { color: var(--verde-oscuro); font-weight: 700; }

/* Paginación */
.pagination-sst { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; }
.pagination-sst li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radio);
    background: #fff;
    border: 1px solid #ddd;
    color: var(--gris-oscuro);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    transition: all .2s;
}
.pagination-sst li a:hover,
.pagination-sst li a.activo {
    background: var(--verde);
    color: #fff;
    border-color: var(--verde);
}

/* Card lateral genérico */
.card-lateral {
    background: #fff;
    border-radius: var(--radio);
    padding: 1.2rem;
    box-shadow: var(--sombra);
}

/* Filtros box */
.filtros-box {
    background: #fff;
    border-radius: var(--radio);
    padding: 1.2rem;
    box-shadow: var(--sombra);
}

/* Formulario de registro / publicar empleo */
.form-registro {
    background: #fff;
    border-radius: var(--radio);
    padding: 2rem;
    box-shadow: var(--sombra);
}
.form-titulo { font-family: var(--font-titulo); font-weight: 700; color: var(--verde-oscuro); }
.form-seccion {
    border: 1px solid #e8f5e9;
    border-radius: var(--radio);
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    background: #fafffe;
}
.form-seccion h4 { font-size: 1rem; font-weight: 700; color: var(--verde-oscuro); margin-bottom: 1rem; }

/* Exito registro */
.exito-registro { background: #fff; border-radius: var(--radio); padding: 2rem; box-shadow: var(--sombra); }

/* Breadcrumb */
.breadcrumb-sst {
    font-size: .85rem;
    color: var(--gris);
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.breadcrumb-sst a { color: var(--verde); text-decoration: none; }
.breadcrumb-sst span { color: #ccc; }