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

/* ═══════════════════════════════════════════════════════════════════════
   ESCUDO CSS — Especificidad alta vence a temas/plugins SIN !important.
   El CSS carga con priority=9999 (último), lo que además gana por cascade.

   Regla de especificidad usada:
   ▸ Tema:           button            → (0,0,1) =   1
   ▸ Este escudo:    #qhubo-banner button → (1,0,1) = 101  ← gana al tema
   ▸ Reglas propias: #qhubo-banner .clase → (1,1,0) = 110  ← ganan al escudo
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. box-sizing y tipografía base */
#qhubo-banner *,
#qhubo-banner-profile * {
    box-sizing: border-box;
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
    word-spacing: normal;
    text-shadow: none;
    text-indent: 0;
    -webkit-font-smoothing: antialiased;
}

/* 2. Botones — neutraliza Hello Elementor (border:#c36), Divi, Avada, etc.
      Especificidad (1,0,1) > selector de tema (0,0,1) o (0,1,0)          */
#qhubo-banner button,
#qhubo-banner [type="button"],
#qhubo-banner [type="submit"],
#qhubo-banner-profile button,
#qhubo-banner-profile [type="button"],
#qhubo-banner-profile [type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

/* 3. Links */
#qhubo-banner a,
#qhubo-banner-profile a {
    text-decoration: none;
    color: inherit;
    box-shadow: none;
    outline: none;
    background: transparent;
}

/* 4. Inputs y selects */
#qhubo-banner input,
#qhubo-banner select,
#qhubo-banner-profile input,
#qhubo-banner-profile select {
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    outline: none;
}

/* ─── Banner registro ─── */
#qhubo-banner {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: #FFE800 !important;
    border-top: 3.333px solid #000000 !important;
    padding: 27.33px 69.674px 23.997px 69.661px;
    z-index: 9000 !important;
    box-sizing: border-box; overflow: hidden;
    font-family: 'Open Sans', sans-serif !important;
    display: flex; flex-direction: column; align-items: flex-start;
    box-shadow: 0px 25px 25px rgba(0,0,0,0.25) !important;
}

.qhubo-banner__title {
    margin: 0;
    font-family: 'Open Sans', sans-serif !important; font-weight: 700 !important;
    font-size: 24px !important; line-height: 30px !important; color: #000000 !important;
}

.qhubo-banner__subtitle {
    margin: 0; margin-top: 12px;
    font-family: 'Open Sans', sans-serif !important; font-weight: 400 !important;
    font-size: 16px !important; line-height: 26px !important; color: #101828 !important;
}

.qhubo-banner__actions {
    display: flex; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 18px; margin-top: 24px;
    width: 100%; max-width: 100%;
}

#qhubo-banner .qhubo-banner__btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 9px; height: 41px;
    border-radius: 10px !important; cursor: pointer;
    text-decoration: none !important; white-space: nowrap !important;
    box-sizing: border-box; transition: opacity .15s;
}
#qhubo-banner .qhubo-banner__btn:hover { opacity: .85; }

#qhubo-banner .qhubo-banner__btn--google {
    font-family: 'Open Sans', sans-serif !important; font-weight: 600 !important;
    font-size: 14px !important; line-height: 24px !important;
    font-variation-settings: 'wdth' 100 !important;
    background: #FFFFFF !important; color: #000000 !important;
    border: 1px solid #000000 !important;
    padding: 3px 30px;
}

#qhubo-banner .qhubo-banner__btn--facebook {
    font-family: 'Open Sans', sans-serif !important; font-weight: 600 !important;
    font-size: 14px !important; line-height: 24px !important;
    font-variation-settings: 'wdth' 100 !important;
    background: #FFFFFF !important; color: #000000 !important;
    border: 1px solid #000000 !important;
    padding: 3px 30px;
}

#qhubo-banner .qhubo-banner__btn--email {
    font-family: 'Inter', sans-serif !important; font-weight: 700 !important;
    font-size: 16px !important; line-height: 24px !important;
    background: #009DE0 !important; color: #FFFFFF !important;
    border: 1.667px solid #007BAF !important;
    padding: 13px 25px;
}

.qhubo-banner__google-icon { width: 20px; height: 20px; flex-shrink: 0; }

#qhubo-banner .qhubo-banner__link {
    font-family: 'Open Sans', sans-serif !important; font-weight: 600 !important;
    font-size: 16px !important; line-height: 24px !important;
    font-variation-settings: 'wdth' 100 !important;
    color: #000000 !important; text-decoration: underline !important; cursor: pointer;
}
#qhubo-banner .qhubo-banner__link:hover { opacity: .75; }

.qhubo-banner__footer {
    margin: 0; margin-top: 16px;
    font-family: 'Open Sans', sans-serif !important; font-weight: 400 !important;
    font-size: 14px !important; line-height: 22.75px !important; color: #101828 !important;
}

/* ─── Banner perfil ─── */
#qhubo-banner-profile {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: #FFF9B8 !important; z-index: 9000 !important; box-sizing: border-box; overflow: hidden;
    border-top: 1.667px solid #EEEEEE !important;
    padding: 21.667px 69.674px 20px 69.661px;
    box-shadow: 0px 25px 25px rgba(0,0,0,0.25) !important;
    font-family: 'Inter', sans-serif !important;
}

