.elementor-14627 .elementor-element.elementor-element-a881cce{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-14627 .elementor-element.elementor-element-a881cce:not(.elementor-motion-effects-element-type-background), .elementor-14627 .elementor-element.elementor-element-a881cce > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F9FB;}.elementor-14627 .elementor-element.elementor-element-1d30780 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-1d30780 *//* =========================================
   1. VARIABLES & TEMAS (ENCAPSULADOS)
   ========================================= */
/* IMPORTANTE: Usamos el ID del contenedor en lugar de :root 
   para no contaminar el resto del sitio web */
#jb-full-width-wrapper {
    /* --- COLORES BASE --- */
    --jb-azul-principal: #123498;
    --jb-naranja-principal: #F46F0B;
    --jb-azul-marino: #096ACC;
    --jb-amarillo-hansa: #FDB907;
    --jb-rojo-persa: #CE0B19;
    --jb-turquesa: #41C4C0;
    --jb-gris-oscuro: #A3A3A3;
    --jb-gris-claro: #f4f6fa;
    --jb-blanco: #FFFFFF;
    --jb-borde: #e0e0e0;
    
    /* --- CONFIGURACIÓN MODO CLARO --- */
    --bg-wrapper: var(--jb-gris-claro);
    --bg-blend: normal; 
    --bg-card: var(--jb-blanco);
    --text-primary: var(--jb-azul-principal);
    --text-body: #444444;
    --text-meta: #666666;
    --border-color: var(--jb-borde);
    
    /* INPUTS (CLARO) */
    --input-bg: #FFFFFF;
    --input-border: #cccccc;
    --input-text: #333333;            
    --input-placeholder: #666666;
    
    --shadow-card: 0 4px 20px rgba(0,0,0,0.05);
    --accent-icon: var(--jb-azul-principal);
    --accent-hover: var(--jb-naranja-principal);
}

/* --- MODO OSCURO (CORPORATIVO REAL) --- */
/* Solo aplica si el wrapper tiene la clase .jb-dark-mode */
#jb-full-width-wrapper.jb-dark-mode {

    /* Fondo principal: Azul corporativo profundo */
    --bg-wrapper: 
        linear-gradient(
            to bottom right,
            rgba(0, 0, 0, 0.85),
            rgba(18, 52, 152, 0.6)
        ),
        var(--jb-azul-principal);

    --bg-blend: normal;

    /* Tarjetas: vidrio azul corporativo */
    --bg-card: rgba(18, 52, 152, 0.28);

    /* Textos */
    --text-primary: var(--jb-blanco);
    --text-body: rgba(255, 255, 255, 0.88);
    --text-meta: rgba(255, 255, 255, 0.65);

    /* Bordes suaves */
    --border-color: rgba(255, 255, 255, 0.15);

    /* Inputs */
    --input-bg: rgba(0, 0, 0, 0.45);
    --input-border: rgba(255, 255, 255, 0.25);
    --input-text: var(--jb-blanco);
    --input-placeholder: rgba(255, 255, 255, 0.65);

    /* Sombra elegante */
    --shadow-card: 0 18px 45px rgba(0, 0, 0, 0.45);

    /* Acentos */
    --accent-icon: var(--jb-turquesa);
    --accent-hover: var(--jb-amarillo-hansa);
}


/* =========================================
   2. LAYOUT & PROTECCIÓN DE IMÁGENES
   ========================================= */
#jb-full-width-wrapper {
    font-family: 'Montserrat', sans-serif;
    position: relative;
    width: 100vw;
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    padding: 80px 20px;
    background: var(--bg-wrapper);
    background-blend-mode: var(--bg-blend);
    background-size: cover;
    transition: all 0.5s ease;
    box-sizing: border-box;
    min-height: 100vh;
}

/* --- REGLA CRÍTICA PARA ARREGLAR IMÁGENES --- */
/* Esto asegura que las imágenes dentro del formulario (y cualquier otra imagen dentro de este bloque) 
   se rendericen normalmente y no hereden efectos de mezcla del fondo */
#jb-full-width-wrapper img {
    mix-blend-mode: normal !important;
    max-width: 100%;
    height: auto;
    filter: none !important;
}

#jb-inner-container {
    max-width: 1100px; margin: 0 auto; position: relative;
}

.jb-hidden { display: none !important; }
.jb-fade-in { animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   3. COMPONENTES
   ========================================= */

/* --- BOTÓN TOGGLE --- */
.jb-theme-toggle {
    position: absolute; top: -60px; right: 0;
    background-color: var(--jb-naranja-principal); color: var(--jb-blanco);
    border: none; border-radius: 50%; width: 50px; height: 50px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100;
}
.jb-theme-toggle:hover { 
    background-color: var(--jb-amarillo-hansa); color: #222; 
    transform: scale(1.15) rotate(15deg); box-shadow: 0 8px 25px rgba(253, 185, 7, 0.4);
}
.jb-theme-toggle svg { width: 24px; height: 24px; fill: currentColor; }

/* --- TÍTULOS & FILTROS --- */
.jb-filter-title { 
    text-align: center; color: var(--text-primary) !important; 
    font-size: 2.8rem; font-weight: 800; margin: 0 0 60px 0; 
    letter-spacing: -1px; transition: color 0.5s ease;
}

.jb-filter-card { 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); border-radius: 20px; 
    padding: 35px; margin-bottom: 60px; 
    box-shadow: var(--shadow-card); 
    transition: all 0.4s ease;
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
}

