/*
 * Pele Material Design 3 (Android) sobre o tema adminbs5 do Adianti.
 * Aqui ficam formas, tipografia, espaços e comportamento. As cores (papéis --md-*)
 * vêm de /assets/css/application.css.
 *
 * Formas M3: extra-small 4px · small 8px · medium 12px · large 16px · extra-large 28px · full 999px
 */
:root {
    --ad-menu-size: 300px;
    --md-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --md-shape-xs: 4px;
    --md-shape-sm: 8px;
    --md-shape-md: 12px;
    --md-shape-lg: 16px;
    --md-shape-xl: 28px;
    --md-motion: cubic-bezier(.2, 0, 0, 1);   /* emphasized */
}

html, body, .btn, .form-control, .ui-dialog, .ui-dialog-title, .card, .swal2-popup {
    font-family: var(--md-font) !important;
}
body {
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    letter-spacing: .01em;
}

/* ===== Top app bar ===================================================== */
.main > .navbar {
    height: 64px;
    border: 0 !important;
    box-shadow: none;
    padding: 0 4px !important;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.main > .navbar .navbar { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0; }

/* Logo da gaveta: assets/images/logo-mark.png + nome + Live em vermelho */
.bb-logo {
    display: inline-flex; align-items: center;
    text-decoration: none !important;
    font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 1;
    white-space: nowrap;
}
.bb-logo .bb-pin { height: 30px; width: auto; margin-right: 6px; filter: drop-shadow(0 1px 1px rgba(var(--bb-indigo-rgb), .35)); }
.bb-live {
    font-size: 13px; font-weight: 700; letter-spacing: .3px;
    border-radius: 999px; padding: 3px 9px; margin-left: 8px;
}

/* Logotipo de texto (imita a marca "buscabusca"): Nunito, minúsculas, juntas;
   1º "busca" em negrito, 2º em peso médio */
.bb-nome { font-family: 'Nunito', 'Varela Round', system-ui, sans-serif; font-size: 27px; line-height: 1; letter-spacing: -.6px; white-space: nowrap; }
.bb-nome-1 { font-weight: 800; }
.bb-nome-2 { font-weight: 500; }
.bb-logo .bb-live { font-family: var(--md-font); align-self: center; }
/* Logo na barra do topo */
.main > .navbar .bb-logo { font-size: 20px; font-weight: 500; letter-spacing: 0; margin-left: 4px; }

/* ===== Barra de navegação inferior (navigation bar, Material 3) ========
 * O menu (menu-public.xml) renderizado pelo AdiantiMenuBuilder como ul.sidebar-nav:
 * aqui ele vira 4 destinos com ícone em cima e rótulo embaixo, fixo na base da tela.
 */
.wrapper { display: block; }
.main { width: 100%; min-height: 100vh; }
/* O adminbs5 põe overflow:hidden no .main, o que anula o position:sticky da barra do topo.
   "clip" continua cortando o que transborda, mas não cria área de rolagem: o sticky funciona. */
.main { overflow: clip !important; }
.bb-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom);
}
.bb-bottomnav .sidebar-nav {
    display: flex; justify-content: center;
    max-width: 640px; height: 60px;
    margin: 0 auto; padding: 0;
    list-style: none;
}
.bb-bottomnav .sidebar-item { flex: 1 1 0; min-width: 0; }
.bb-bottomnav a.sidebar-link {
    position: relative;
    height: 100%; margin: 0; padding: 9px 4px 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
    border-radius: 0;
    font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 15px;
    text-align: center; text-decoration: none;
    white-space: nowrap; overflow: visible;
    transition: color .15s;
}
.bb-bottomnav a.sidebar-link::after { display: none !important; }   /* seta de submenu do tema */
.bb-bottomnav a.sidebar-link span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bb-bottomnav a.sidebar-link i {
    position: relative;
    width: auto; height: 26px; margin: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1;
}
/* Página atual: rótulo em negrito e traço na borda de cima (só links de página;
   as janelas usam generator="adianti" e não ficam "ativas") */
