/* ============================================================================
   SBLTT Public CSS — v3.5.0
   Soporte API Key + Mobile-first redesign
   ============================================================================ */

:root {
    --sbltt-gold:    #d4a032;
    --sbltt-gold-dk: #b88820;
    --sbltt-dark:    #0d0d0d;
    --sbltt-card:    #1a1a1a;
    --sbltt-border:  #2e2e2e;
    --sbltt-green:   #22c55e;
    --sbltt-red:     #ef4444;
    --sbltt-blue:    #60a5fa;
    --sbltt-text:    #e0e0e0;
    --sbltt-radius:  10px;
    --sbltt-gap:     .75rem;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.sbltt-wallet-wrap {
    font-family: inherit;
    color: #333;
    max-width: 100%;
    box-sizing: border-box;
}
.sbltt-wallet-wrap * { box-sizing: border-box; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.sbltt-wallet-header-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--sbltt-gold);
    flex-wrap: wrap;
}
.sbltt-logo-sm { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.sbltt-header-text h2 { margin: 0 0 .15rem; font-size: 1.1rem; }
.sbltt-explorer-tag a { color: var(--sbltt-gold); font-size: .8rem; text-decoration: none; }
.sbltt-explorer-tag a:hover { text-decoration: underline; }

/* ── Botones base ─────────────────────────────────────────────────────────── */
.sbltt-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
    white-space: nowrap;
    background: #fff;
    color: #333;
}
.sbltt-btn-gold {
    background: var(--sbltt-gold) !important;
    color: #000 !important;
    border-color: var(--sbltt-gold) !important;
}
.sbltt-btn-gold:hover { background: var(--sbltt-gold-dk) !important; }

.sbltt-btn-outline {
    background: transparent !important;
    color: var(--sbltt-gold) !important;
    border-color: var(--sbltt-gold) !important;
}
.sbltt-btn-outline:hover { background: rgba(212,160,50,.08) !important; }

