/*
 * ══════════════════════════════════════════════════════════════
 *  Yoclink.ai — 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);

    /* ── Paleta Navy / oscuros ──────────────────────────────── */
    --gw-navy:           #0f172a;   /* fondo oscuro principal */
    --gw-navy2:          #1e293b;   /* oscuro secundario */

    /* ── Paleta Teal ────────────────────────────────────────── */
    --gw-teal:           #0d9488;   /* teal primario */
    --gw-teal2:          #14b8a6;   /* teal claro / hover */

    /* ── Escala Slate (sl) — bordes, textos, fondos ─────────── */
    --gw-sl50:           #f8fafc;
    --gw-sl100:          #f1f5f9;
    --gw-sl200:          #e2e8f0;
    --gw-sl300:          #cbd5e1;
    --gw-sl400:          #94a3b8;
    --gw-sl500:          #64748b;
    --gw-sl600:          #475569;

    /* ── Aliases de radio ───────────────────────────────────── */
    --gw-r8:             8px;
    --gw-r12:            12px;
    --gw-r14:            14px;

    /* ── Aliases de sombra ──────────────────────────────────── */
    --gw-sh-xs:          0 1px 3px rgba(0,0,0,.06);
    --gw-sh-sm:          0 2px 8px rgba(0,0,0,.07);
    --gw-sh-md:          0 4px 16px rgba(0,0,0,.09);
    --gw-sh-teal:        0 6px 20px rgba(13,148,136,.22);
}