.qhubo-profile-banner__wrap { width: 100%; }

.qhubo-profile-banner__body {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
    width: 100%;
}

.qhubo-profile-banner__content {
    display: flex; flex-direction: column; align-items: flex-start;
    width: 100%;
}

.qhubo-profile-banner__title {
    margin: 0; font-family: 'Inter', sans-serif !important; font-weight: 900 !important;
    font-size: 20px !important; line-height: 25px !important; color: #222221 !important;
}

.qhubo-profile-banner__subtitle {
    margin: 0; margin-top: 12px;
    font-family: 'Inter', sans-serif !important; font-weight: 400 !important;
    font-size: 16px !important; line-height: 26px !important; color: #4A4A4A !important;
}

.qhubo-profile-banner__btn {
    display: inline-flex; align-items: center; justify-content: center;
    max-width: 335px; width: 100%; height: 41px; padding: 12px; gap: 10px;
    margin-top: 21px; border-radius: 4px !important;
    font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important;
    cursor: pointer; text-decoration: none !important; white-space: nowrap; box-sizing: border-box;
}

#qhubo-banner-profile .qhubo-profile-banner__btn,
#qhubo-banner-profile .qhubo-profile-banner__btn:focus,
#qhubo-banner-profile .qhubo-profile-banner__btn:active {
    background: #009DE0 !important;
    color: #FFFFFF !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

#qhubo-banner-profile .qhubo-profile-banner__btn:hover {
    background: #007BAF !important;
}

.qhubo-profile-banner__footer {
    margin: 0; margin-top: 23px;
    font-family: 'Inter', sans-serif !important; font-weight: 400 !important;
    font-size: 14px !important; line-height: 22.75px !important; color: #4A4A4A !important;
}

.qhubo-profile-banner__actions {
    position: absolute; top: 0; right: 0;
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}

.qhubo-profile-banner__collapsed .qhubo-profile-banner__actions {
    position: static;
    flex-shrink: 0;
}

.qhubo-profile-banner__icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; background: transparent;
    border: none; cursor: pointer; border-radius: 4px; padding: 0; flex-shrink: 0;
}
.qhubo-profile-banner__icon-btn:hover { background: rgba(0,0,0,.08); }

#qhubo-banner-profile .qhubo-profile-banner__icon-btn,
#qhubo-banner-profile .qhubo-profile-banner__icon-btn:focus,
#qhubo-banner-profile .qhubo-profile-banner__icon-btn:active {
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

.qhubo-profile-banner__collapsed {
    display: flex; align-items: center;
    justify-content: space-between; padding: 10px 70px; gap: 16px;
}

@media (max-width: 768px) {
    #qhubo-banner {
        padding: 14px 16px max(16px, env(safe-area-inset-bottom, 0px));
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        scrollbar-width: none;
    }
    #qhubo-banner::-webkit-scrollbar { display: none; }
    .qhubo-banner__title { font-size: 18px; line-height: 24px; }
    .qhubo-banner__subtitle { font-size: 14px; line-height: 20px; margin-top: 8px; }
    .qhubo-banner__actions { margin-top: 16px; gap: 12px; }
    .qhubo-banner__btn { height: 41px; width: 100% !important; }
    .qhubo-banner__btn--google, .qhubo-banner__btn--facebook, .qhubo-banner__btn--email { padding: 3px 16px; font-size: 14px; }
    .qhubo-banner__link { font-size: 14px; }
    .qhubo-banner__footer { margin-top: 12px; }
    #qhubo-banner-profile { padding: 14px 16px max(16px, env(safe-area-inset-bottom, 0px)); }
    .qhubo-profile-banner__subtitle { display: none; }
    .qhubo-profile-banner__btn { margin-top: 12px; }
    .qhubo-profile-banner__footer { margin-top: 12px; }
}

@media (max-width: 420px) {
    #qhubo-banner {
        padding: 10px 14px max(12px, env(safe-area-inset-bottom, 0px));
    }
    .qhubo-banner__title { font-size: 16px !important; line-height: 21px !important; }
    .qhubo-banner__subtitle { font-size: 13px !important; line-height: 18px !important; margin-top: 5px; }
    .qhubo-banner__actions { margin-top: 10px !important; gap: 8px !important; }
    #qhubo-banner .qhubo-banner__btn { height: 38px !important; }
    .qhubo-banner__footer { margin-top: 8px; font-size: 12px !important; line-height: 17px !important; }
    #qhubo-banner-profile { padding: 10px 14px max(12px, env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 374px) {
    #qhubo-banner { padding: 8px 12px max(10px, env(safe-area-inset-bottom, 0px)); }
    #qhubo-banner-profile { padding: 8px 12px max(10px, env(safe-area-inset-bottom, 0px)); }
    .qhubo-banner__title { font-size: 15px !important; line-height: 20px !important; }
    .qhubo-banner__btn--google, .qhubo-banner__btn--facebook, .qhubo-banner__btn--email { font-size: 13px; }
}

/* ── Foco visible (accesibilidad teclado) ── */
#qhubo-banner .qhubo-banner__btn:focus-visible,
#qhubo-banner-profile .qhubo-profile-banner__btn:focus-visible,
#qhubo-banner-profile .qhubo-profile-banner__icon-btn:focus-visible {
    outline: 3px solid #009DE0 !important;
    outline-offset: 2px !important;
}