/*
 Theme Name:   Superio Child
 Theme URI:    https://domempleos.com
 Description:  Child theme para DomEmpleos.com - Portal de empleos RD
 Author:       DomEmpleos AG
 Author URI:   https://domempleos.com
 Template:     superio
 Version:      3.0.0
 Text Domain:  superio-child
*/

/* ============================================
   DOMEMPLEOS - ESTILOS GLOBALES
   Mejoras sutiles al tema padre.
   La homepage usa template-homepage.php
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================
   HEADER - Moderno y limpio (TODAS las páginas)
   ============================================ */

/* Desktop header - FORZAR VISIBILIDAD */
#apus-header,
#apus-header.header-default,
#apus-header.visible-lg,
.apus-header,
header.site-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 999 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #E8EBF0 !important;
    box-shadow: none !important;

    transition: all 0.3s ease !important;
}

/* Sticky header */
.main-sticky-header-wrapper .main-sticky-header {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Logo */
.logo-in-theme img,
.site-branding img,
.navbar-brand img,
.header-logo img,
#apus-header .logo img {
    max-height: 38px !important;
    transition: all 0.2s ease !important;
}

/* === NAV LINKS Desktop === */
#apus-header .nav.navbar-nav>li>a,
.apus-header .nav.navbar-nav>li>a,
.main-menu .nav.navbar-nav>li>a,
.megamenu>.navbar-collapse>.navbar-nav>li>a {
    color: #3D3D5C !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding: 12px 16px !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    border-radius: 8px !important;
}

#apus-header .nav.navbar-nav>li>a:hover,
.main-menu .nav.navbar-nav>li>a:hover {
    color: #1B4F8A !important;
    background: rgba(27, 79, 138, 0.05) !important;
}

/* Active menu item */
#apus-header .nav.navbar-nav>li.active>a,
#apus-header .nav.navbar-nav>li.current-menu-item>a,
.main-menu .nav.navbar-nav>li.active>a {
    color: #1B4F8A !important;
}

#apus-header .nav.navbar-nav>li.active>a::after,
#apus-header .nav.navbar-nav>li.current-menu-item>a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 16px !important;
    right: 16px !important;
    height: 2.5px !important;
    background: linear-gradient(90deg, #1B4F8A, #2D6BBF) !important;
    border-radius: 2px !important;
}

/* Dropdown menus */
#apus-header .nav.navbar-nav .dropdown-menu,
.megamenu .dropdown-menu,
.apus-megamenu .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #E8EBF0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 8px !important;
    margin-top: 4px !important;
    animation: deDropIn 0.2s ease !important;
}

@keyframes deDropIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#apus-header .nav.navbar-nav .dropdown-menu>li>a,
.megamenu .dropdown-menu>li>a {
    color: #3D3D5C !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

#apus-header .nav.navbar-nav .dropdown-menu>li>a:hover,
.megamenu .dropdown-menu>li>a:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
}

/* === HEADER RIGHT BUTTONS === */

/* Login/User button */
.top-wrapper-menu .btn-menu-account,
#apus-header .btn-menu-account,
.header-right .btn-menu-account {
    color: #3D3D5C !important;
    font-size: 16px !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.top-wrapper-menu .btn-menu-account:hover,
#apus-header .btn-menu-account:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
}

/* "Publicar vacante" / Post Job button */
#apus-header .btn-theme,
#apus-header .btn-add-listing,
.header-right .btn-theme,
.header-right .btn,
a.btn-add-listing,
.submit-job .btn {
    background: linear-gradient(135deg, #E63946 0%, #C1272D 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.2) !important;
    transition: all 0.25s ease !important;
    text-transform: none !important;
}

#apus-header .btn-theme:hover,
.header-right .btn-theme:hover,
.header-right .btn:hover,
a.btn-add-listing:hover {
    background: linear-gradient(135deg, #CF2F3C 0%, #A11F26 100%) !important;
    box-shadow: 0 4px 16px rgba(230, 57, 70, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Notification bell */
.message-top .message-notification,
#apus-header .message-notification {
    color: #6C6C8A !important;
    font-size: 16px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.message-top .message-notification:hover {
    color: #1B4F8A !important;
}

.message-top .unread-count,
.message-notification .unread-count {
    background: #E63946 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -4px !important;
    right: -6px !important;
}

/* === TOPBAR (si existe) === */
.apus-topbar,
#apus-header .apus-topbar {
    background: #0F2847 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 12.5px !important;
    padding: 6px 0 !important;
    border-bottom: none !important;
}

.apus-topbar a,
#apus-header .apus-topbar a {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: all 0.2s ease !important;
}

.apus-topbar a:hover {
    color: #ffffff !important;
}

/* === MOBILE HEADER === */
#apus-header-mobile,
.header-mobile {
    background: #ffffff !important;
    border-bottom: 1px solid #E8EBF0 !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
}

/* Mobile logo */
#apus-header-mobile .logo img,
.header-mobile .logo img {
    max-height: 32px !important;
}

/* Hamburger menu button */
.btn-showmenu,
.header-mobile .btn-showmenu {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.btn-showmenu:hover {
    background: #F3F6FC !important;
}

.btn-showmenu span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #3D3D5C !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
}

/* Mobile offcanvas menu */
#apus-mobile-menu,
.apus-offcanvas {
    background: #ffffff !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1) !important;
}

#apus-mobile-menu .header-offcanvas {
    border-bottom: 1px solid #E8EBF0 !important;
    padding: 16px 0 !important;
}

/* Mobile nav links */
#apus-mobile-menu .navbar-offcanvas a,
.apus-offcanvas .navbar-offcanvas a {
    color: #3D3D5C !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #F3F5F8 !important;
    transition: all 0.15s ease !important;
}

#apus-mobile-menu .navbar-offcanvas a:hover,
.apus-offcanvas .navbar-offcanvas a:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
    padding-left: 24px !important;
}