/* --- INPUTS Y SELECTS --- */
.jb-search-row { display: flex; gap: 25px; align-items: flex-end; }
.jb-input-group { flex: 1; display: flex; flex-direction: column; gap: 12px; }

.jb-input-group label { 
    font-size: 0.95rem; color: var(--text-meta); font-weight: 700; 
    margin-left: 5px; transition: color 0.3s; 
    text-transform: uppercase; letter-spacing: 0.5px;
}
#jb-full-width-wrapper.jb-dark-mode .jb-input-group label { color: var(--jb-turquesa); }

/* Estilos base del Input */
.jb-input, .jb-select { 
    width: 100%; height: 55px; padding: 0 22px; 
    border-radius: 12px; 
    border: 1px solid var(--input-border); 
    font-size: 1.05rem; font-family: inherit;
    background-color: var(--input-bg) !important; 
    color: var(--input-text) !important; 
    transition: all 0.3s ease;
}

/* Placeholder Styling */
.jb-input::placeholder { 
    color: var(--input-placeholder) !important; 
    opacity: 1;
}

/* Hover */
.jb-input:hover, .jb-select:hover {
    border-color: var(--jb-turquesa);
    filter: brightness(0.95);
}

/* Focus (Click) */
.jb-input:focus, .jb-select:focus { 
    outline: none; 
    border-color: var(--jb-naranja-principal); 
    background-color: rgba(0, 0, 0, 0.8) !important; 
    color: #ffffff !important; 
    box-shadow: 0 0 0 4px rgba(244, 111, 11, 0.25);
}
.jb-input:focus::placeholder { color: rgba(255, 255, 255, 0.5) !important; }


/* --- FIX PARA LAS OPCIONES DEL SELECT --- */
/* Selector específico para no romper otros selects del sitio */
#jb-full-width-wrapper option { background-color: #FFFFFF; color: #444444; }
#jb-full-width-wrapper.jb-dark-mode option { background-color: #222222; color: #FFFFFF; }

/* Select Icono SVG */
.jb-select { 
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 45px;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23A3A3A3" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); 
    background-repeat: no-repeat; background-position: right 15px center; background-size: 24px; 
}
#jb-full-width-wrapper.jb-dark-mode .jb-select { 
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); 
}

.jb-results-feedback { 
    color: var(--accent-icon); font-size: 1.3rem; margin-bottom: 35px; 
    font-weight: 700; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); 
    display: none; 
}

/* --- TARJETAS (CARDS) --- */
.jb-card { 
    background: var(--bg-card); 
    border-radius: 16px; border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card); 
    margin-bottom: 30px; position: relative; padding: 35px; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    overflow: hidden; cursor: pointer;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.jb-card:hover { 
    transform: translateY(-7px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); 
    border-color: var(--accent-hover); 
}
.jb-card::before { 
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; 
    background-color: var(--accent-icon); transition: all 0.4s ease; opacity: 0.7;
}
.jb-card:hover::before { width: 8px; background-color: var(--accent-hover); opacity: 1; }

.jb-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 15px; margin-bottom: 25px; }
.jb-title-group { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }

.jb-job-title { 
    color: var(--text-primary); font-size: 1.6rem; font-weight: 800; 
    margin: 0; line-height: 1.2; transition: color 0.3s;
}