.bb-bottomnav a.sidebar-link.active:not([generator]) { font-weight: 700; }
.bb-bottomnav a.sidebar-link.active:not([generator])::before {
    content: ''; position: absolute; top: 0; left: 18%; right: 18%;
    height: 3px; border-radius: 0 0 3px 3px;
}
/* Selo com número (ex.: lives no ar), como o do carrinho */
.bb-bottomnav .bb-selo {
    position: absolute; top: -6px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    font-family: var(--md-font); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.bb-bottomnav .bb-selo[hidden] { display: none; }

/* ===== Conteúdo ======================================================== */
.footer { display: none !important; }
/* embaixo, espaço para o conteúdo não ficar atrás da barra de navegação */
main.content { padding: 16px 16px calc(60px + 24px + env(safe-area-inset-bottom)) !important; }
/* O adminbs5 zera só o recuo direito do container (style="padding-right:0"): margens simétricas */
main.content > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
#adianti_div_content > .container-fluid { padding: 0; }

/* Barra de busca (search bar M3): pílula de 56dp, lupa à esquerda, câmera dentro à direita */
form[name=form_busca] > div {
    align-items: center;
    gap: 0 !important;
    height: 56px;
    margin-bottom: 20px !important;
    padding: 0 4px 0 16px;
    border-radius: 999px;
    background: var(--bb-branco);
    transition: box-shadow .2s var(--md-motion);
}
form[name=form_busca] > div:focus-within { box-shadow: var(--bb-sombra-1); background: var(--bb-branco); }
form[name=form_busca] > div > div { display: block !important; }
form[name=form_busca] #q-container { position: relative; width: 100%; display: flex; align-items: center; }
form[name=form_busca] #q {
    width: 100%; height: 48px; min-height: 0;
    border: 0 !important; border-radius: 0 !important;
    background: transparent !important;
    padding: 0 8px 0 36px !important;
    font-size: 16px;
    box-shadow: none !important;
}
form[name=form_busca] .input-inner-icon {
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    margin: 0; font-size: 18px;
    color: var(--bb-secundaria);
}
form[name=form_busca] #tbutton_camBtn {
    width: 48px; height: 48px; min-height: 0; padding: 0;
    border-radius: 50% !important;
    background: transparent !important; border: 0 !important;
    color: var(--bb-vermelho) !important;
    box-shadow: none !important;
    font-size: 20px;
}
form[name=form_busca] #tbutton_camBtn:hover { background: var(--bb-hover) !important; }

