.elementor-56213 .elementor-element.elementor-element-64442b2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;overflow:visible;}.elementor-56213 .elementor-element.elementor-element-e5e16dd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-56213 .elementor-element.elementor-element-e5e16dd.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-56213 .elementor-element.elementor-element-a89c673 > .elementor-widget-container{margin:020px -1px -1px -1px;}.elementor-56213 .elementor-element.elementor-element-d779aca{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}@media(min-width:768px){.elementor-56213 .elementor-element.elementor-element-e5e16dd{--width:37.8%;}.elementor-56213 .elementor-element.elementor-element-d779aca{--width:70%;}}/* Start custom CSS for shortcode, class: .elementor-element-a89c673 */.search_jobs {
    display: none !important;
}

.order-by {
    display: none !important;
}

.rss_link {
    display: none !important;
}

.reset {
    display: none !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d779aca *//* --- ARREGLO RESPONSIVE INTERNO --- */

/* 1. Romper la estructura de columnas de Cariera dentro del panel de detalles */
#job-detail-column .row,
#job-detail-column .elementor-row {
    display: block !important; /* Deja de intentar ser una fila horizontal */
    margin: 0 !important;
}

/* 2. Obligar a todas las columnas internas a ocupar el 100% del ancho */
#job-detail-column [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    margin-bottom: 20px; /* Espacio entre bloques */
}

/* 3. Arreglar específicamente el Sidebar (Job Overview) para que baje */
/* Cariera suele poner el sidebar en un 'aside' o div específico */
#job-detail-column aside, 
#job-detail-column .job-sidebar,
#job-detail-column .job_listing_preview_sidebar {
    width: 100% !important;
    float: none !important;
    margin-top: 30px !important;
    border-left: none !important; /* Quitar borde lateral si lo tiene */
    border-top: 1px solid #eee; /* Poner borde arriba para separar */
    padding-top: 20px;
}

/* 4. Ocultar elementos basura que se ven en tu foto */
/* En tu foto se ve "Featured Job Listings" al final, eso no debería salir en el detalle */
#job-detail-column .related_jobs,
#job-detail-column .featured-jobs,
#job-detail-column section.related {
    display: none !important;
}

/* --- ESTILOS TIPO LINKEDIN / LENSA --- */

/* 1. Contenedor de Badges (Fila separada) */
.split-job-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espacio entre etiquetas */
    margin-top: 15px;
    margin-bottom: 25px; /* Separación con el botón Apply */
}

/* 2. El estilo "Pill" (Cápsula) de LinkedIn */
.linkedin-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;       /* Relleno interno */
    border: 1px solid #d1d5db; /* Borde gris suave */
    border-radius: 50px;     /* Bordes totalmente redondos */
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;          /* Texto gris oscuro */
    background-color: transparent;
    line-height: 1;
    white-space: nowrap;
}

/* Iconos dentro de los badges */
.linkedin-badge i {
    margin-right: 6px;
    font-size: 14px;
    color: #6b7280;
}

/* 3. El Botón Apply (Azul solido abajo) */
.split-job-actions {
    margin-bottom: 20px;
    display: block; /* Asegura que ocupe su propia línea */
}

.btn-linkedin-apply {
    display: inline-block;
    background-color: #0a66c2; /* Azul LinkedIn exacto */
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 24px; /* Botón redondeado */
    text-decoration: none;
    transition: background-color 0.2s;
}

.btn-linkedin-apply:hover {
    background-color: #004182; /* Azul más oscuro al pasar mouse */
    color: #ffffff !important;
}

/* 4. Ajustes generales de texto */
.split-job-meta {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
}
.text-success {
    color: #057642; /* Verde tipo LinkedIn para 'applicants' */
    font-weight: 500;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-64442b2 *//* --- 1. CONFIGURACIÓN ESTRUCTURA ESCRITORIO (> 1024px) --- */
@media (min-width: 1024px) {
    /* Contenedor Maestro: Fija la altura y bloquea scroll de página */
    .contenedor-split-jobs {
        /* AJUSTA 100px SEGÚN EL ALTO DE TU CABECERA */
        height: calc(100vh - 100px) !important; 
        overflow: hidden !important;
        display: flex !important;
        align-items: stretch !important;
    }
    
    /* Asegurar que Elementor no corte las columnas */
    .contenedor-split-jobs .elementor-container,
    .contenedor-split-jobs .elementor-row {
        height: 100% !important;
    }

    /* Columna IZQUIERDA (Lista) */
    .contenedor-split-jobs .elementor-column:first-child .elementor-widget-wrap,
    .contenedor-split-jobs > div:first-child {
        height: 100% !important;
        overflow-y: auto !important; /* Scroll activo */
        padding-bottom: 60px;
    }

    /* Columna DERECHA (Detalle) */
    #job-detail-column {
        height: 100% !important;
        overflow-y: auto !important; /* Scroll activo */
        padding: 30px;
        background: #fff;
        position: relative;
    }
}

