/*
 * ══════════════════════════════════════════════════════════════
 *  GuateWork — Global Theme Override
 *  Versión 2.0 | Carga DESPUÉS de style.css
 *
 *  Paleta inspirada en la imagen de marca + bandera de Guatemala
 *  Fuente: Plus Jakarta Sans (moderna, legible, multiidioma)
 * ══════════════════════════════════════════════════════════════
 */

/* ── 1. Google Fonts ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── 2. Variables de Diseño ──────────────────────────────── */
:root {
    /* Paleta principal — azul-índigo vibrante (imagen de marca) */
    --gw-primary:        #3B37E8;   /* azul índigo principal */
    --gw-primary-dark:   #1e1ab0;   /* hover / pressed */
    --gw-primary-light:  #6C69F5;   /* variante clara */
    --gw-primary-bg:     #EEF0FF;   /* fondo muy claro */
    --gw-primary-border: #c7d2fe;

    /* Acento — verde vibrante del logotipo / naturaleza */
    --gw-accent:         #10b981;   /* verde éxito */
    --gw-accent-dark:    #059669;
    --gw-accent-bg:      #d1fae5;

    /* Lima / destaque — del afiche de marca */
    --gw-lime:           #AAFF2F;
    --gw-lime-dark:      #84cc16;

    /* Alerta / advertencia */
    --gw-warning:        #f59e0b;
    --gw-warning-bg:     #fef3c7;

    /* Error */
    --gw-danger:         #ef4444;
    --gw-danger-bg:      #fee2e2;

    /* Oscuros (reemplazo de #242424) */
    --gw-dark:           #1e1b4b;   /* casi negro con tinte índigo */
    --gw-dark2:          #312e81;
    --gw-gray:           #4b5563;
    --gw-muted:          #6b7280;
    --gw-muted-light:    #9ca3af;

    /* Bordes y fondos */
    --gw-border:         #e0e7ff;
    --gw-border-light:   #f0f4ff;
    --gw-bg:             #f8f9ff;   /* fondo general ligeramente azulado */
    --gw-white:          #ffffff;

    /* Tipografía */
    --gw-font:           'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* Radios */
    --gw-radius-sm:      4px;
    --gw-radius:         8px;
    --gw-radius-md:      12px;
    --gw-radius-lg:      16px;
    --gw-radius-xl:      24px;

    /* Sombras */
    --gw-shadow-sm:      0 1px 4px rgba(59,55,232,.08);
    --gw-shadow:         0 4px 16px rgba(59,55,232,.12);
    --gw-shadow-md:      0 8px 24px rgba(59,55,232,.16);
    --gw-shadow-lg:      0 16px 48px rgba(59,55,232,.20);

    /* Transición global */
    --gw-transition:     all 0.22s cubic-bezier(.4,0,.2,1);
}

/* ── 3. Reset de fuente — reemplaza Roboto en TODO el sitio ── */
/* NO aplicar a íconos FontAwesome */
body, html,
p, span, a, li, label, input, textarea, select, button,
h1, h2, h3, h4, h5, h6,
td, th, blockquote, pre,
.link-j1, .main-heading, .job-ut-dts, .job-des-dt,
.navbar-light .navbar-nav .nav-link,
.add-post, .add-task, .view-links, .srch-btn,
.lr_btn, .apply_job, .apply_job_rt,
.offer-text-dt, .p-category {
    font-family: var(--gw-font) !important;
}
p {
    color: var(--gw-muted);
}

/* ── RESTAURAR FontAwesome — FIX ROBUSTO anti-□ ─────────── */
/* El body hereda la fuente custom; esto lo cancela para íconos FA */
i.fa, i.fas, i.far, i.fal, i.fab, i.fad,
.fa, .fas, .far, .fal, .fab, .fad,
[class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 5 Free" !important;
    font-style: normal !important;
    font-weight: 900 !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    speak: never !important;
    display: inline-block !important;
}
i.fab, .fab, [class^="fab"] {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}
i.far, .far { font-weight: 400 !important; }
/* ::before es donde realmente se pinta el carácter del ícono */
.fa::before, .fas::before, .far::before, .fal::before, .fad::before,
[class^="fa-"]::before, [class*=" fa-"]::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}
.fab::before { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; }
.far::before { font-weight: 400 !important; }

