/* ======================================================
    Betheme Translator ES/EN  —  v2.0
    ====================================================== */
    :root {
        --bt-bg      : #111827;
        --bt-hover   : #1f2937;
        --bt-accent  : #f97316;
        --bt-white   : #ffffff;
        --bt-radius  : 40px;
        --bt-h       : 52px;
        --bt-shadow  : 0 10px 36px rgba(0,0,0,0.30);
        --bt-speed   : 0.28s;
        --bt-z       : 9999999;
    }

    /* ── Botón como item del nav ────────────────────── */
    .btrans-nav-li {
        display        : inline-flex !important;
        align-items    : center;
        margin-left    : 8px;
        vertical-align : middle;
        list-style     : none;
    }



    #btrans-float-btn {
        display       : flex;
        align-items   : center;
        gap           : 4px;
        height        : 28px;
        padding       : 0 8px;
        background    : transparent;
        color         : var(--bt-white);
        border        : 1px solid rgba(255,255,255,0.35);
        border-radius : var(--bt-radius);
        cursor        : pointer;
        font-family   : system-ui, -apple-system, sans-serif;
        font-size     : 12px;
        font-weight   : 700;
        letter-spacing: 0.06em;
        outline       : none;
        user-select   : none;
        transition    : background var(--bt-speed) ease,
                        border-color var(--bt-speed) ease;
    }

    #btrans-float-btn:hover {
        background   : rgba(255,255,255,0.12);
        border-color : rgba(255,255,255,0.7);
    }

    #btrans-float-btn:active {
        background : rgba(255,255,255,0.2);
    }

    /* estado "traduciendo" */
    #btrans-float-btn.btrans-translating {
        pointer-events: none;
        opacity: 0.6;
    }

    /* ── Banderas ─────────────────────────────────────── */
    .btrans-ico {
        font-size   : 22px;
        line-height : 1;
        transition  : opacity var(--bt-speed), transform var(--bt-speed);
    }
    /* ES activo -> mostrar bandera US (para cambiar a ingles) */
    .btrans-es .btrans-ico-en { opacity:1; transform:scale(1); }
    .btrans-es .btrans-ico-es { opacity:0; transform:scale(.5); width:0; overflow:hidden; }
    /* EN activo -> mostrar bandera MX (para cambiar a español) */
    .btrans-en .btrans-ico-es { opacity:1; transform:scale(1); }
    .btrans-en .btrans-ico-en { opacity:0; transform:scale(.5); width:0; overflow:hidden; }

    /* ── Etiquetas ────────────────────────────────────── */
    .btrans-lbl { display:flex; flex-direction:column; line-height:1.1; }

    .btrans-lbl-es,
    .btrans-lbl-en {
        font-size   : 13px;
        font-weight : 800;
        transition  : opacity var(--bt-speed), color var(--bt-speed);
    }

    /* Idioma activo en naranja */
    .btrans-es .btrans-lbl-es { color: var(--bt-accent); opacity:1; }
    .btrans-es .btrans-lbl-en { opacity:.35; font-size:11px; }

    .btrans-en .btrans-lbl-en { color: var(--bt-accent); opacity:1; }
    .btrans-en .btrans-lbl-es { opacity:.35; font-size:11px; }

    /* ── Flecha (oculta en nav) ───────────────────────── */
    .btrans-arrow { display: none; }

    /* ── Botón inline (shortcode) ────────────────────── */
    .btrans-inline-btn {
        display       : inline-flex;
        align-items   : center;
        gap           : 6px;
        padding       : 10px 20px;
        background    : var(--bt-bg);
        color         : var(--bt-white);
        border        : none;
        border-radius : 30px;
        font-size     : 14px;
        font-weight   : 600;
        cursor        : pointer;
        box-shadow    : var(--bt-shadow);
        transition    : all .3s ease;
    }
    .btrans-inline-btn:hover { background: var(--bt-accent); transform: translateY(-2px); }

    /* Mostrar/ocultar texto en shortcode */
    body:not(.btrans-page-en) .btrans-lbl-en,
    body.btrans-page-en       .btrans-lbl-es { /* controlado por JS */ }

    /* ── Ocultar todo rastro de la barra de Google ────── */
    .goog-te-banner-frame,
    #goog-gt-tt,
    .goog-te-balloon-frame,
    .skiptranslate > iframe  { display:none!important; }
    body { top:0!important; }
    .goog-te-gadget          { display:none!important; }

    /* ── Overlay de carga ──────────────────────────────── */
    #btrans-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(17, 24, 39, 0.85); /* Semi-transparente oscuro matching --bt-bg */
        z-index: 99999999;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        backdrop-filter: blur(3px);
    }

    #btrans-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .btrans-spinner {
        width: 50px;
        height: 50px;
        border: 4px solid rgba(255, 255, 255, 0.2);
        border-top-color: var(--bt-accent);
        border-radius: 50%;
        animation: btrans-spin 1s linear infinite;
    }

    @keyframes btrans-spin {
        to { transform: rotate(360deg); }
    }