/* =========================================================
   Armac Fotos & Vídeos — TEMA MODERNO (v22) · azul Armac
   Onde era branco agora é azul Armac. Texto claro, acentos em
   verde Armac. Entra só com <html data-tema="moderno">.

   Regra de segurança (não repetir o erro da v18):
   este arquivo NÃO altera overflow, height, position, display
   nem flex de card, coluna ou tabela. Só cor, borda, raio,
   sombra e peso de texto.
   ========================================================= */

html[data-tema="moderno"] {
    --azul-armac: #002A9A;
    --azul-fundo: #001A5E;      /* fundo da página */
    --azul-caixa: #06256E;      /* colunas, tabela, caixas */
    --azul-card: #0B3186;       /* cards e linhas */
    --azul-card-2: #0D3796;     /* linha alternada / hover */
    --azul-borda: #1E4AA8;
    --azul-claro: #A9C2FF;      /* texto secundário */
    --verde-armac: #00C853;
    --armac-navy: #002A9A;
    --armac-navy-2: #001A5E;
    --cinza-100: #0B3186;
    --cinza-200: #1E4AA8;
    --cinza-400: #A9C2FF;
    --cinza-700: #D7E3FF;
    --texto: #FFFFFF;
    --azul: #7FA6FF;
    --verde: #00C853;
    --radius: 14px;
    --sombra: 0 2px 10px rgba(0, 10, 40, .30);
    --sombra-alta: 0 16px 38px rgba(0, 10, 40, .45);
}