/* Cards M3 (elevated/outlined) */
.card {
    border-radius: var(--md-shape-md) !important;
    border: 0;
    box-shadow: var(--bb-sombra-1);
    overflow: hidden;
}
.card > .card-header {
    background: transparent;
    border-bottom: 0;
    padding: 16px 16px 8px;
    font-size: 22px; font-weight: 400; line-height: 28px;   /* title-large */
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.card > .card-footer { background: transparent; border-top: 0; }

/* "Ao vivo agora": seção sem moldura, como as seções do app */
.card:has(#grid) { box-shadow: var(--bb-sombra-1); border: 1px solid var(--bb-azul-claro); overflow: visible; }
.card:has(#grid) > .card-header { padding: 14px 16px 10px; font-weight: 700; font-size: 20px; flex-wrap: nowrap; }
.card > .card-header > .card-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: inherit; font-weight: inherit; }
.card > .card-header > .header-actions {
    position: static !important; float: none !important;
    display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin: 0 !important;
}
.card:has(#grid) > .card-header .card-title i { font-size: 12px; vertical-align: middle; margin-right: 4px; }
.card:has(#grid) > .card-body { padding: 0 16px 16px; }
.card:has(#grid) > .card-body .alert { margin: 0; }
.card:has(#grid) > .card-header .badge {
    display: inline-flex; align-items: center; justify-content: center; margin: 0 !important;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; font-size: 11px; line-height: 20px; font-weight: 500;
}

/* Chips (assist chip) — botões pequenos em pílula */
.btn-sm.rounded-pill, .btn.rounded-pill.btn-sm {
    height: 32px; padding: 0 12px;
    border-radius: var(--md-shape-sm) !important;
    font-size: 14px; font-weight: 500;
    box-shadow: none !important;
}

/* Lista das lives: grade no computador, carrossel no celular */
#grid .card-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
/* Celular em pé: 2 cards por linha */
@media (max-width: 767.98px) and (orientation: portrait) {
    #grid .card-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .live-card > .card-item-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .live-card > .card-item-content { padding: 6px 6px 0 !important; }
    .live-card > .card-item-actions { padding: 2px 4px 6px !important; }
}
.live-card {
    display: flex; flex-direction: column;
    margin: 0 !important; width: auto !important;
    border: 1px solid var(--bb-azul-claro) !important;
    box-shadow: none !important;
    border-radius: var(--md-shape-md) !important;
    transition: box-shadow .2s var(--md-motion);
}
.live-card:hover { box-shadow: var(--bb-sombra-2) !important; }
.live-card > .card-item-content { order: 1; padding: 8px 8px 0 !important; }
.live-card > .card-item-title { order: 2; padding: 8px 12px 0 !important; font-size: 16px; font-weight: 500; }
.live-card > .card-item-actions { order: 3; padding: 4px 8px 8px !important; display: flex; gap: 4px; }
.live-card [data-media] { border-radius: var(--md-shape-sm); overflow: hidden; }
.live-card [data-media] .badge { border-radius: var(--md-shape-xs); font-weight: 500; font-size: 11px; letter-spacing: .5px; }
.live-card .card-item-content small { display: block; padding: 6px 4px 0; font-size: 12px; }
.card-item-actions > i {
    width: 40px; height: 40px; margin: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 16px;
}

/* Botões M3: pílula, 40dp, rótulo 14/500 sem caixa alta */
.btn {
    border-radius: 999px;
    min-height: 40px;
    padding: 0 24px;
    font-size: 14px; font-weight: 500; letter-spacing: .1px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-transform: none;
    transition: background-color .2s var(--md-motion), box-shadow .2s var(--md-motion);
}
.btn-primary, .btn-danger, .btn-success { box-shadow: none; }
.btn-primary:hover, .btn-danger:hover, .btn-success:hover { box-shadow: var(--bb-sombra-1); }
.btn.rounded-circle { padding: 0; width: 40px; height: 40px; border-radius: 50% !important; }

/* Campos M3 (filled text field) */
.form-control, .form-select, .tfield {
    min-height: 48px;
    border: 0 !important;
    border-bottom: 1px solid var(--bb-secundaria) !important;
    border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0 !important;
    box-shadow: none !important;
    font-size: 16px;
}
.form-control:focus, .form-select:focus, .tfield:focus {
    border-bottom-width: 2px !important;
    outline: 0;
}
textarea.form-control { padding-top: 12px; }

/* Abas M3 (primary tabs) */
.nav-tabs { border-bottom: 1px solid var(--bb-azul-claro); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link {
    border: 0 !important; border-radius: 0;
    height: 48px; padding: 0 16px; white-space: nowrap;
    font-size: 14px; font-weight: 500; letter-spacing: .1px;
    display: inline-flex; align-items: center;
}
.nav-tabs .nav-link.active {
    background: transparent !important;
    box-shadow: inset 0 -3px 0 var(--bb-primaria);
}

/* Avisos tonais */
.alert { border-radius: var(--md-shape-md); border: 0; }

/* ===== Diálogos (TWindow = jQuery UI) ================================== */
.ui-widget-overlay { background: var(--bb-veu) !important; opacity: 1 !important; }
.ui-dialog {
    border: 0 !important;
    border-radius: var(--md-shape-xl) !important;
    box-shadow: var(--bb-sombra-3) !important;
    padding: 8px 0 8px !important;
    max-width: calc(100vw - 32px);
    overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar {
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    padding: 16px 56px 8px 24px !important;
}
.ui-dialog .ui-dialog-title {
    font-size: 24px !important; font-weight: 400; line-height: 32px;   /* headline-small */
    height: auto !important; width: auto !important; float: none;
    color: var(--bb-indigo) !important;
}
.ui-dialog > .ui-dialog-titlebar > .ui-button,
.ui-dialog .ui-dialog-titlebar-close {
    width: 40px !important; height: 40px !important;
    top: 12px !important; right: 12px !important; margin: 0 !important;
    border: 0 !important; border-radius: 50% !important;
    background: transparent !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover { background: var(--bb-hover) !important; }
.ui-dialog .ui-dialog-content { padding: 0 8px !important; }
.ui-dialog .card { box-shadow: none; background: transparent; }
.ui-dialog .card > .card-body { padding: 8px 16px; }
.ui-dialog .card > .card-footer { display: flex; justify-content: flex-end; padding: 16px; }

/* Celular: janelas viram "bottom sheet" do Android */
@media (max-width: 575.98px) {
    .ui-dialog {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
        width: 100vw !important; max-width: 100vw;
        max-height: 90vh; overflow-y: auto;
        border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0 !important;
        padding-top: 22px !important;
        animation: md-sheet .3s var(--md-motion);
    }
    .ui-dialog::before {   /* alça do bottom sheet */
        content: '';
        position: absolute; top: 10px; left: 50%;
        width: 32px; height: 4px; margin-left: -16px;
        border-radius: 999px;
        background: var(--bb-azul-claro);
        opacity: .5;
    }
    .ui-dialog .ui-dialog-titlebar { padding-top: 8px !important; }
    .ui-dialog > .ui-dialog-titlebar > .ui-button,
    .ui-dialog .ui-dialog-titlebar-close { top: 4px !important; }
    .ui-dialog .card > .card-footer .btn { width: 100%; }
}
@keyframes md-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Diálogos de pergunta/mensagem (SweetAlert do Adianti) */
.swal2-popup { border-radius: var(--md-shape-xl) !important; padding: 24px !important; }
.swal2-title { font-size: 24px !important; font-weight: 400 !important; }
.swal2-actions .swal2-styled { border-radius: 999px !important; min-height: 40px; padding: 0 24px !important; font-weight: 500 !important; box-shadow: none !important; }
.swal2-input { border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0 !important; }

/* Snackbar (iziToast): base da tela, cantos pequenos */
.iziToast { border-radius: var(--md-shape-xs) !important; box-shadow: var(--bb-sombra-3) !important; min-height: 48px; }
.iziToast::after { display: none !important; }

/* ===== Players em tela cheia (vendedor e espectador) =====================
 * Fundo preto e data-bs-theme="dark": controles neutros = btn-secondary, sair = btn-outline-light,
 * perigo = btn-danger, enviar = btn-info. Contraste mínimo AA (4.5:1) em textos e ícones.
 */
#hostView, #clientView {
    /* Player: fundo do vídeo preto (exceção pedida à paleta: não compete com a imagem);
       barras na primária e controles na secundária */
    --pl-fundo: #000000;
    --pl-barra: var(--bb-primaria);
    --pl-campo: var(--bb-indigo);
    --pl-borda: var(--bb-secundaria);
    --pl-texto: var(--bb-branco);
    --pl-apoio: var(--bb-azul-claro);
    display: flex; flex-direction: column;
    background: var(--pl-fundo) !important;
}
#hostView video, #clientView video { background: var(--pl-fundo) !important; }
#hostView > .card-body, #clientView > .card-body { background: var(--pl-fundo) !important; }
/* véu de "Conectando…" sobre o vídeo: preto translúcido (bg-black bg-opacity-75) */
#hostView .bg-black, #clientView .bg-black { background-color: rgba(0, 0, 0, var(--bs-bg-opacity, 1)) !important; }
#hostView > .card-header.bg-black, #clientView > .card-header.bg-black { background-color: var(--pl-barra) !important; }
#hostView > .card-header, #clientView > .card-header,
#hostView > .card-header label:not(.badge), #clientView > .card-header label:not(.badge) { background-color: var(--pl-barra) !important; color: var(--pl-texto) !important; }
#hostView > .card-header label.text-white-50, #clientView > .card-header label.text-white-50 { color: var(--pl-apoio) !important; }
#hostView[hidden], #clientView[hidden] { display: none !important; }
#hostView.card, #clientView.card { border-radius: 0 !important; box-shadow: none !important; }

/* Cabeçalho */
#hostView > .card-header, #clientView > .card-header {
    padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top));
    font-size: 16px; font-weight: 400;
}
#hostView > .card-header > .card-title, #clientView > .card-header > .card-title,
#hostView > .card-header > .header-actions:empty, #clientView > .card-header > .header-actions:empty { display: none !important; }
#hostView > .card-header > .d-flex > div, #clientView > .card-header > .d-flex > div { display: block !important; }
#hostView > .card-header .flex-grow-1, #clientView > .card-header .flex-grow-1 { min-width: 0; }
#hostView .badge, #clientView .badge { border-radius: 6px; font-weight: 600; font-size: 12px; padding: 5px 8px; }

/* Rodapé: chat + controles, centralizado e com largura máxima */
#hostView > .card-footer, #clientView > .card-footer {
    background: var(--pl-barra) !important; border-top: 1px solid rgba(var(--bb-branco-rgb), .15);
    padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.bb-rodape { display: flex !important; flex-direction: column; gap: 10px; width: 100%; max-width: 960px; margin: 0 auto; }
.bb-rodape > div { clear: none !important; }
.bb-rodape > div:has(> [hidden]) { display: none; }

/* Linha do chat: [apelido] [campo] [enviar] */
.bb-chat { display: flex; align-items: center; gap: 8px; width: 100%; }
.bb-chat > div { display: block !important; flex: 0 0 auto; }
.bb-chat > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
#hostView .tfield, #clientView .tfield {
    width: 100%; height: 48px; min-height: 0;
    padding: 0 18px !important;
    border: 1px solid var(--pl-borda) !important;
    border-radius: 999px !important;
    background: var(--pl-campo) !important;
    color: var(--pl-texto) !important;
    font-size: 16px;   /* 16px evita o zoom automático do iOS */
    box-shadow: none !important;
}
#hostView .tfield::placeholder, #clientView .tfield::placeholder { color: var(--pl-apoio); opacity: 1; }
#hostView .tfield:focus, #clientView .tfield:focus {
    border-color: var(--bb-azul-claro) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--bb-azul-claro-rgb), .45) !important;
    outline: 0;
}