/* ── 4. Fondo general ─────────────────────────────────────── */
body {
    background: var(--gw-bg) !important;
}

/* ── 5. Color principal — reemplaza #3498db ──────────────── */

/* Links hover */
a:hover { color: var(--gw-primary) !important; }
a:focus { color: var(--gw-primary) !important; }

/* ::selection */
::-moz-selection { background: var(--gw-primary); color: #fff; }
::selection      { background: var(--gw-primary); color: #fff; }

/* Inputs focus */
input:focus,
textarea:focus,
.job-input:focus,
.search-1:focus {
    border-color: var(--gw-primary) !important;
    box-shadow: 0 0 0 3px rgba(59,55,232,.12) !important;
    outline: none !important;
}

/* ── 6. Barra de búsqueda (Search-section) ───────────────── */
.Search-section {
    background: linear-gradient(135deg, var(--gw-primary) 0%, var(--gw-primary-light) 100%) !important;
    padding: 18px 0 !important;
}
.srch-btn {
    background: var(--gw-accent) !important;
    border-color: var(--gw-accent) !important;
    color: #fff !important;
    border-radius: var(--gw-radius) !important;
    font-weight: 600 !important;
    transition: var(--gw-transition) !important;
}
.srch-btn:hover {
    background: var(--gw-accent-dark) !important;
    border-color: var(--gw-accent-dark) !important;
    color: #fff !important;
}
.search-1 {
    border-color: rgba(255,255,255,.3) !important;
    border-radius: var(--gw-radius) !important;
    color: var(--gw-dark) !important;
}

/* ── 7. Header / Navbar ──────────────────────────────────── */
.sub-header {
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(59,55,232,.08) !important;
}
.navbar-light .navbar-nav .nav-link {
    color: var(--gw-dark) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-expand-lg .navbar-nav .nav-link:hover {
    color: var(--gw-primary) !important;
}
.add-post {
    background: var(--gw-primary) !important;
    border-radius: var(--gw-radius) !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
    transition: var(--gw-transition) !important;
}
.add-post:hover {
    background: var(--gw-primary-dark) !important;
    color: #fff !important;
}
.add-task {
    background: var(--gw-dark) !important;
    border-radius: var(--gw-radius) !important;
    font-weight: 600 !important;
}
.add-task:hover {
    background: var(--gw-dark2) !important;
    color: #fff !important;
}
.icon14:hover, .icon15:hover { color: var(--gw-primary) !important; }
.circle-alrt     { background: var(--gw-primary) !important; }
.noti-p-link     { color: var(--gw-primary) !important; }
.link-item:hover { border-color: var(--gw-primary) !important; color: var(--gw-primary) !important; }

/* ── 8. Barra de logros (achivements) ────────────────────── */
.achivements {
    background: linear-gradient(135deg, var(--gw-dark) 0%, var(--gw-dark2) 100%) !important;
}

/* ── 9. Tarjetas de oferta (job-item) ────────────────────── */
.job-item {
    border-radius: var(--gw-radius-md) !important;
    border-color: var(--gw-border) !important;
    transition: var(--gw-transition) !important;
    overflow: hidden !important;
}
.job-item:hover {
    border-color: var(--gw-primary-border) !important;
    box-shadow: var(--gw-shadow-md) !important;
    transform: translateY(-3px) !important;
}
.job-fp {
    background: var(--gw-primary) !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
}
.job-prt  { background: var(--gw-accent) !important; }
.job-skills a:hover,
.job-skills .more-skills {
    background: var(--gw-primary) !important;
    border-color: var(--gw-primary) !important;
    color: #fff !important;
}
.link-j1:hover {
    background: var(--gw-primary) !important;
    color: #fff !important;
}
.bookmark1:hover {
    background: var(--gw-primary) !important;
    border-color: var(--gw-primary) !important;
    color: #fff !important;
}

/* ── 10. Botones principales ─────────────────────────────── */
.view-links {
    background: var(--gw-primary) !important;
    border-radius: var(--gw-radius) !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    transition: var(--gw-transition) !important;
}
.view-links:hover {
    background: var(--gw-primary-dark) !important;
    color: #fff !important;
}
.btn-152 {
    background: var(--gw-primary) !important;
    border-radius: var(--gw-radius) !important;
}
.btn-152:hover {
    background: var(--gw-primary-dark) !important;
    color: #fff !important;
}
.btn-153 {
    background: var(--gw-dark) !important;
    border-radius: var(--gw-radius) !important;
}
.btn-153:hover {
    background: var(--gw-dark2) !important;
    color: #fff !important;
}
.s-btn {
    background: var(--gw-primary) !important;
    border-color: var(--gw-primary) !important;
    border-radius: var(--gw-radius) !important;
}
.s-btn:hover {
    background: var(--gw-accent) !important;
    border-color: var(--gw-accent) !important;
    color: #fff !important;
}
.flr-btn {
    background: var(--gw-primary) !important;
    border-radius: var(--gw-radius) !important;
    font-weight: 700 !important;
}
.apply_job, .apply_job_rt, .apply_job50 {
    background: var(--gw-primary) !important;
    border-color: var(--gw-primary) !important;
    border-radius: var(--gw-radius) !important;
}
.apply_job:hover, .apply_job_rt:hover, .apply_job50:hover {
    background: var(--gw-primary-dark) !important;
    color: #fff !important;
}

/* ── 11. Pestañas / Nav tabs ─────────────────────────────── */
.main-tabs .nav-tabs .nav-item.show .nav-link,
.main-tabs .nav-tabs .nav-link.active {
    color: var(--gw-primary) !important;
    border-bottom-color: var(--gw-primary) !important;
}
.main-tabs .nav-tabs .nav-item .nav-link:hover {
    color: var(--gw-primary) !important;
    border-bottom-color: var(--gw-primary) !important;
}
.account_tabs .nav-tabs .nav-link.active,
.account_tabs .nav-link:hover {
    color: var(--gw-primary) !important;
    border-color: var(--gw-border) var(--gw-border) #fff !important;
}
.job_nav .nav-item.show .nav-link,
.job_nav .nav-link.active,
.job_nav .nav-link:hover {
    color: var(--gw-primary) !important;
    border-left-color: var(--gw-primary) !important;
}

/* ── 12. Slider / Carruseles ─────────────────────────────── */
.bnnr-owl .owl-nav .owl-prev:hover,
.bnnr-owl .owl-nav .owl-next:hover,
.jobs-owl .owl-nav .owl-prev:hover,
.jobs-owl .owl-nav .owl-next:hover {
    background: var(--gw-primary) !important;
    border-color: var(--gw-primary) !important;
    color: #fff !important;
}

/* ── 13. Categorías ──────────────────────────────────────── */
.offer-step {
    border-top-color: var(--gw-primary) !important;
    border-radius: 0 0 var(--gw-radius) var(--gw-radius) !important;
    transition: var(--gw-transition) !important;
}
.offer-step:hover {
    box-shadow: var(--gw-shadow-md) !important;
}
.p-category > a:hover p { color: var(--gw-primary) !important; }
.offer-text-dt a:hover   { color: var(--gw-primary) !important; }
.job-ut-dts span i       { color: var(--gw-primary) !important; }

/* ── 14. Rating / Stars ──────────────────────────────────── */
.star span { background: var(--gw-accent) !important; }
.progress_bar_skills { background: var(--gw-primary) !important; }
.group_bar1 span { color: var(--gw-primary) !important; }

/* ── 15. Footer ──────────────────────────────────────────── */
.footer {
    background: var(--gw-dark) !important;
}
.header102 { background: var(--gw-primary) !important; }
.copyright a { color: var(--gw-primary-light) !important; }
.footer-links ul li a:hover { color: var(--gw-primary-light) !important; }
.view-all {
    background: var(--gw-primary) !important;
    border-color: var(--gw-primary) !important;
}
.view-all:hover {
    background: var(--gw-primary-dark) !important;
    color: #fff !important;
}
#pageup {
    background: var(--gw-primary) !important;
    border-color: var(--gw-primary) !important;
    border-radius: 50% !important;
}
#pageup:hover {
    background: var(--gw-primary-dark) !important;
}

/* ── 16. Dashboard / Badges ──────────────────────────────── */
.priorty      { background: var(--gw-primary) !important; }
.priorty_low  { background: var(--gw-accent) !important; }
.priorty_medium { background: var(--gw-warning) !important; }
.trans_badge  { background: var(--gw-primary) !important; }
.col_icon1    { color: var(--gw-primary) !important; }
.add_note_btn { background: var(--gw-primary) !important; }
.add_note_btn:hover { background: var(--gw-primary-dark) !important; }
.main_lg_btn  { background: var(--gw-primary) !important; }
.main_lg_btn:hover { background: var(--gw-primary-dark) !important; }

/* ── 17. Mensajes / Chat ─────────────────────────────────── */
.message-inner-dt > p    { background: var(--gw-primary) !important; }
.mf-field button         { background: var(--gw-primary) !important; }
.mf-field button:hover   { background: var(--gw-primary-dark) !important; }
.msg-notifc              { background: var(--gw-primary) !important; }
.messages-list ul li.active .msg-status { background: var(--gw-primary) !important; }

/* ── 18. Checkboxes / UI Semantic ────────────────────────── */
.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before {
    border-color: var(--gw-primary) !important;
}
.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ label:after {
    background: var(--gw-primary) !important;
}
.main-p-pagination .pagination .page-link:hover,
.main-p-pagination .pagination .page-link.active {
    background: var(--gw-primary) !important;
    border-color: var(--gw-primary) !important;
    color: #fff !important;
}

/* ── 19. Planes / Precios ────────────────────────────────── */
.plan_icon i   { color: var(--gw-primary) !important; }
.plan_btn a    { background: var(--gw-primary) !important; }
.plan_btn a:hover { background: var(--gw-primary-dark) !important; color: #fff !important; }
.earn_amount   { color: var(--gw-primary) !important; }
.withdraw_btn  { background: var(--gw-primary) !important; }
.withdraw_btn:hover { background: var(--gw-primary-dark) !important; }

/* ── 20. Blog ────────────────────────────────────────────── */
.read_btn { background: var(--gw-primary) !important; }
.read_btn:hover { background: var(--gw-primary-dark) !important; color: #fff !important; }
.pp_14    { background: var(--gw-primary) !important; }
.blogbtn142 { background: var(--gw-primary) !important; }
.blogbtn142:hover { background: var(--gw-primary-dark) !important; }
.blog_left a { color: var(--gw-primary) !important; }
.blog_left a:hover { color: var(--gw-primary-dark) !important; }
.subscribe_blog { background: var(--gw-primary) !important; }

/* ── 21. Formularios de contacto / postulación ───────────── */
.hire_btn, .post_jp_btn, .lr_btn, .help_btn {
    background: var(--gw-primary) !important;
    border-radius: var(--gw-radius) !important;
}
.hire_btn:hover, .post_jp_btn:hover, .lr_btn:hover, .help_btn:hover {
    background: var(--gw-primary-dark) !important;
    color: #fff !important;
}
.add_portfolio_btn { background: var(--gw-primary) !important; }
.download_button   { background: var(--gw-primary) !important; }
.apled_btn50, .apled_btn60, .paid_btn {
    background: var(--gw-primary) !important;
    border-radius: var(--gw-radius-sm) !important;
}
.apled_btn50:hover, .apled_btn60:hover, .paid_btn:hover {
    background: var(--gw-primary-dark) !important;
}
.apply_check input:checked ~ .box:after,
.apply_check input:checked ~ label:after {
    color: var(--gw-primary) !important;
}

/* ── 22. Social links fijos ──────────────────────────────── */
.skiils_button { border-color: var(--gw-primary) !important; color: var(--gw-primary) !important; }
.skiils_button:hover {
    background: var(--gw-primary) !important;
    color: #fff !important;
    border-color: var(--gw-primary) !important;
}
.vw1254 i { color: var(--gw-primary) !important; }
.lc_icon  { color: var(--gw-primary) !important; }
.job-urs-dts .c-link { color: var(--gw-primary) !important; }

/* ── 23. Barra de progreso / Range slider ────────────────── */
.theme-green .back-bar .pointer {
    border-color: var(--gw-primary) !important;
}
.datepicker--cell.-selected-,
.datepicker--cell.-selected-.-current- {
    background: var(--gw-primary) !important;
    color: #fff !important;
}
.datepicker--cell.-current- { color: var(--gw-primary) !important; }

/* ── 24. File upload ─────────────────────────────────────── */
.file-form [type=file] + label {
    background: var(--gw-primary) !important;
    border-radius: var(--gw-radius) !important;
}
.file-form [type=file] + label:hover {
    background: var(--gw-primary-dark) !important;
}
.image-upload-wrap1 { background: var(--gw-primary) !important; }

/* ── 25. Tipografía de títulos de sección ────────────────── */
.main-heading h2 {
    color: var(--gw-dark) !important;
    font-weight: 700 !important;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
}
.main-heading span {
    color: var(--gw-muted) !important;
}

/* ── 26. Scrollbar ───────────────────────────────────────── */
body::-webkit-scrollbar-thumb {
    background: rgba(59,55,232,.18) !important;
}

/* ── 27. Ajuste del doble encabezado de categorías ───────── */
/* La sección custom de index.php oculta el H2 interno de categorias.php */
.gw-cats-wrapper .main-heading {
    display: none !important;
}

/* ── 28. Tarjetas de oferta — bordes redondeados modernos ── */
.offer-step {
    border-radius: var(--gw-radius-md) !important;
    border-top-width: 3px !important;
}
.job-item {
    border-radius: var(--gw-radius-md) !important;
}

/* ── 29. Indicadores de estado en proyectos ──────────────── */
.status-active   { background: var(--gw-primary-bg) !important; color: var(--gw-primary) !important; }
.status-accepted { background: var(--gw-accent-bg) !important; color: var(--gw-accent-dark) !important; }

/* ── 30. Responsive refinements ──────────────────────────── */
@media (max-width: 767px) {
    .add-post, .add-task {
        font-size: 12px !important;
        padding: 6px 14px !important;
    }
    .job-item { border-radius: var(--gw-radius) !important; }
    .view-links { width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════
   31. MOBILE OVERFLOW — FIX CRÍTICO
   Elimina la franja blanca horizontal en móviles.
   Causa raíz: márgenes negativos de Bootstrap .row (-15px)
   cuando el .container no compensa correctamente.
══════════════════════════════════════════════════════════════ */
html {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Todos los containers y filas deben respetar el ancho */
.container,
.container-fluid,
.row {
    max-width: 100% !important;
}

/* Bootstrap .row tiene margin negativo que causa overflow */
@media (max-width: 767px) {
    /* Reset márgenes negativos de Bootstrap en mobile */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Compensar: las columnas pierden su padding si el row pierde margen */
    .row > [class*="col-"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Secciones que tenían ancho fijo */
    section,
    .gw-section,
    .gloria-section,
    .publicar-section,
    .achivements,
    .all-categories,
    .we-offers {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* OWL carousel fix — el wrapper puede exceder el viewport */
    .owl-carousel,
    .owl-stage-outer,
    .jobs-owl,
    .bnnr-owl {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Barra de logros / achivements */
    .achive-text {
        font-size: 13px !important;
        white-space: normal !important;
    }
    .post-buttons {
        text-align: center !important;
    }
    .post-buttons li {
        display: block !important;
        margin-bottom: 8px !important;
    }
    .add-job, .add-project {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        text-align: center !important;
    }

    /* Footer columns */
    .footer-links {
        margin-top: 30px !important;
    }
    .subscribe-newsletter .row > [class*="col-"] {
        margin-bottom: 16px !important;
    }

    /* Pagination */
    .main-p-pagination {
        text-align: center !important;
    }
    .main-p-pagination .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* Botones de acciones en tarjetas de trabajo */
    .link-btn li {
        display: block !important;
        width: 100% !important;
    }
    .link-btn li:last-child {
        width: 100% !important;
    }
    .link-btn li:nth-child(2) {
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid #e5e5e5 !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }
}