/* ── 3. Reset de fuente — reemplaza Roboto en TODO el sitio ── */
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-□ ─────────── */
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; }
.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 ──────────────── */
a:hover { color: var(--gw-primary) !important; }
a:focus { color: var(--gw-primary) !important; }
::-moz-selection { background: var(--gw-primary); color: #fff; }
::selection      { background: var(--gw-primary); color: #fff; }
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 {
    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 {
    background: linear-gradient(135deg, var(--gw-dark) 0%, var(--gw-dark2) 100%) !important;
}

/* ── 9. Tarjetas de oferta ───────────────────────────────── */
.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. Doble encabezado de categorías ──────────────────── */
.gw-cats-wrapper .main-heading { display: none !important; }

/* ── 28. Tarjetas — 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
══════════════════════════════════════════════════════════════ */
html {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}
.container,
.container-fluid,
.row {
    max-width: 100% !important;
}
@media (max-width: 767px) {
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .row > [class*="col-"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    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, .owl-stage-outer, .jobs-owl, .bnnr-owl {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .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-links { margin-top: 30px !important; }
    .subscribe-newsletter .row > [class*="col-"] { margin-bottom: 16px !important; }
    .main-p-pagination { text-align: center !important; }
    .main-p-pagination .pagination { flex-wrap: wrap !important; justify-content: center !important; }
    .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;
    }
}

/* ══════════════════════════════════════════════════════════════
   32. APLICAR SIN REGISTRO (aplicar_sin_registro.php)
   Layout split oscuro/claro, clases: asr-*
══════════════════════════════════════════════════════════════ */

/* Keyframe compartido para spinners */
@keyframes gw-spin { to { transform: rotate(360deg); } }

/* Layout */
.asr-wrap {
    display: grid;
    grid-template-columns: 420px 1fr;
    min-height: 100vh;
    width: 100%;
}

/* ─ Panel izquierdo (oscuro) ─ */
.asr-left {
    background:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(59,55,232,.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 80%, rgba(13,148,136,.12) 0%, transparent 60%),
        #0f172a;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}
.asr-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 48px;
    text-decoration: none;
}
.asr-logo img  { height: 32px; width: auto; }
.asr-logo span { font-size: 20px; font-weight: 800; color: #f8fafc; letter-spacing: -.03em; }
.asr-left-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.2;
    letter-spacing: -.03em;
    margin: 0 0 10px;
}
.asr-left-sub { font-size: 14px; color: #64748b; margin: 0 0 36px; line-height: 1.6; }

/* Pasos numerados */
.asr-steps { display: flex; flex-direction: column; }
.asr-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    position: relative;
    padding-bottom: 28px;
}
.asr-step:last-child { padding-bottom: 0; }
.asr-step::before {
    content: '';
    position: absolute;
    left: 18px; top: 36px; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255,255,255,.10), transparent);
}
.asr-step:last-child::before { display: none; }
.asr-step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(59,55,232,.18);
    border: 1px solid rgba(59,55,232,.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #818cf8;
    flex-shrink: 0;
}
.asr-step.done .asr-step-num {
    background: rgba(16,185,129,.15);
    border-color: rgba(16,185,129,.3);
    color: #34d399;
}
.asr-step-text strong { display: block; font-size: 13.5px; font-weight: 700; color: #e2e8f0; margin-bottom: 2px; }
.asr-step-text p      { font-size: 12px; color: #475569; margin: 0; line-height: 1.5; }

/* Pills de confianza */
.asr-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 32px;
}
.asr-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    font-size: 11.5px; font-weight: 600; color: #64748b;
}
.asr-trust-pill i { color: #0d9488; font-size: 10px; }

/* ─ Panel derecho (formulario) ─ */
.asr-right {
    background: #f8fafc;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 32px;
}
.asr-form-wrap { width: 100%; max-width: 520px; }
.asr-form-title { font-size: 1.4rem; font-weight: 800; color: #1e293b; margin: 0 0 4px; letter-spacing: -.02em; }
.asr-form-sub   { font-size: 13.5px; color: #64748b; margin: 0 0 28px; }

/* Alerta informativa */
.asr-alert {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(13,148,136,.06);
    border: 1px solid rgba(13,148,136,.2);
    border-radius: 10px;
    margin-bottom: 24px;
}
.asr-alert i              { color: var(--gw-accent); font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.asr-alert-text           { font-size: 13px; color: #374151; line-height: 1.5; }
.asr-alert-text strong    { color: #1e293b; display: block; margin-bottom: 1px; }

/* Grid nombre / apellido */
.asr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.asr-field { margin-bottom: 18px; }
.asr-label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.asr-label .req { color: var(--gw-danger); margin-left: 2px; }

/* Input base */
.asr-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-family: var(--gw-font);
    font-size: 14px; color: #1e293b;
    background: #fff;
    transition: var(--gw-transition);
    outline: none;
}
.asr-input:focus {
    border-color: var(--gw-primary);
    box-shadow: 0 0 0 3px rgba(59,55,232,.08);
}
.asr-input.is-invalid { border-color: var(--gw-danger); }
.asr-input::placeholder { color: #9ca3af; font-weight: 400; }
textarea.asr-input { resize: vertical; min-height: 110px; }

/* Hint / contador de caracteres */
.asr-field-hint {
    font-size: 11.5px; color: #9ca3af;
    margin-top: 5px;
    display: flex; justify-content: space-between;
}
.asr-field-hint.ok  { color: var(--gw-accent); }
.asr-field-hint.err { color: var(--gw-danger); }

/* Zona de subida de archivo */
.asr-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 20px;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--gw-transition);
    background: #fff;
    text-align: center;
}
.asr-file-label:hover {
    border-color: var(--gw-primary);
    background: rgba(59,55,232,.03);
}
.asr-file-label i      { font-size: 28px; color: var(--gw-primary); }
.asr-file-label strong { font-size: 13.5px; font-weight: 700; color: #1e293b; }
.asr-file-label small  { font-size: 11.5px; color: #9ca3af; }

.asr-file-selected {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(59,55,232,.05);
    border: 1px solid rgba(59,55,232,.15);
    border-radius: 8px;
    margin-top: 10px;
}
.asr-file-selected.show { display: flex; }
.asr-file-selected i    { color: var(--gw-primary); font-size: 20px; }
.asr-file-info          { flex: 1; }
.asr-file-info strong   { display: block; font-size: 13px; color: #1e293b; }
.asr-file-info small    { font-size: 11.5px; color: #64748b; }
.asr-remove-file {
    background: none; border: none; cursor: pointer;
    color: var(--gw-danger); font-size: 14px;
    padding: 4px 8px; border-radius: 5px;
    transition: var(--gw-transition);
}
.asr-remove-file:hover { background: var(--gw-danger-bg); }

/* Botón de envío */
.asr-btn-primary {
    width: 100%;
    padding: 14px;
    background: var(--gw-primary);
    border: none;
    border-radius: 9px;
    color: #fff;
    font-family: var(--gw-font);
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: var(--gw-transition);
    margin-bottom: 20px;
}
.asr-btn-primary:hover:not(:disabled) {
    background: var(--gw-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--gw-shadow-md);
}
.asr-btn-primary:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.asr-btn-primary .btn-spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gw-spin 1s linear infinite;
    display: none;
}
.asr-btn-primary.loading .btn-spinner { display: block; }
.asr-btn-primary.loading .btn-text   { display: none; }

/* Separador */
.asr-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 4px 0 20px;
    color: #94a3b8; font-size: 12.5px; font-weight: 600;
}
.asr-divider::before,
.asr-divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }

/* Botones sociales */
.asr-socials { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.asr-social-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
    font-family: var(--gw-font);
    font-size: 14px; font-weight: 600; color: #374151;
    cursor: pointer; text-decoration: none;
    transition: var(--gw-transition);
}
.asr-social-btn:hover {
    border-color: #cbd5e1; background: #f8fafc;
    transform: translateY(-1px); color: #1e293b;
    text-decoration: none;
}
.asr-social-btn i { font-size: 17px; }
.asr-social-btn .social-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(0,0,0,.15);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: gw-spin 1s linear infinite;
    display: none;
}
.asr-social-btn.loading .social-spinner { display: block; }
.asr-social-btn.loading .social-text   { display: none; }
.asr-social-btn.loading { pointer-events: none; opacity: .8; }

/* Link de login */
.asr-login-link { text-align: center; font-size: 13.5px; color: #64748b; }
.asr-login-link a { color: var(--gw-primary); font-weight: 700; text-decoration: none; }
.asr-login-link a:hover { text-decoration: underline; }

/* Botón volver */
.asr-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: #64748b;
    text-decoration: none; margin-bottom: 28px;
    padding: 6px 10px; border-radius: 7px;
    transition: var(--gw-transition);
}
.asr-back:hover { background: #f1f5f9; color: #1e293b; text-decoration: none; }

/* Toasts */
.asr-toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 9999; }
.asr-toast {
    min-width: 280px; background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,.12);
    padding: 14px 16px; margin-bottom: 10px;
    border-left: 4px solid transparent;
    transform: translateX(110%); transition: transform .25s;
}
.asr-toast.show    { transform: translateX(0); }
.asr-toast.t-success { border-color: var(--gw-accent); }
.asr-toast.t-error   { border-color: var(--gw-danger); }
.asr-toast.t-info    { border-color: var(--gw-primary); }
.asr-toast-msg { font-size: 13.5px; color: #374151; font-family: var(--gw-font); }

/* Responsive ASR */
@media (max-width: 900px) {
    .asr-wrap { grid-template-columns: 1fr; }
    .asr-left { position: relative; height: auto; padding: 32px 24px 28px; }
    .asr-steps { display: none; }
    .asr-trust { margin-top: 20px; padding-top: 0; }
    .asr-right { padding: 32px 20px; }
}
@media (max-width: 540px) {
    .asr-row { grid-template-columns: 1fr; gap: 0; }
}

/* ================================================================
   FIX DROPDOWN SUB-HEADER
================================================================ */
.sub-header,
.sub-header .navbar,
.sub-header .container,
.sub-header .row,
.sub-header .col-lg-12,
.sub-header .navbar-collapse {
    overflow: visible !important;
}

@media (min-width: 992px) {
    .sub-header .navbar-nav .pages152 {
        position: relative !important;
    }
    .sub-header .navbar-nav .pages152 .dropdown-menu,
    .sub-header .navbar-nav .pages152 .pages-dropdown {
        display:    none !important;
        position:   fixed !important;
        z-index:    99999 !important;
        min-width:  210px !important;
        float:      none !important;
        margin-top: 0 !important;
    }
    .sub-header .navbar-nav .pages152.gw-open > .dropdown-menu,
    .sub-header .navbar-nav .pages152.gw-open > .pages-dropdown {
        display: block !important;
    }
}

/* ── El navbar-collapse nunca debe hacer scroll ───────────────── */
.sub-header .navbar-collapse {
    overflow: visible !important;
    max-height: none !important;
}

.container {
    max-width:     1400px !important;
    padding-left:  20px   !important;
    padding-right: 20px   !important;
}