/* Controles: grade de colunas iguais */
.bb-controles:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.bb-controles > div { display: block !important; min-width: 0; }
#hostView .btn, #clientView .btn {
    width: 100%; height: 48px; min-height: 0; padding: 0 12px;
    border-radius: 999px;
    font-size: 15px; font-weight: 600; letter-spacing: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: none !important;
}
#hostView .btn span, #clientView .btn span { overflow: hidden; text-overflow: ellipsis; }
#hostView .btn.bb-icone, #clientView .btn.bb-icone { width: 48px; padding: 0; border-radius: 50%; font-size: 18px; flex: 0 0 auto; }
#hostView > .card-header .btn.bb-icone, #clientView > .card-header .btn.bb-icone { width: 40px; height: 40px; font-size: 16px; }

#hostView .btn-secondary, #clientView .btn-secondary {
    --bs-btn-color: var(--bb-branco); --bs-btn-bg: var(--bb-secundaria); --bs-btn-border-color: var(--bb-secundaria);
    --bs-btn-hover-color: var(--bb-branco); --bs-btn-hover-bg: var(--bb-indigo); --bs-btn-hover-border-color: var(--bb-azul-claro);
    --bs-btn-active-color: var(--bb-branco); --bs-btn-active-bg: var(--bb-indigo); --bs-btn-active-border-color: var(--bb-azul-claro);
    --bs-btn-focus-shadow-rgb: var(--bb-azul-claro-rgb);
}
#hostView .btn-outline-light, #clientView .btn-outline-light {
    --bs-btn-color: var(--bb-branco); --bs-btn-border-color: var(--bb-branco); --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--bb-primaria); --bs-btn-hover-bg: var(--bb-branco); --bs-btn-hover-border-color: var(--bb-branco);
    --bs-btn-active-color: var(--bb-primaria); --bs-btn-active-bg: var(--bb-destaque);
}
#hostView .btn-info, #clientView .btn-info {   /* enviar */
    --bs-btn-color: var(--bb-primaria); --bs-btn-bg: var(--bb-destaque); --bs-btn-border-color: var(--bb-destaque);
    --bs-btn-hover-color: var(--bb-primaria); --bs-btn-hover-bg: var(--bb-branco); --bs-btn-hover-border-color: var(--bb-branco);
    --bs-btn-active-color: var(--bb-primaria); --bs-btn-active-bg: var(--bb-azul-claro);
}
#hostView .btn-danger, #clientView .btn-danger {
    --bs-btn-color: var(--bb-branco); --bs-btn-bg: var(--bb-vermelho); --bs-btn-border-color: var(--bb-vermelho);
    --bs-btn-hover-bg: var(--bb-vermelho); --bs-btn-hover-border-color: var(--bb-branco);
    --bs-btn-active-bg: var(--bb-vermelho); --bs-btn-active-border-color: var(--bb-branco);
}