/* --- 2. RESPONSIVE DENTRO DEL DETALLE (Evitar que se rompa) --- */
/* Forzamos que tu template personalizado se comporte como bloque */
#job-detail-column .row, 
#job-detail-column .elementor-row {
    display: block !important;
    margin: 0 !important;
}
#job-detail-column [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 20px;
}

/* --- 3. ESTÉTICA --- */
/* Scrollbars finas estilo Mac */
.contenedor-split-jobs ::-webkit-scrollbar { width: 6px; }
.contenedor-split-jobs ::-webkit-scrollbar-track { background: #f1f1f1; }
.contenedor-split-jobs ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* Trabajo Activo en la lista */
.job_listing.active-job {
    background-color: #f4f8fb !important;
    border-left: 4px solid #0073aa !important;
}


/* --- CORRECCIÓN LOGO Y LAYOUT --- */

/* 1. Contenedor flexible para poner Logo y Texto lado a lado */
.split-company-row {
    display: flex !important;
    align-items: center !important; /* Alineación vertical centrada */
    gap: 15px; /* Espacio entre el logo y el nombre */
    margin-bottom: 15px;
}

/* 2. Estilo de la imagen del logo */
.split-company-logo img.company-logo-img {
    width: 50px !important;  /* Tamaño pequeño fijo */
    height: 50px !important; /* Tamaño pequeño fijo */
    object-fit: contain;     /* Para que no se recorte feo */
    border-radius: 4px;      /* Bordes ligeramente redondeados */
    border: 1px solid #eee;  /* Un borde sutil */
    display: block;
}

/* 3. Estilo del nombre de la empresa */
.split-company-name {
    font-weight: 700;
    font-size: 16px;
    color: #444;
    line-height: 1.2;
}

/* 4. Icono por defecto si no hay imagen */
.no-logo-icon {
    font-size: 30px;
    line-height: 50px;
}

tant;
    max-width: 80px !important; /* Limitamos su ancho máximo */
    display: flex !important;
    flex-direction: column !important; /* Apilar Badge arriba y fecha abajo */
    align-items: flex-end !important;
    justify-content: center !important;
}

/* Ajuste visual del Badge (Full Time) */
.contenedor-split-jobs .job-type {
    margin: 0 0 5px 0 !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    text-align: center;
}

/* Ajuste de la fecha "Posted on..." */
.contenedor-split-jobs .job_listing-date {
    font-size: 11px !important;
    text-align: right !important;
    white-space: normal !important; /* Permitir que la fecha baje de línea si es necesario */
    line-height: 1.2;
}

/* --- CORRECCIÓN DEFINITIVA DE ANCHO EN LISTA --- */

/* 1. Contenedor de la tarjeta: Flexbox estricto */
.contenedor-split-jobs li.job_listing > a {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Corta cualquier desbordamiento */
}

/* 2. Logo: Ancho fijo y que nunca se encoja */
.contenedor-split-jobs .job_listing-logo {
    flex: 0 0 50px !important; /* Fijo 50px */
    width: 50px !important;
    min-width: 50px !important;
    margin-right: 12px !important;
}

/* 3. COLUMNA CENTRAL (Contenido): Aquí está la magia */
.contenedor-split-jobs .job_listing-about {
    flex: 1 1 auto !important; /* Ocupa el espacio disponible */
    min-width: 0 !important;   /* VITAL: Permite al flexbox encogerse */
    width: 0 !important;       /* Truco para forzar recalculo de ancho en algunos navegadores */
    padding-right: 8px !important;
}

/* Forzar que TODO el texto dentro de la columna central respete los límites */
.contenedor-split-jobs .job_listing-about * {
    white-space: normal !important; /* Permitir saltos de línea */
    overflow-wrap: break-word !important; /* Romper palabras largas */
    word-break: break-word !important;    /* Romper palabras largas (soporte extra) */
    max-width: 100% !important;
}

/* Ajuste específico para el SALARIO largo */
/* Cariera suele usar .job_listing-salary o ponerlo dentro de .job_listing-about */
.contenedor-split-jobs .job_listing-about .salary, 
.contenedor-split-jobs .job_listing-about .job-salary {
    font-size: 11px !important;
    color: #27ae60 !important; /* Verde para diferenciar */
    line-height: 1.2 !important;
    display: block !important; /* Que ocupe su propia línea */
    margin-top: 3px !important;
}

/* 4. COLUMNA DERECHA (Meta: Badge y Fecha): Blindada */
.contenedor-split-jobs .job_listing-meta {
    flex: 0 0 85px !important; /* Ancho FIJO de 85px */
    width: 85px !important;
    max-width: 85px !important;
    min-width: 85px !important; /* Impedir que nada lo empuje */
    
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    margin-left: auto !important; /* Empujar a la derecha */
}

/* Ajustes visuales para que quepa bien en los 85px */
.contenedor-split-jobs .job-type {
    padding: 3px 6px !important;
    font-size: 9px !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important; /* Que "Full Time" no se parta */
}

.contenedor-split-jobs .job_listing-date {
    font-size: 10px !important;
    text-align: right !important;
    line-height: 1.1 !important;
}/* End custom CSS */