.jb-tag { 
    padding: 7px 14px; border-radius: 8px; font-size: 0.7rem; font-weight: 800; 
    text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; 
    letter-spacing: 1px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.jb-tag-default { background-color: var(--jb-turquesa); color: var(--jb-blanco); } 
.jb-tag-commission { background-color: var(--jb-amarillo-hansa); color: #222; }
.jb-tag svg { width: 14px; height: 14px; fill: currentColor; }

.jb-vacancies { 
    background-color: var(--jb-azul-marino); color: var(--jb-blanco); 
    padding: 8px 18px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px;
}

.jb-meta { display: flex; gap: 30px; color: var(--text-meta); font-size: 0.95rem; margin-bottom: 25px; flex-wrap: wrap; }
.jb-meta-item { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.jb-meta-item svg { width: 18px; height: 18px; fill: var(--accent-icon); transition: fill 0.3s; opacity: 0.8; }

.jb-description { color: var(--text-body); line-height: 1.7; margin-bottom: 10px; font-size: 1.05rem; }

.jb-card-preview-grid { 
    display: none; margin-top: 30px; padding-top: 25px; 
    border-top: 1px solid var(--border-color); gap: 25px; 
}
.jb-prev-item h4 { 
    margin: 0 0 8px 0; font-size: 0.75rem; color: var(--text-meta); 
    opacity: 0.9; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; 
}
.jb-prev-item p { margin: 0; font-size: 1rem; color: var(--text-primary); font-weight: 700; line-height: 1.4; }

.jb-card-action { 
    color: var(--accent-icon); font-weight: 800; font-size: 1rem; 
    display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; 
    transition: color 0.3s; text-transform: uppercase; letter-spacing: 0.5px;
}
.jb-card-action svg { width: 20px; fill: currentColor; transition: transform 0.3s; }
.jb-card:hover .jb-card-action { color: var(--accent-hover); }
.jb-card:hover .jb-card-action svg { transform: translateX(8px); }

/* --- VISTA DETALLE & FORMULARIO --- */
#jb-detail-view { 
    background: var(--bg-card); border-radius: 20px; 
    box-shadow: var(--shadow-card); overflow: hidden; 
    transition: background 0.4s; border: 1px solid var(--border-color); 
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
}

.jb-detail-header { 
    background: #FFFFFF; 
    padding: 25px 40px; 
    border-bottom: 1px solid #999999 !important;
}

#jb-full-width-wrapper.jb-dark-mode .jb-detail-header { background: rgba(0,0,0,0.2); }

.jb-back-btn { 
    display: inline-flex; align-items: center; gap: 10px; 
    color: var(--text-meta); font-weight: 700; cursor: pointer; 
    margin-bottom: 10px; 
    background: none; border: none; font-size: 1rem; padding: 0; 
    transition: color 0.3s;
}
.jb-back-btn:hover { color: var(--accent-hover); }

.jb-detail-body { padding: 30px 50px; display: grid; grid-template-columns: 2fr 1fr; gap: 60px; }

.jb-section-title { 
    font-size: 1.4rem; color: var(--text-primary); font-weight: 800; 
    margin-bottom: 25px; margin-top: 10px; 
    border-left: 6px solid var(--accent-icon); padding-left: 25px; 
}

.jb-list-check { list-style: none; padding: 0; margin: 0; }
.jb-list-check li { 
    position: relative; padding-left: 35px; margin-bottom: 15px; 
    color: var(--text-body); line-height: 1.6; font-size: 1.05rem;
}
.jb-list-check li::before { 
    content: '✔'; position: absolute; left: 0; 
    color: var(--jb-turquesa); font-weight: 800; font-size: 1.2rem; 
}
#jb-full-width-wrapper.jb-dark-mode .jb-list-check li::before { color: var(--accent-hover); }

.jb-detail-sidebar { 
    background: rgba(0,0,0,0.03); padding: 35px; border-radius: 16px; height: fit-content; 
    border: 1px solid var(--border-color);
}
#jb-full-width-wrapper.jb-dark-mode .jb-detail-sidebar { background: rgba(0,0,0,0.2); }

.jb-sidebar-item { margin-bottom: 30px; }
.jb-sidebar-label { 
    display: block; font-size: 0.85rem; color: var(--text-meta); opacity: 0.9; 
    text-transform: uppercase; font-weight: 800; margin-bottom: 10px; letter-spacing: 1px;
}
.jb-sidebar-value { display: block; font-size: 1.15rem; color: var(--text-primary); font-weight: 700; }

.jb-apply-btn { 
    display: block; width: 100%; text-align: center; 
    background-color: var(--jb-naranja-principal); color: var(--jb-blanco); 
    padding: 20px; border-radius: 12px; font-size: 1.1rem; font-weight: 800; 
    text-transform: uppercase; letter-spacing: 1.5px; margin-top: 25px; 
    transition: all 0.3s; border: none; cursor: pointer; 
    box-shadow: 0 5px 20px rgba(244, 111, 11, 0.4);
}
.jb-apply-btn:hover { 
    background-color: var(--jb-rojo-persa); transform: translateY(-3px); 
    box-shadow: 0 10px 30px rgba(206, 11, 25, 0.5);
}

#jb-application-form { max-width: 100%; margin: 40px 0; background: transparent; padding: 0; }
#jb-form-title { color: var(--text-primary) !important; transition: color 0.3s; }

/* Botón de regreso especial */
.jb-back-btn-styled {
    background-color: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.jb-back-btn-styled:hover {
    background-color: var(--bg-card);
    border-color: var(--accent-hover);
    color: var(--accent-hover);
}


/* =========================================
   4. MEDIA QUERIES
   ========================================= */
@media (min-width: 992px) { 
    .jb-card-preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    #jb-full-width-wrapper { width: 100%; left: 0; right: 0; margin: 0; padding: 40px 15px; }
    .jb-filter-card { padding: 25px; }
    .jb-search-row { flex-direction: column; align-items: stretch; gap: 20px; }
    .jb-header { flex-direction: column; gap: 15px; }
    .jb-vacancies { align-self: flex-start; }
    .jb-detail-body { grid-template-columns: 1fr; padding: 30px 25px; gap: 40px; }
    .jb-detail-header { padding: 30px 25px; }
    .jb-card { padding: 25px; }
}/* End custom CSS */