/* Celular: rótulos menores para caber nas 3 colunas */
@media (max-width: 575.98px) {
    #hostView .bb-controles .btn, #clientView .bb-controles .btn { font-size: 13px; padding: 0 6px; gap: 5px; }
}
/* Celular estreito: só ícones nos controles */
@media (max-width: 359.98px) {
    #hostView .bb-controles .btn, #clientView .bb-controles .btn { font-size: 0 !important; gap: 0 !important; }
    .bb-controles .btn i { font-size: 18px; }
}
/* Computador / tablet deitado: chat e controles na mesma linha */
@media (min-width: 992px) {
    .bb-rodape { flex-direction: row; align-items: center; gap: 16px; max-width: 1200px; }
    .bb-rodape > div:first-child { flex: 1 1 auto; min-width: 0; }
    .bb-rodape > div:last-child { flex: 0 0 420px; }
}
/* Celular deitado (pouca altura): rodapé compacto */
@media (max-height: 500px) and (orientation: landscape) {
    #hostView > .card-footer, #clientView > .card-footer { padding-top: 6px; padding-bottom: 6px; }
    .bb-rodape { flex-direction: row; align-items: center; gap: 8px; }
    .bb-rodape > div:first-child { flex: 1 1 auto; min-width: 0; }
    .bb-rodape > div:last-child { flex: 0 0 auto; }
    .bb-controles:not([hidden]) { grid-template-columns: repeat(3, 48px); }
    #hostView .bb-controles .btn, #clientView .bb-controles .btn { font-size: 0 !important; gap: 0 !important; padding: 0; border-radius: 50%; }
    .bb-controles .btn i { font-size: 18px; }
    #hostView .tfield, #clientView .tfield, #hostView .btn, #clientView .btn { height: 44px; }
    #hostView .btn.bb-icone, #clientView .btn.bb-icone { width: 44px; }
}