/* Mobile close button */
.btn-toggle-canvas,
.apus-offcanvas .btn-toggle-canvas {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    color: #3D3D5C !important;
    transition: all 0.2s ease !important;
}

.btn-toggle-canvas:hover {
    background: #FEE2E2 !important;
    color: #E63946 !important;
}

/* Mobile "Post Job" button */
#apus-mobile-menu .submit-job .btn,
.apus-offcanvas .submit-job .btn {
    background: linear-gradient(135deg, #E63946 0%, #C1272D 100%) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 14px 24px !important;
    margin: 16px 20px !important;
    text-align: center !important;
    font-size: 14px !important;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.2) !important;
}

/* Overlay */
.over-dark {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
}

/* ============================================
   FOOTER - Profesional (TODAS las páginas)
   ============================================ */

footer,
.apus-footer,
#apus-footer,
.footer-wrapper {
    background: linear-gradient(180deg, #0A1628 0%, #0F2847 100%) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

footer h2,
footer h3,
footer h4,
.apus-footer h2,
.apus-footer h3,
.apus-footer h4,
#apus-footer h2,
#apus-footer h3,
#apus-footer h4,
footer .widget-title {
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 16px !important;
}

footer a,
.apus-footer a,
#apus-footer a {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13.5px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

footer a:hover,
.apus-footer a:hover {
    color: #ffffff !important;
    padding-left: 2px !important;
}

.footer-bottom,
.apus-copyright,
.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 0 !important;
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

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

/* Transiciones suaves */
a,
button,
.btn,
input {
    transition: all 0.2s ease;
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Formularios */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #1B4F8A !important;
    box-shadow: 0 0 0 3px rgba(27, 79, 138, 0.08) !important;
    outline: none !important;
}


/* ============================================
   HEADER ACTIONS - Botones personalizados
   ============================================ */

/* Contenedor de acciones */
.de-header-action {
    margin-left: 8px !important;
}

/* Botón Iniciar Sesión */
.de-btn-login {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #3D3D5C !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.de-btn-login:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
}

.de-btn-login i {
    font-size: 15px !important;
}

/* Botón Registrarse */
.de-btn-register {
    display: inline-flex !important;
    align-items: center !important;
    color: #1B4F8A !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 8px 20px !important;
    border: 2px solid #1B4F8A !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    margin-left: 4px !important;
}

.de-btn-register:hover {
    background: #1B4F8A !important;
    color: #ffffff !important;
}

/* Botón Publicar Vacante */
.de-btn-post-job {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #E63946 0%, #C1272D 100%) !important;
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.2) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    letter-spacing: 0.02em !important;
}

.de-btn-post-job:hover {
    background: linear-gradient(135deg, #CF2F3C 0%, #A11F26 100%) !important;
    box-shadow: 0 4px 16px rgba(230, 57, 70, 0.3) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.de-btn-post-job i {
    font-size: 12px !important;
}

/* Botón de usuario logueado */
.de-user-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px 6px 6px !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    color: #3D3D5C !important;
}

.de-user-btn:hover {
    background: #F3F6FC !important;
}

/* Avatar */
.de-user-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    border: 2px solid #E8EBF0 !important;
}

.de-user-name {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #3D3D5C !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.de-chevron {
    font-size: 10px !important;
    color: #8E8EA0 !important;
    transition: transform 0.2s ease !important;
}

.de-user-btn:hover .de-chevron {
    transform: rotate(180deg) !important;
}

/* Dropdown del usuario */
.top-wrapper-menu .inner-top-menu {
    background: #ffffff !important;
    border: 1px solid #E8EBF0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    padding: 8px !important;
    min-width: 200px !important;
    animation: deDropIn 0.2s ease !important;
}

.top-wrapper-menu .inner-top-menu .topmenu-menu>li>a {
    display: block !important;
    padding: 10px 16px !important;
    color: #3D3D5C !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.top-wrapper-menu .inner-top-menu .topmenu-menu>li>a:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
}

/* Auth buttons contenedor */
.de-auth-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Responsive: ocultar texto en pantallas medianas */
@media (max-width: 1200px) {
    .de-user-name {
        display: none !important;
    }

    .de-btn-post-job span {
        display: none !important;
    }

    .de-btn-login span {
        display: none !important;
    }

    .de-btn-register {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   USER DROPDOWN - Menú de usuario logueado
   ============================================ */

.top-wrapper-menu {
    position: relative !important;
}

.de-user-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    color: #3D3D5C !important;
    cursor: pointer !important;
}

.de-user-btn:hover {
    background: #F3F6FC !important;
}

.de-user-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #E8EDF5 !important;
}

.de-user-name {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3D3D5C !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.de-user-dropdown {
    display: none;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    margin-top: 8px !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    min-width: 180px !important;
    z-index: 9999 !important;
    padding: 8px !important;
    border: 1px solid #E8EDF5 !important;
}

.de-user-dropdown.active {
    display: block !important;
}

.de-user-dropdown a {
    display: block !important;
    padding: 10px 16px !important;
    color: #3D3D5C !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.de-user-dropdown a:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
}