.sbltt-btn-danger {
    background: #fff !important;
    color: var(--sbltt-red) !important;
    border-color: var(--sbltt-red) !important;
}
.sbltt-btn-danger:hover { background: #fef2f2 !important; }

.sbltt-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

/* ── Inputs y formulario ──────────────────────────────────────────────────── */
.sbltt-form-grid {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 1rem 0;
}
.sbltt-form-row {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.sbltt-form-row label {
    font-size: .85rem;
    font-weight: 600;
    color: #555;
}
.sbltt-label-hint {
    font-size: .78rem;
    font-weight: 400;
    color: #999;
    margin-left: .3rem;
}
.sbltt-input {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: .9rem;
    background: #fff;
    transition: border-color .2s;
    color: #333;
}
.sbltt-input:focus { border-color: var(--sbltt-gold); outline: none; box-shadow: 0 0 0 2px rgba(212,160,50,.15); }
.sbltt-input-mono { font-family: monospace; font-size: .85rem; }

.sbltt-divider-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #aaa;
    font-size: .78rem;
    text-align: center;
}
.sbltt-divider-row::before,
.sbltt-divider-row::after { content: ''; flex: 1; height: 1px; background: #e5e5e5; }

/* ── Balance Card ─────────────────────────────────────────────────────────── */
.sbltt-balance-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #1a1a0a, #0d0d0d);
    border: 1px solid var(--sbltt-gold);
    border-radius: var(--sbltt-radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: .9rem;
    color: #fff;
    position: relative;
}
.sbltt-balance-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.sbltt-balance-info { flex: 1; min-width: 0; }
.sbltt-balance-label { font-size: .75rem; color: #999; text-transform: uppercase; letter-spacing: 1px; }
.sbltt-balance-amount {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sbltt-gold);
    line-height: 1.2;
    word-break: break-all;
}
.sbltt-balance-amount span { font-size: .95rem; }
.sbltt-balance-equiv { font-size: .8rem; color: #aaa; margin-top: .25rem; }

.sbltt-refresh-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid #444;
    color: #999;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 1rem;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sbltt-refresh-btn:hover { border-color: var(--sbltt-gold); color: var(--sbltt-gold); }
.sbltt-spin { animation: sbltt-rotate .6s linear infinite; }
.sbltt-spin-inline { display: inline-block; animation: sbltt-rotate .6s linear infinite; }
@keyframes sbltt-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Wallet Meta ──────────────────────────────────────────────────────────── */
.sbltt-wallet-meta {
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: var(--sbltt-radius);
    padding: .9rem 1.1rem;
    margin-bottom: .9rem;
}
.sbltt-meta-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
    flex-wrap: wrap;
}
.sbltt-meta-row:last-child { margin-bottom: 0; }
.sbltt-meta-label { color: #888; font-size: .82rem; flex-shrink: 0; }
.sbltt-address {
    font-size: .75rem;
    color: #444;
    word-break: break-all;
    background: #f0f0f0;
    padding: .1rem .4rem;
    border-radius: 4px;
    flex: 1;
    min-width: 0;
}
.sbltt-explorer-link { color: var(--sbltt-gold); font-size: .8rem; text-decoration: none; flex-shrink: 0; }
.sbltt-explorer-link:hover { text-decoration: underline; }

/* Badges de estado del token */
.sbltt-badge-apikey {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #86efac;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .55rem;
}
.sbltt-badge-session {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    border-radius: 20px;
    font-size: .72rem;
    padding: .1rem .5rem;
}

/* ── Tasas ────────────────────────────────────────────────────────────────── */
.sbltt-rates-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.sbltt-rate-card {
    flex: 1;
    min-width: 90px;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: .7rem .8rem;
    text-align: center;
}
.sbltt-rate-label { font-size: .72rem; color: #888; margin-bottom: .2rem; }
.sbltt-rate-value { font-size: .95rem; font-weight: 700; color: #222; }
.sbltt-rate-sub { font-size: .68rem; color: #aaa; margin-top: .15rem; }

/* ── Panel API Key (nuevo v3.5.0) ─────────────────────────────────────────── */
.sbltt-apikey-panel {
    border: 1px solid #e5e5e5;
    border-radius: var(--sbltt-radius);
    margin-bottom: .9rem;
    overflow: hidden;
}
.sbltt-apikey-toggle {
    width: 100%;
    text-align: left;
    padding: .8rem 1rem;
    background: #fafafa;
    border: none;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: #444;
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: background .2s;
}
.sbltt-apikey-toggle:hover { background: #f0f0f0; }
.sbltt-toggle-arrow { margin-left: auto; font-size: .75rem; color: #999; }
.sbltt-apikey-body {
    padding: 1rem;
    border-top: 1px solid #eee;
    background: #fff;
}
.sbltt-apikey-desc { font-size: .83rem; color: #666; margin: 0 0 .7rem; }
.sbltt-apikey-input-row {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}
.sbltt-apikey-input-row .sbltt-input { flex: 1; min-width: 0; }
.sbltt-apikey-where { font-size: .78rem; color: #999; margin: .6rem 0 0; }
.sbltt-apikey-where a { color: var(--sbltt-gold); }

/* ── Panel Renovar Sesión ─────────────────────────────────────────────────── */
.sbltt-renew-box {
    background: #fffdf0;
    border: 2px solid #f59e0b;
    border-radius: var(--sbltt-radius);
    padding: 1rem 1.1rem;
    margin: .8rem 0;
}
.sbltt-renew-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
    font-weight: 700;
    color: #92400e;
    font-size: .9rem;
}
.sbltt-renew-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: .9rem;
    padding: .1rem .3rem;
    border-radius: 4px;
}
.sbltt-renew-close:hover { background: #fef3c7; color: #555; }
.sbltt-renew-desc { font-size: .82rem; color: #78350f; margin-bottom: .7rem; }

/* ── Link Box ─────────────────────────────────────────────────────────────── */
.sbltt-link-box {
    background: #fffdf5;
    border: 1px solid var(--sbltt-gold);
    border-radius: var(--sbltt-radius);
    padding: 1.3rem 1.2rem;
    margin-bottom: 1rem;
}
.sbltt-link-box h3 { margin: 0 0 .5rem; font-size: 1rem; }
.sbltt-link-box p { font-size: .85rem; color: #666; margin-bottom: 0; }

/* ── Acciones ─────────────────────────────────────────────────────────────── */
.sbltt-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
    align-items: center;
}

/* ── Mensajes ─────────────────────────────────────────────────────────────── */
.sbltt-msg { padding: .7rem .9rem; border-radius: 6px; margin: .6rem 0; font-size: .875rem; }
.sbltt-msg-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.sbltt-msg-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

/* ── Historial de transacciones ───────────────────────────────────────────── */
.sbltt-section-title h3 {
    font-size: .95rem;
    font-weight: 700;
    color: #444;
    margin: 1rem 0 .6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #eee;
}
.sbltt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sbltt-tx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    min-width: 520px;
}
.sbltt-tx-table th {
    background: #f5f5f5;
    padding: .5rem .7rem;
    text-align: left;
    font-size: .75rem;
    text-transform: uppercase;
    color: #888;
    white-space: nowrap;
}
.sbltt-tx-table td {
    padding: .55rem .7rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}
.sbltt-tx-table tr:last-child td { border-bottom: none; }
.sbltt-type-credit { color: #166534; font-weight: 700; }
.sbltt-type-debit  { color: #991b1b; font-weight: 700; }
.sbltt-txid { color: #bbb; font-size: .7rem; }
.sbltt-td-date { white-space: nowrap; color: #888; font-size: .78rem; }
.sbltt-empty { color: #aaa; font-style: italic; font-size: .875rem; padding: 1rem 0; }

/* ── Checkout Box ─────────────────────────────────────────────────────────── */
.sbltt-checkout-box {
    background: #fafafa; border: 1px solid #e0e0e0;
    border-radius: 8px; padding: 1rem; margin-top: .5rem;
}
.sbltt-ticker-mini {
    background: #0d0d0d; color: var(--sbltt-gold);
    border-radius: 6px; padding: .5rem .8rem;
    font-size: .78rem; margin-bottom: .8rem;
}
.sbltt-wallet-summary { margin-top: .5rem; }
.sbltt-wallet-user { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.sbltt-badge-user {
    background: #1a1a0a; color: var(--sbltt-gold);
    border-radius: 20px; padding: .2rem .8rem; font-size: .82rem; font-weight: 600;
}
.sbltt-balance-row, .sbltt-order-cost {
    padding: .5rem .8rem; border-radius: 6px; margin-bottom: .4rem; font-size: .875rem;
}
.sbltt-balance-row.sbltt-ok  { background: #f0fdf4; border: 1px solid #86efac; }
.sbltt-balance-row.sbltt-low { background: #fef2f2; border: 1px solid #fca5a5; }
.sbltt-order-cost { background: #eff6ff; border: 1px solid #93c5fd; }
.sbltt-tx-note { color: #888; font-size: .78rem; margin: .3rem 0 0; }
.sbltt-error { color: #991b1b; background: #fef2f2; border-radius: 6px; padding: .5rem .8rem; font-size: .875rem; }
.sbltt-not-linked { text-align: center; padding: 1rem; }
.sbltt-hint { color: #888; font-size: .78rem; margin-top: .4rem; }

/* ── Product Badge ────────────────────────────────────────────────────────── */
.sbltt-badge {
    display: inline-block; background: var(--sbltt-gold);
    color: #000; font-size: .72rem; font-weight: 700;
    padding: .12rem .45rem; border-radius: 20px;
    margin-left: .35rem; vertical-align: middle;
}
.sbltt-product-price {
    background: #fffdf5; border: 1px solid var(--sbltt-gold);
    border-radius: 6px; padding: .5rem .8rem;
    font-size: .875rem; margin: .5rem 0;
}

/* ── Cashback Banner ──────────────────────────────────────────────────────── */
.sbltt-cashback-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    background: linear-gradient(135deg, #1a0d00 0%, #0d0d0d 40%, #1a0800 100%);
    border: 2px solid var(--sbltt-gold);
    border-radius: var(--sbltt-radius);
    padding: .8rem 1rem;
    margin: .6rem 0 .8rem;
    overflow: hidden;
    box-shadow: 0 0 18px rgba(212,160,50,.2);
    animation: sbltt-cashback-pulse 3s ease-in-out infinite;
}
@keyframes sbltt-cashback-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(212,160,50,.18); }
    50%       { box-shadow: 0 0 26px rgba(212,160,50,.4); }
}
.sbltt-cashback-banner::before {
    content: '';
    position: absolute; top: -50%; left: -60%;
    width: 60%; height: 200%;
    background: linear-gradient(105deg, transparent 40%, rgba(212,160,50,.07) 50%, transparent 60%);
    animation: sbltt-shine 4s linear infinite;
}
@keyframes sbltt-shine { 0% { left: -60%; } 100% { left: 160%; } }
.sbltt-cashback-icon { font-size: 1.75rem; line-height: 1; flex-shrink: 0; animation: sbltt-bounce 2s ease-in-out infinite; }
@keyframes sbltt-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.sbltt-cashback-text { flex: 1; display: flex; flex-direction: column; gap: .12rem; }
.sbltt-cashback-percent { font-size: 1.2rem; font-weight: 800; color: var(--sbltt-gold); letter-spacing: 1px; text-shadow: 0 0 10px rgba(212,160,50,.5); line-height: 1.1; }
.sbltt-cashback-sub { font-size: .75rem; color: #c8a060; line-height: 1.3; }
.sbltt-cashback-amount {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(212,160,50,.1); border: 1px solid rgba(212,160,50,.3);
    border-radius: 8px; padding: .35rem .6rem; text-align: center; flex-shrink: 0;
}
.sbltt-cashback-amount span { font-size: 1rem; font-weight: 700; color: var(--sbltt-gold); line-height: 1; }
.sbltt-cashback-amount small { font-size: .67rem; color: #a08040; margin-top: .1rem; }
.sbltt-cashback-row {
    padding: .45rem .8rem; border-radius: 6px; margin-bottom: .4rem; font-size: .875rem;
    background: linear-gradient(90deg, #0d1a0d, #0d0d0d); border: 1px solid #22c55e; color: #86efac;
}
.sbltt-cashback-row strong { color: #4ade80; }

/* ── Botón "Abrir Wallet" en checkout ────────────────────────────────────── */
.sbltt-open-wallet-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    background: transparent; border: 1px solid var(--sbltt-gold); color: var(--sbltt-gold) !important;
    border-radius: 20px; padding: .15rem .65rem; font-size: .75rem; font-weight: 600;
    text-decoration: none !important; transition: all .2s; cursor: pointer; margin-left: auto;
}
.sbltt-open-wallet-btn:hover { background: var(--sbltt-gold); color: #000 !important; }

.sbltt-balance-warn { display: block; margin-top: .2rem; font-size: .75rem; color: #f97316; }
.sbltt-balance-warn a { color: #f97316; text-decoration: underline; }
.sbltt-not-linked-icon { font-size: 2.5rem; margin: 0 0 .3rem; }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — MÓVIL (≤ 600px)
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* Header */
    .sbltt-wallet-header-bar { gap: .6rem; margin-bottom: 1rem; }
    .sbltt-logo-sm { width: 36px; height: 36px; }
    .sbltt-header-text h2 { font-size: .95rem; }

    /* Balance card — stack vertical en móvil */
    .sbltt-balance-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        gap: .6rem;
    }
    .sbltt-balance-icon { font-size: 1.6rem; }
    .sbltt-balance-amount { font-size: 1.3rem; }
    .sbltt-balance-equiv { font-size: .72rem; line-height: 1.6; }
    .sbltt-refresh-btn {
        position: absolute;
        top: .8rem;
        right: .8rem;
        width: 30px;
        height: 30px;
        font-size: .85rem;
    }

    /* Wallet meta — dirección truncada */
    .sbltt-meta-address-row { align-items: flex-start; flex-direction: column; gap: .25rem; }
    .sbltt-address { font-size: .68rem; }

    /* Tasas — 3 columnas compactas */
    .sbltt-rates-row { gap: .4rem; }
    .sbltt-rate-card { min-width: 80px; padding: .55rem .5rem; }
    .sbltt-rate-label { font-size: .65rem; }
    .sbltt-rate-value { font-size: .82rem; }
    .sbltt-rate-sub { font-size: .6rem; }

    /* Formulario */
    .sbltt-form-grid { gap: .6rem; }
    .sbltt-input { font-size: .85rem; padding: .5rem .65rem; }

    /* API key input row — stack vertical en móvil pequeño */
    .sbltt-apikey-input-row { flex-direction: column; }
    .sbltt-apikey-input-row .sbltt-btn { width: 100%; justify-content: center; }

    /* Acciones — stack vertical */
    .sbltt-actions { flex-direction: column; }
    .sbltt-actions .sbltt-btn { width: 100%; justify-content: center; }
    .sbltt-btn-group { flex-direction: column; }
    .sbltt-btn-group .sbltt-btn { width: 100%; justify-content: center; }

    /* Tabla de transacciones — modo card en móvil */
    .sbltt-tx-table { min-width: unset; }
    .sbltt-tx-table thead { display: none; } /* ocultar encabezados */
    .sbltt-tx-table tbody tr {
        display: block;
        border: 1px solid #eee;
        border-radius: 8px;
        margin-bottom: .6rem;
        padding: .6rem .8rem;
        background: #fff;
    }
    .sbltt-tx-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border-bottom: 1px solid #f8f8f8;
        padding: .3rem 0;
        font-size: .82rem;
    }
    .sbltt-tx-table td:last-child { border-bottom: none; }
    .sbltt-tx-table td::before {
        content: attr(data-label);
        font-size: .72rem;
        color: #aaa;
        font-weight: 600;
        text-transform: uppercase;
        margin-right: .5rem;
        flex-shrink: 0;
    }
    .sbltt-td-date { font-size: .72rem; color: #aaa; }

    /* Renew panel */
    .sbltt-renew-box { padding: .8rem; }

    /* Link box */
    .sbltt-link-box { padding: 1rem; }
    .sbltt-link-box h3 { font-size: .95rem; }

    /* Cashback banner */
    .sbltt-cashback-banner { flex-wrap: wrap; gap: .5rem; padding: .7rem .8rem; }
    .sbltt-cashback-amount { width: 100%; flex-direction: row; gap: .5rem; justify-content: center; }
}

/* Pantallas medianas (601px – 768px) */
@media (min-width: 601px) and (max-width: 768px) {
    .sbltt-balance-amount { font-size: 1.5rem; }
    .sbltt-actions { flex-wrap: wrap; }
    .sbltt-rate-card { min-width: 100px; }
    .sbltt-apikey-input-row { flex-wrap: wrap; }
}