/* Alvos de toque de pelo menos 48dp no celular */
@media (pointer: coarse) {
    .btn { min-height: 48px; }
    .btn-sm.rounded-pill { min-height: 32px; }
    .btn.rounded-circle { min-height: 0; width: 48px; height: 48px; }
}

/* ===== Campos com ícone interno (TEntry::setInnerIcon) ==================
 * O Adianti posiciona o ícone em altura fixa; com campos de 48px ele subia.
 * Aqui o ícone fica centralizado na vertical em qualquer altura de campo.
 */
.inner-icon-container { position: relative; display: flex; align-items: center; width: 100%; }
.inner-icon-container > .input-inner-icon {
    position: absolute; top: 50%; transform: translateY(-50%);
    margin: 0 !important; line-height: 1; font-size: 16px; pointer-events: none;
}
.inner-icon-container > .input-inner-icon.left { left: 14px; }
.inner-icon-container > .input-inner-icon.right { right: 14px; }
.inner-icon-container > .input-inner-icon.left ~ input,
.inner-icon-container > input:has(~ .input-inner-icon.left) { padding-left: 42px !important; }
.inner-icon-container > input:has(~ .input-inner-icon.right) { padding-right: 42px !important; }
/* Busca do topo: lupa um pouco mais perto da borda da pílula */
form[name=form_busca] .inner-icon-container > .input-inner-icon.left { left: 4px; }
form[name=form_busca] .inner-icon-container > input { padding-left: 36px !important; }

/* ===== Card da live: a miniatura inteira abre a live ======================
 * A imagem é trocada ~15x/s (morph dos quadros): se ela recebesse o toque, o
 * elemento sumiria entre o "apertar" e o "soltar" e o navegador descartaria o
 * clique. Ela fica transparente ao toque e o clique cai no card (fixo).
 */