/* ---------- base ---------- */
html[data-tema="moderno"] body {
    background:
        radial-gradient(900px 500px at 100% -8%, rgba(0, 200, 83, .12), transparent 60%),
        radial-gradient(800px 460px at -8% 0%, rgba(46, 91, 224, .28), transparent 60%),
        var(--azul-fundo);
    background-attachment: fixed;
    color: #EAF1FF;
}
html[data-tema="moderno"] h1,
html[data-tema="moderno"] h2,
html[data-tema="moderno"] h3,
html[data-tema="moderno"] label,
html[data-tema="moderno"] p,
html[data-tema="moderno"] li,
html[data-tema="moderno"] strong,
html[data-tema="moderno"] small { color: #EAF1FF; }
html[data-tema="moderno"] a { color: #9FBDFF; }

/* ---------- topo ---------- */
html[data-tema="moderno"] .topbar {
    background: var(--azul-armac);
    border-bottom: 1px solid var(--azul-borda);
    box-shadow: 0 6px 22px rgba(0, 10, 40, .35);
}
html[data-tema="moderno"] .topbar::after {
    background: linear-gradient(90deg, var(--verde-armac), #2E5BE0 55%, transparent);
    height: 3px; opacity: 1;
}
/* o logo é escuro: ganha uma plaquinha branca para continuar visível */
html[data-tema="moderno"] .topbar .marca img {
    background: #fff; border-radius: 8px; padding: 5px 8px;
}
html[data-tema="moderno"] .topbar .marca .badge {
    background: rgba(0, 200, 83, .18); color: #8CFFC0; border: 1px solid rgba(0, 200, 83, .40);
}
html[data-tema="moderno"] .topbar .usuario-info a {
    color: #CFDEFF; text-decoration: none !important; padding: 8px 13px; border-radius: 10px; font-weight: 600;
}
html[data-tema="moderno"] .topbar .usuario-info a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
html[data-tema="moderno"] .topbar .usuario-info a[style*="underline"] { background: var(--verde-armac); color: #00234A; }
html[data-tema="moderno"] .topbar .usuario-info .nome { color: #fff; }
html[data-tema="moderno"] .topbar .usuario-info span[class*="pill"] {
    background: rgba(255, 255, 255, .14); color: #DCE8FF; border: 1px solid var(--azul-borda);
}
html[data-tema="moderno"] .topbar button.sair {
    background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid var(--azul-borda); border-radius: 10px;
}
html[data-tema="moderno"] .topbar button.sair:hover { background: #C6453E; border-color: #C6453E; }
html[data-tema="moderno"] .busca-rapida input {
    background-color: rgba(255, 255, 255, .12); border: 1px solid var(--azul-borda); color: #fff; border-radius: 12px;
}
html[data-tema="moderno"] .busca-rapida input::placeholder { color: #9FB6EC; }
html[data-tema="moderno"] .busca-rapida input:focus {
    background-color: rgba(255, 255, 255, .18); border-color: var(--verde-armac);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, .25);
}

/* ---------- filtros ---------- */
html[data-tema="moderno"] .filtros {
    background: var(--azul-caixa); border-bottom: 1px solid var(--azul-borda); box-shadow: none;
}
html[data-tema="moderno"] .filtros label { color: #9FB6EC !important; }
html[data-tema="moderno"] .filtros select,
html[data-tema="moderno"] .filtros input {
    background: var(--azul-card); color: #fff; border: 1px solid var(--azul-borda); border-radius: 10px;
}
html[data-tema="moderno"] .filtros select option { background: #06256E; color: #fff; }
html[data-tema="moderno"] .filtros input::placeholder { color: #9FB6EC; }
html[data-tema="moderno"] .filtros select:focus,
html[data-tema="moderno"] .filtros input:focus {
    outline: none; border-color: var(--verde-armac); box-shadow: 0 0 0 3px rgba(0, 200, 83, .22);
}
html[data-tema="moderno"] .filtros button { background: var(--azul-card); color: #fff; border: 1px solid var(--azul-borda); border-radius: 10px; }
html[data-tema="moderno"] .filtros button:hover { background: var(--azul-card-2); }
html[data-tema="moderno"] .filtros b { color: #fff; }

/* ---------- kanban ---------- */
html[data-tema="moderno"] .coluna {
    min-width: 322px; max-width: 322px;
    background: var(--azul-caixa);
    border: 1px solid var(--azul-borda);
    border-radius: 16px;
    box-shadow: var(--sombra);
}
html[data-tema="moderno"] .coluna-header {
    background: var(--azul-armac); color: #fff; border: 0; border-radius: 15px 15px 0 0;
    font-size: 12.5px; letter-spacing: .7px;
}
html[data-tema="moderno"] .coluna-header::after { display: none; }
html[data-tema="moderno"] .coluna-header .qtd { background: var(--verde-armac); color: #00234A; font-weight: 900; }
html[data-tema="moderno"] .btn-mais {
    background: var(--azul-card); color: #DCE8FF; border: 1px solid var(--azul-borda); border-radius: 10px;
}
html[data-tema="moderno"] .btn-mais:hover { background: var(--azul-card-2); color: #fff; }

/* ---------- card ---------- */
html[data-tema="moderno"] .card-item {
    background: var(--azul-card);
    border: 1px solid var(--azul-borda);
    border-left: 4px solid var(--azul-borda);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 10, 40, .28);
}
html[data-tema="moderno"] .card-item:has(.selo-nenhum) { border-left-color: #FF6B61; }
html[data-tema="moderno"] .card-item:has(.selo-basico) { border-left-color: #FFC44D; }
html[data-tema="moderno"] .card-item:has(.selo-intermediario) { border-left-color: #7FA6FF; }
html[data-tema="moderno"] .card-item:has(.selo-completo) { border-left-color: var(--verde-armac); }
html[data-tema="moderno"] .card-item:hover { background: var(--azul-card-2); border-color: #3C6BD6; box-shadow: var(--sombra-alta); }
html[data-tema="moderno"] .card-item .modelo { color: #fff; font-size: 15px; }
html[data-tema="moderno"] .card-item .descricao {
    color: #9FB6EC; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
}
html[data-tema="moderno"] .card-item .meta span {
    background: rgba(255, 255, 255, .12); color: #EAF1FF; border: 1px solid var(--azul-borda);
    font-weight: 700; border-radius: 999px; padding: 3px 10px;
}
html[data-tema="moderno"] .card-item .meta .tag-reprovada { background: rgba(255, 107, 97, .18); color: #FFB3AD; border-color: rgba(255, 107, 97, .45); }
html[data-tema="moderno"] .card-item .meta .tag-manut,
html[data-tema="moderno"] .card-item .meta .tag-fert { background: rgba(255, 196, 77, .16); color: #FFD98A; border-color: rgba(255, 196, 77, .4); }
html[data-tema="moderno"] .card-item .sel-local {
    background: rgba(255, 255, 255, .10); color: #fff; border: 1px solid var(--azul-borda); border-radius: 10px;
}
html[data-tema="moderno"] .card-item .sel-local option { background: #06256E; color: #fff; }
html[data-tema="moderno"] .card-item .sel-local:focus {
    outline: none; border-color: var(--verde-armac); box-shadow: 0 0 0 3px rgba(0, 200, 83, .2);
}
html[data-tema="moderno"] .card-item .codigo { color: #A9C2FF; font-size: 12.5px; letter-spacing: .6px; font-weight: 800; }
html[data-tema="moderno"] .card-item .btn-equiv {
    background: var(--verde-armac); color: #00234A; border: 0; border-radius: 999px; font-weight: 800;
}
html[data-tema="moderno"] .card-item .btn-equiv:hover { filter: brightness(1.08); }
html[data-tema="moderno"] .card-item .acoes-fotos {
    background: rgba(255, 255, 255, .08); border: 1px solid var(--azul-borda); border-radius: 10px;
}
html[data-tema="moderno"] .card-item .af-rotulo { color: #9FB6EC; font-weight: 800; letter-spacing: .6px; }
html[data-tema="moderno"] .card-item .af-baixar { background: #fff; color: var(--azul-armac); border-color: #fff; }
html[data-tema="moderno"] .card-item .af-zap { background: #25D366; color: #06331A; border-color: #25D366; }
html[data-tema="moderno"] .card-item.card-marcado { box-shadow: 0 0 0 2px var(--verde-armac), var(--sombra-alta); }
html[data-tema="moderno"] .card-check input { accent-color: var(--verde-armac); }

/* ---------- selos de nível (sobre fundo escuro) ---------- */
html[data-tema="moderno"] .selo-nivel {
    border-radius: 999px; font-size: 11.5px; padding: 5px 11px; width: auto;
    justify-content: flex-start; font-weight: 800; border: 1px solid transparent;
}
html[data-tema="moderno"] .selo-nivel::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; flex: none;
}
html[data-tema="moderno"] .selo-nenhum { background: rgba(255, 107, 97, .16); color: #FF9E97; border-color: rgba(255, 107, 97, .42); }
html[data-tema="moderno"] .selo-basico { background: rgba(255, 196, 77, .16); color: #FFD07A; border-color: rgba(255, 196, 77, .42); }
html[data-tema="moderno"] .selo-intermediario { background: rgba(127, 166, 255, .16); color: #B9CEFF; border-color: rgba(127, 166, 255, .42); }
html[data-tema="moderno"] .selo-completo { background: rgba(0, 200, 83, .16); color: #7BE8A6; border-color: rgba(0, 200, 83, .42); }

/* ---------- caixas das outras telas ---------- */
html[data-tema="moderno"] .bk-card,
html[data-tema="moderno"] .stats-card,
html[data-tema="moderno"] .eq-box,
html[data-tema="moderno"] .sd-box,
html[data-tema="moderno"] .cc-box,
html[data-tema="moderno"] .ng-box,
html[data-tema="moderno"] .upload-box,
html[data-tema="moderno"] .sd-item,
html[data-tema="moderno"] .mh-caixa,
html[data-tema="moderno"] .ng-fund,
html[data-tema="moderno"] .sd-def {
    background: var(--azul-caixa); border: 1px solid var(--azul-borda); border-radius: 16px;
    box-shadow: var(--sombra); color: #EAF1FF;
}
html[data-tema="moderno"] .ng-kpi, html[data-tema="moderno"] .kpi {
    background: var(--azul-card); border: 1px solid var(--azul-borda); border-top: 3px solid var(--verde-armac);
    border-radius: 14px; color: #fff;
}
html[data-tema="moderno"] .ng-rodape, html[data-tema="moderno"] .bk-muted,
html[data-tema="moderno"] .ng-vazio, html[data-tema="moderno"] .sel-vazio { color: #9FB6EC; }

/* campos de formulário em geral */
html[data-tema="moderno"] input[type="text"],
html[data-tema="moderno"] input[type="number"],
html[data-tema="moderno"] input[type="date"],
html[data-tema="moderno"] input[type="email"],
html[data-tema="moderno"] input[type="password"],
html[data-tema="moderno"] select,
html[data-tema="moderno"] textarea {
    background: var(--azul-card); color: #fff; border: 1px solid var(--azul-borda); border-radius: 10px;
}
html[data-tema="moderno"] input::placeholder, html[data-tema="moderno"] textarea::placeholder { color: #8FA9E4; }
html[data-tema="moderno"] select option { background: #06256E; color: #fff; }
html[data-tema="moderno"] input:focus, html[data-tema="moderno"] select:focus, html[data-tema="moderno"] textarea:focus {
    outline: none; border-color: var(--verde-armac); box-shadow: 0 0 0 3px rgba(0, 200, 83, .22);
}

/* ---------- abas ---------- */
html[data-tema="moderno"] .admin-tabs a,
html[data-tema="moderno"] .cc-tabs button,
html[data-tema="moderno"] .sd-tabs button,
html[data-tema="moderno"] .eq-tabs button,
html[data-tema="moderno"] .ng-tabs button {
    background: var(--azul-card); color: #CFDEFF; border: 1px solid var(--azul-borda);
    border-radius: 999px; box-shadow: none; font-weight: 700;
}
html[data-tema="moderno"] .admin-tabs a:hover,
html[data-tema="moderno"] .cc-tabs button:hover,
html[data-tema="moderno"] .sd-tabs button:hover,
html[data-tema="moderno"] .ng-tabs button:hover { background: var(--azul-card-2); color: #fff; }
html[data-tema="moderno"] .admin-tabs a.ativa,
html[data-tema="moderno"] .cc-tabs button.ativo,
html[data-tema="moderno"] .sd-tabs button.ativo,
html[data-tema="moderno"] .eq-tabs button.on,
html[data-tema="moderno"] .ng-tabs button.ativo {
    background: var(--verde-armac); border-color: var(--verde-armac); color: #00234A;
}

/* ---------- tabelas ---------- */
html[data-tema="moderno"] .tabela-admin,
html[data-tema="moderno"] .ng-tab,
html[data-tema="moderno"] table.cc,
html[data-tema="moderno"] table.eq-tab { color: #EAF1FF; }
html[data-tema="moderno"] .tabela-admin th,
html[data-tema="moderno"] .ng-tab th,
html[data-tema="moderno"] table.cc th,
html[data-tema="moderno"] table.eq-tab th {
    background: var(--azul-armac); color: #fff; border: 0;
    text-transform: uppercase; font-size: 10.5px; letter-spacing: .7px;
}
html[data-tema="moderno"] .tabela-admin td,
html[data-tema="moderno"] .ng-tab td,
html[data-tema="moderno"] table.cc td { border-color: var(--azul-borda); }
html[data-tema="moderno"] .tabela-admin tr,
html[data-tema="moderno"] .ng-tab tr { background: var(--azul-caixa); }
html[data-tema="moderno"] .tabela-admin tr:nth-child(even),
html[data-tema="moderno"] .ng-tab tr:nth-child(even) { background: var(--azul-card); }
html[data-tema="moderno"] .tabela-admin tr:hover,
html[data-tema="moderno"] .ng-tab tr:hover { background: var(--azul-card-2); }

/* ---------- botões ---------- */
html[data-tema="moderno"] .btn-primario, html[data-tema="moderno"] .btn-azul {
    background: var(--verde-armac); color: #00234A; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 200, 83, .28);
}
html[data-tema="moderno"] .btn-verde {
    background: var(--verde-armac); color: #00234A; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 200, 83, .28);
}
html[data-tema="moderno"] .btn-primario:hover, html[data-tema="moderno"] .btn-verde:hover, html[data-tema="moderno"] .btn-azul:hover { filter: brightness(1.08); }
html[data-tema="moderno"] .btn-mini {
    background: var(--azul-card); color: #DCE8FF; border: 1px solid var(--azul-borda); border-radius: 9px;
}
html[data-tema="moderno"] .btn-mini:hover { background: var(--azul-card-2); color: #fff; }

/* ---------- janelas (modais) ---------- */
html[data-tema="moderno"] .mq-caixa,
html[data-tema="moderno"] .modal-caixa,
html[data-tema="moderno"] .eq-modal { background: var(--azul-caixa); color: #EAF1FF; border: 1px solid var(--azul-borda); }
html[data-tema="moderno"] .mq-titulo { color: #fff; }
html[data-tema="moderno"] .mq-txt { color: #C4D6FF; }
html[data-tema="moderno"] .mq-opcao { background: var(--azul-card); border: 1px solid var(--azul-borda); color: #EAF1FF; }
html[data-tema="moderno"] .mq-opcao:hover { background: var(--azul-card-2); }
html[data-tema="moderno"] .mq-cancelar { background: transparent; color: #9FB6EC; border: 1px solid var(--azul-borda); }

/* ---------- celular ---------- */
@media (max-width: 640px), (pointer: coarse) and (max-height: 600px) {
    html[data-tema="moderno"] .coluna { min-width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
    html[data-tema="moderno"] .card-item .modelo { font-size: 16px; }
    html[data-tema="moderno"] .pagina-atual { color: #fff; }
    html[data-tema="moderno"] .nav-cel { background: var(--azul-armac); border-top: 1px solid var(--azul-borda); }
    html[data-tema="moderno"] .nav-cel a, html[data-tema="moderno"] .nav-cel button { color: #A9C2FF; }
    html[data-tema="moderno"] .nav-cel a.on { color: #fff; }
    html[data-tema="moderno"] .nav-cel a.on svg { stroke: var(--verde-armac); }
    html[data-tema="moderno"] .nav-cel-caixa { background: var(--azul-caixa); }
    html[data-tema="moderno"] .nav-cel-titulo { color: #fff; }
    html[data-tema="moderno"] .nav-cel-caixa a { background: var(--azul-card); color: #fff; }
}

/* =========================================================
   MODO LISTA (tabela tipo planilha) — vale nos dois temas
   ========================================================= */
.btn-modo {
    border: 1px solid var(--cinza-200); background: #fff; color: var(--cinza-700);
    border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; white-space: nowrap; align-self: end;
}
.btn-modo:hover { filter: brightness(.97); }

.kanban.modo-lista { display: block; overflow-x: auto; }
.lista-wrap { background: #fff; border: 1px solid var(--cinza-200); border-radius: 14px; overflow: hidden; }
table.lista-painel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.lista-painel thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--cinza-100); color: var(--cinza-700);
    text-align: left; padding: 11px 12px; font-size: 11px; font-weight: 800;
    letter-spacing: .7px; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
table.lista-painel thead th::after { content: ' ⇅'; opacity: .3; font-size: 10px; }
table.lista-painel thead th.ord-asc::after { content: ' ↑'; opacity: 1; }
table.lista-painel thead th.ord-desc::after { content: ' ↓'; opacity: 1; }
table.lista-painel thead th.lp-chk::after, table.lista-painel thead th.lp-acoes::after { content: ''; }
table.lista-painel tbody tr { cursor: pointer; border-bottom: 1px solid var(--cinza-200); }
table.lista-painel tbody tr:nth-child(even) { background: rgba(0, 0, 0, .02); }
table.lista-painel td { padding: 9px 12px; vertical-align: middle; white-space: nowrap; }
table.lista-painel .lp-chk { width: 34px; text-align: center; }
table.lista-painel .lp-acoes { width: 140px; text-align: right; }
table.lista-painel .lp-acoes .af-btn { width: 30px; height: 30px; border-radius: 8px; margin-left: 4px; }
table.lista-painel .lp-acoes .btn-equiv { margin-left: 6px; }
table.lista-painel .selo-nivel { width: auto; padding: 4px 10px; font-size: 10.5px; }
.lp-rodape { padding: 10px 14px; margin: 0; font-size: 12px; color: var(--cinza-400); }

/* lista no tema moderno: cabeçalho azul Armac, miolo azul */
html[data-tema="moderno"] .btn-modo { background: var(--azul-card); color: #DCE8FF; border-color: var(--azul-borda); }
html[data-tema="moderno"] .btn-modo:hover { background: var(--azul-card-2); color: #fff; }
html[data-tema="moderno"] .lista-wrap { background: var(--azul-caixa); border-color: var(--azul-borda); box-shadow: var(--sombra); }
html[data-tema="moderno"] table.lista-painel { color: #EAF1FF; }
html[data-tema="moderno"] table.lista-painel thead th { background: var(--azul-armac); color: #fff; }
html[data-tema="moderno"] table.lista-painel tbody tr { background: var(--azul-caixa); border-bottom: 1px solid var(--azul-borda); }
html[data-tema="moderno"] table.lista-painel tbody tr:nth-child(even) { background: var(--azul-card); }
html[data-tema="moderno"] table.lista-painel tbody tr:hover { background: var(--azul-card-2); }
html[data-tema="moderno"] table.lista-painel td[data-label="codigo"] { color: #A9C2FF; font-weight: 800; letter-spacing: .5px; }
html[data-tema="moderno"] table.lista-painel td[data-label="equipamento"] b { color: #fff; }
html[data-tema="moderno"] .lp-rodape { background: var(--azul-caixa); color: #9FB6EC; }
html[data-tema="moderno"] table.lista-painel .lp-acoes .af-baixar { background: #fff; color: var(--azul-armac); border-color: #fff; }
html[data-tema="moderno"] table.lista-painel .lp-acoes .btn-equiv { background: var(--verde-armac); color: #00234A; border: 0; }

@media (max-width: 640px), (pointer: coarse) and (max-height: 600px) {
    .kanban.modo-lista { padding: 12px; }
    table.lista-painel thead { display: none; }
    table.lista-painel, table.lista-painel tbody, table.lista-painel tr, table.lista-painel td { display: block; width: auto; }
    table.lista-painel tbody tr { border: 1px solid var(--cinza-200); border-radius: 12px; margin-bottom: 10px; padding: 10px 12px; }
    table.lista-painel td { padding: 3px 0; white-space: normal; }
    table.lista-painel td[data-label]::before {
        content: attr(data-label) ': '; text-transform: uppercase; font-size: 10px; font-weight: 800;
        color: var(--cinza-400); letter-spacing: .6px;
    }
    table.lista-painel td[data-label="equipamento"]::before, table.lista-painel td[data-label="codigo"]::before { content: ''; }
    table.lista-painel td[data-label="equipamento"] b { font-size: 15px; }
    table.lista-painel .lp-acoes { text-align: left; padding-top: 8px; }
    html[data-tema="moderno"] table.lista-painel tbody tr { background: var(--azul-card); border-color: var(--azul-borda); }
}

/* ---------- botão de tema ---------- */
.btn-tema {
    border: 1px solid var(--cinza-200); background: #fff; color: var(--cinza-700);
    border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn-tema:hover { filter: brightness(.97); }
html[data-tema="moderno"] .btn-tema {
    background: rgba(255, 255, 255, .14); color: #fff; border-color: var(--azul-borda);
}
html[data-tema="moderno"] .btn-tema:hover { background: rgba(255, 255, 255, .22); }
/* v176 — no celular o seletor de tema fica no próprio cabeçalho (compacto) */
@media (max-width: 640px), (pointer: coarse) and (max-height: 600px) {
    .topbar .btn-tema { display: inline-flex; padding: 6px 10px; font-size: 12px; min-height: 34px; gap: 4px; flex: 0 0 auto; }
    .topbar #btnInstalar .bt-txt { display: none; }            /* instalar: só o ícone 📲 */
    .topbar .btn-tema-troca { border-width: 1.5px; }
}

/* v174 — logo do app no topo (no lugar do texto "Fotos & Vídeos") */
.topbar .marca .logo-app { height: 40px; width: 40px; border-radius: 10px; display: block; }
@media (max-width: 640px), (pointer: coarse) and (max-height: 600px) { .topbar .marca .logo-app { height: 32px; width: 32px; border-radius: 8px; } }
html[data-tema="moderno"] .topbar .marca .logo-app { background: transparent; padding: 0; }