.live-card [data-media] img, .live-card [data-media] .badge { pointer-events: none; }
.live-card .card-item-content, .live-card .card-item-title { cursor: pointer; }
.live-card .card-item-content:active [data-media] { transform: scale(.985); transition: transform .1s; }

/* Cabeçalho do player: botão, título/subtítulo e selo centralizados na mesma linha */
#hostView > .card-header > .d-flex, #clientView > .card-header > .d-flex { align-items: center !important; min-height: 48px; }
#hostView > .card-header .flex-grow-1 > div, #clientView > .card-header .flex-grow-1 > div { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
#hostView > .card-header .flex-grow-1 > div > div, #clientView > .card-header .flex-grow-1 > div > div { clear: none !important; }
#hostTitle, #clientTitle { font-size: 16px; line-height: 20px; margin: 0; }
#hostSub, #clientSub { font-size: 13px; line-height: 18px; margin: 0; }

/* ===== Paisagem: o app emula um celular em pé ===========================
 * Na horizontal (computador, tablet ou celular deitado) o conteúdo fica numa
 * coluna de celular centralizada. As barras (topo e navegação inferior) ocupam a
 * largura toda, com recuo lateral até a coluna. Sem fundo diferente em volta.
 * No player: vídeo e barras na largura toda; o conteúdo das barras fica na coluna.
 * Só o "Tela cheia" do player ocupa a tela inteira sem coluna.
 */
:root { --bb-app-largura: 480px; }
@media (orientation: landscape) {
    /* recuo que leva o conteúdo até a coluna central (mínimo 16px) */
    .main { --bb-recuo: max(16px, calc((100% - var(--bb-app-largura)) / 2 + 16px)); }
    .main > .navbar { padding-left: var(--bb-recuo) !important; padding-right: var(--bb-recuo) !important; }
    main.content { padding-left: var(--bb-recuo) !important; padding-right: var(--bb-recuo) !important; }

    /* barra inferior: largura toda; os 4 destinos na largura da coluna */
    .bb-bottomnav .sidebar-nav { max-width: var(--bb-app-largura); }

    /* lista: 2 cards por linha, como no retrato */
    #grid .card-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .live-card > .card-item-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .live-card > .card-item-content { padding: 6px 6px 0 !important; }
    .live-card > .card-item-actions { padding: 2px 4px 6px !important; }

    /* /admin: rótulos em cima dos campos (como no celular) */
    #adianti_div_content .container { max-width: 100% !important; padding-left: 0; padding-right: 0; }
    #adianti_div_content .row > [class*="col-sm-"], #adianti_div_content .row > [class*="col-md-"], #adianti_div_content .row > [class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; text-align: left !important; }

    /* players (fora do "Tela cheia"): vídeo e barras na largura toda; conteúdo das barras na coluna */
    #hostView:not(:fullscreen), #clientView:not(:fullscreen) { --bb-recuo: max(12px, calc((100% - var(--bb-app-largura)) / 2 + 12px)); }
    #hostView:not(:fullscreen) > .card-header, #clientView:not(:fullscreen) > .card-header,
    #hostView:not(:fullscreen) > .card-footer, #clientView:not(:fullscreen) > .card-footer { padding-left: var(--bb-recuo) !important; padding-right: var(--bb-recuo) !important; }
    #hostView:not(:fullscreen) .bb-rodape, #clientView:not(:fullscreen) .bb-rodape { flex-direction: column; align-items: stretch; max-width: none; gap: 10px; }
    #hostView:not(:fullscreen) .bb-rodape > div, #clientView:not(:fullscreen) .bb-rodape > div { flex: none !important; }
    #hostView:not(:fullscreen) .bb-controles:not([hidden]), #clientView:not(:fullscreen) .bb-controles:not([hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #hostView:not(:fullscreen) .bb-controles .btn, #clientView:not(:fullscreen) .bb-controles .btn { font-size: 13px !important; gap: 5px !important; padding: 0 6px; border-radius: 999px; }

    /* janelas: largura de celular */
    .ui-dialog { max-width: calc(var(--bb-app-largura) - 32px) !important; }
}