/* ==========================================================================
   cloudapp-workspace.css — login e Workspace do cliente no visual CloudAPP (lote 30, V2, 02/10/2026).

   Arquivo SEPARADO do css/cloudapp.css de propósito: aquele é do lote 28, ainda em revisão, e não
   pode ganhar um segundo escritor neste ciclo. Este aqui só CONSOME os tokens --ca-* de lá e vale
   só sob html[data-ui="cloudapp"] — carregado apenas por index.html e portal.html (o dashboard,
   o orap.html e o observar.html não o leem).

   CONTRASTE: os pares novos (empilhamento de manchas do login, rodapé sem blur, texto de status,
   "Encerrar" no cartão) estão em scripts/contraste.js, seção "CloudAPP lote 30". Mudou cor ou
   alpha aqui? Mude lá e rode de novo.

   VIDRO: OPCIONAL e DESLIGADO por padrão (lote 28b: rolagem 3-4x pior sem GPU). Só existe sob
   html.ca-vidro (chave localStorage 'ca-vidro' = '1', interruptor "Efeito vidro"), e no máximo uma
   camada por página: no login o cartão central; no Workspace a .ca-casca do cloudapp.css. O cartão de
   lançamento do style.css (.lanc-cartao) tinha um blur próprio; aqui ele é quase sólido sempre. Fundo das duas páginas = gradientes (.ca-cena), nunca
   imagem nem filter:blur ao vivo.
   ========================================================================== */

/* ===== Comum ============================================================== */
/* [hidden] perde para qualquer "display:" de classe; aqui ele vence sempre, porque o JS destas
   páginas esconde e mostra pelo atributo (selo de https, menu da conta, "Ver todas"). */
html[data-ui="cloudapp"] [hidden] { display: none !important; }

/* Só para leitor de tela (o texto existe, a vista não o mostra). */
html[data-ui="cloudapp"] .ws-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===== LOGIN ============================================================== */
html[data-ui="cloudapp"] body.ws-corpo-login {
    min-height: 100vh;
    margin: 0;
    padding: clamp(12px, 4vw, 40px) clamp(12px, 4vw, 40px) 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--ca-texto);
    font-family: var(--ca-fonte);
    font-size: 0.9375rem;
    overflow-x: hidden;
}

/* Ambiente do login: as manchas da .ca-cena (cloudapp.css) e mais três, maiores, nos cantos — o
   "escritório desfocado" das fotos sem baixar imagem. O PIOR empilhamento destas manchas (todas
   sobrepostas no mesmo ponto) é o medido no contraste.js; por isso nenhuma passa de .22. */
html[data-ui="cloudapp"] .ws-cena-login::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(34% 44% at 12% 30%, rgba(56, 189, 248, 0.22), transparent 70%),
        radial-gradient(30% 40% at 90% 36%, rgba(21, 87, 255, 0.10), transparent 70%),
        radial-gradient(40% 30% at 64% 4%, rgba(255, 255, 255, 0.9), transparent 70%);
}

html[data-ui="cloudapp"] .ws-login {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 468px;
}

/* A ÚNICA camada que pode ter vidro no login. SÓLIDA por padrão, como a .ca-casca do lote 28b: o vidro
   só liga com html.ca-vidro (interruptor "Efeito vidro" do painel/Workspace, chave 'ca-vidro' = '1').
   Por que também aqui, numa página sem rolagem: o custo do desfoque NÃO foi medido com instrumento
   válido — o coletor de rAF no Edge headless deu 1,0x no login E 1,0x no admin rolando, onde o qa do
   28b mediu 3-4x (controle positivo reprovado = instrumento cego). Sem medida, fica o lado seguro.
   Ligado, usa o mesmo alpha da casca (.66): o valor medido no contraste.js. */
html[data-ui="cloudapp"] .ws-login-cartao {
    padding: clamp(24px, 5vw, 44px) clamp(20px, 5vw, 44px) clamp(20px, 4vw, 28px);
    background: var(--ca-vidro-solido);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 24px;
    box-shadow: var(--ca-sombra-casca), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    text-align: center;
}
html[data-ui="cloudapp"].ca-vidro .ws-login-cartao {
    background: var(--ca-vidro);
    -webkit-backdrop-filter: blur(var(--ca-blur)) saturate(1.4);
    backdrop-filter: blur(var(--ca-blur)) saturate(1.4);
}
/* Mesmo com a chave ligada, sólido quando o sistema pede menos transparência, quando o navegador não
   desfoca e em tela estreita (mesmas regras da casca no 28b). Seletores com .ca-vidro: mesma
   especificidade da regra acima, para vencê-la. */
@media (prefers-reduced-transparency: reduce), (max-width: 960px) {
    html[data-ui="cloudapp"].ca-vidro .ws-login-cartao {
        background: var(--ca-vidro-solido);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-ui="cloudapp"].ca-vidro .ws-login-cartao { background: var(--ca-vidro-solido); }
}

/* Logo: max-height e não height fixa — a logo da EMPRESA (auth.js troca o src) pode ter outra
   proporção, e width:auto + max-* preserva a dela sem distorcer. */
html[data-ui="cloudapp"] .ws-login-marca { display: flex; justify-content: center; margin-bottom: 22px; }
html[data-ui="cloudapp"] .ws-login-marca img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 56px;
}
html[data-ui="cloudapp"] .ws-login-titulo {
    margin: 0 0 6px;
    font-size: clamp(1.5rem, 5vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--ca-texto);
}
html[data-ui="cloudapp"] .ws-login-sub {
    margin: 0 auto 26px;
    max-width: 34ch;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ca-texto-2);
}

/* Erro do login (auth.js escreve e mostra com style.display): tom de selo medido (chip erro). */
html[data-ui="cloudapp"] .ws-login .error-message {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid #F5C9C9;
    border-radius: var(--ca-raio-p);
    background: var(--ca-erro-fundo);
    color: var(--ca-erro-texto);
    font-size: 0.84375rem;
    line-height: 1.45;
    text-align: left;
}

html[data-ui="cloudapp"] .ws-login form { text-align: left; }
html[data-ui="cloudapp"] .ws-campo { margin-bottom: 16px; }
html[data-ui="cloudapp"] .ws-campo > label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ca-texto);
}
/* Caixa do campo: o ícone fica DENTRO, à esquerda (como nas fotos); o input ocupa a caixa toda
   para o clique em qualquer ponto focar o campo. */
html[data-ui="cloudapp"] .ws-campo-caixa { position: relative; }
html[data-ui="cloudapp"] .ws-campo-caixa > .ica {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    color: var(--ca-texto-2);
    pointer-events: none;
}
html[data-ui="cloudapp"] .ws-campo-caixa input[type="text"],
html[data-ui="cloudapp"] .ws-campo-caixa input[type="password"] {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 16px 0 48px;
    border: 1px solid var(--ca-borda);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ca-texto);
    font: inherit;
    font-size: 0.9375rem;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
html[data-ui="cloudapp"] .ws-campo-caixa input::placeholder { color: var(--ca-texto-2); opacity: 1; }
html[data-ui="cloudapp"] .ws-campo-caixa input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--ca-acao);
    box-shadow: 0 0 0 4px var(--ca-foco);
}
html[data-ui="cloudapp"] .ws-campo-caixa input:focus ~ .ica,
html[data-ui="cloudapp"] .ws-campo-caixa:focus-within > .ica { color: var(--ca-acao); }
/* Campo de senha deixa lugar para o olho à direita. */
html[data-ui="cloudapp"] .ws-campo-caixa.ws-com-olho input { padding-right: 52px; }
/* O Edge desenha um "olho" nativo próprio no campo de senha: com o nosso seriam dois. */
html[data-ui="cloudapp"] .ws-campo-caixa input::-ms-reveal,
html[data-ui="cloudapp"] .ws-campo-caixa input::-ms-clear { display: none; }

html[data-ui="cloudapp"] .ws-olho {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ca-texto-2);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
html[data-ui="cloudapp"] .ws-olho:hover { background: var(--ca-hover); color: var(--ca-texto); }
html[data-ui="cloudapp"] .ws-olho:focus-visible { outline: 2px solid var(--ca-acao); outline-offset: 1px; }
html[data-ui="cloudapp"] .ws-olho .ica { width: 19px; height: 19px; }
/* Um dos dois desenhos por vez: fechado = "mostrar senha"; aberto (aria-pressed) = "ocultar". */
html[data-ui="cloudapp"] .ws-olho .ws-olho-ocultar { display: none; }
html[data-ui="cloudapp"] .ws-olho[aria-pressed="true"] .ws-olho-mostrar { display: none; }
html[data-ui="cloudapp"] .ws-olho[aria-pressed="true"] .ws-olho-ocultar { display: block; }

/* Botão Entrar: o degradê medido do cloudapp.css (#1557FF → #0369C9, branco 5,43:1 no pior
   ponto), só mais alto. O ciano vivo da foto reprovaria (1,9:1) — fica de fora. */
html[data-ui="cloudapp"] .ws-entrar {
    width: 100%;
    height: 52px;
    margin-top: 8px;
    border: 0;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    gap: 10px;
}
/* .btn-text: depois de um login errado o auth.js põe style.display='inline-block' nele. Como o .btn é
   inline-flex, o span é item flex e "inline"/"inline-block" viram "block" do mesmo jeito; o ícone fica
   alinhado por vertical-align (conteúdo em linha), que não depende desse display — conferido medindo
   a posição do ícone e do texto antes e depois do erro (lote 30, ajuste do architect). */
html[data-ui="cloudapp"] .ws-entrar .btn-text { line-height: 1.45; white-space: nowrap; }
html[data-ui="cloudapp"] .ws-entrar .btn-text .ica { width: 19px; height: 19px; vertical-align: -0.24em; margin-right: 8px; }
/* O spinner do style.css é azul sobre transparente — sumiria no botão azul. */
html[data-ui="cloudapp"] .ws-entrar .spinner { border-color: rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF; }
html[data-ui="cloudapp"] .ws-entrar:disabled { opacity: 0.85; cursor: progress; }

/* Selos: só os que são verdade nesta conexão (o de criptografia aparece só em https, js/login-ca.js). */
html[data-ui="cloudapp"] .ws-login-selos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(11, 27, 63, 0.08);
}
html[data-ui="cloudapp"] .ws-selo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    color: var(--ca-texto-2);
    white-space: nowrap;
}
html[data-ui="cloudapp"] .ws-selo .ica { width: 17px; height: 17px; color: var(--ca-acao); }

/* Rodapé cloudunix: pastilha clara SEM blur (o style.css .pastilha tinha um — seria a segunda
   camada). Branco .72 sobre o pior empilhamento: medido no contraste.js. */
html[data-ui="cloudapp"] .ws-rodape-login {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 1;
    transform: translateX(-50%);
    max-width: calc(100vw - 24px);
}
html[data-ui="cloudapp"] .ws-rodape-link {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.85);
    color: var(--ca-texto-2);
    font-size: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
}
html[data-ui="cloudapp"] .ws-rodape-link:hover { color: var(--ca-texto); text-decoration: underline; }
html[data-ui="cloudapp"] .ws-rodape-link:focus-visible { outline: 2px solid var(--ca-acao); outline-offset: 2px; }

/* ===== WORKSPACE: casca =================================================== */
/* A .ca-casca, .ca-lateral, .ca-topo e .ca-conteudo vêm do cloudapp.css (mesma linguagem do
   admin). Aqui só o que é do Workspace: o menu lateral (âncoras de seção, não .tab-btn — o
   contrato .tab-btn/.tabs-nav é do admin-rotas.js e não vale nesta página). */
html[data-ui="cloudapp"] .ws-casca { max-width: 1520px; }
html[data-ui="cloudapp"] .ws-marca-nome {
    margin-left: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ca-texto);
    overflow-wrap: anywhere;
}
html[data-ui="cloudapp"] .ws-nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 2px 0;
}
html[data-ui="cloudapp"] .ws-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--ca-raio-p);
    color: var(--ca-texto);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
html[data-ui="cloudapp"] .ws-nav-item .ica { width: 20px; height: 20px; color: var(--ca-texto-2); transition: color 0.15s ease; }
html[data-ui="cloudapp"] .ws-nav-item:hover { background: rgba(234, 242, 255, 0.75); }
html[data-ui="cloudapp"] .ws-nav-item:focus-visible { outline: 2px solid var(--ca-acao); outline-offset: 1px; }
/* Ativo: fundo azul muito claro + texto/ícone azul forte (mesma regra do admin). */
html[data-ui="cloudapp"] .ws-nav-item[aria-current="true"] {
    background: var(--ca-hover);
    color: var(--ca-acao);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(21, 87, 255, 0.08);
}
html[data-ui="cloudapp"] .ws-nav-item[aria-current="true"] .ica { color: var(--ca-acao); }

/* --- Barra superior: busca e conta --- */
/* #campo-busca mora num .campo-busca (o portal.js injeta o ícone nele e não tem guarda: sem a
   classe, a página inteira para). O .ca-busca dá o desenho; sem atalho Ctrl+K aqui, o recuo da
   direita volta ao normal. */
html[data-ui="cloudapp"] .ws-busca { max-width: 640px; }
html[data-ui="cloudapp"] .ws-busca input[type="search"] { padding-right: 14px; }
html[data-ui="cloudapp"] .ws-busca input[type="search"]::-webkit-search-cancel-button { display: block; cursor: pointer; }

html[data-ui="cloudapp"] .ws-conta { position: relative; }
html[data-ui="cloudapp"] .ws-conta-bt {
    font: inherit;
    cursor: pointer;
    padding-right: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
html[data-ui="cloudapp"] .ws-conta-bt:hover { background: #FFFFFF; border-color: var(--ca-borda-forte); }
html[data-ui="cloudapp"] .ws-conta-bt:focus-visible { outline: 2px solid var(--ca-acao); outline-offset: 2px; }
html[data-ui="cloudapp"] .ws-conta-bt > .ica { width: 16px; height: 16px; color: var(--ca-texto-2); transition: transform 0.15s ease; }
html[data-ui="cloudapp"] .ws-conta-bt[aria-expanded="true"] > .ica { transform: rotate(180deg); }
/* #user-info: o portal.js escreve o username nele — aqui ele É o nome da conta. */
html[data-ui="cloudapp"] .ws-conta-bt #user-info {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ca-texto);
    text-align: left;
}
html[data-ui="cloudapp"] .ws-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    min-width: 200px;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid var(--ca-borda);
    border-radius: var(--ca-raio-m);
    box-shadow: var(--ca-sombra-2);
}
html[data-ui="cloudapp"] .ws-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ca-texto);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
html[data-ui="cloudapp"] .ws-menu-item .ica { width: 17px; height: 17px; color: var(--ca-texto-2); }
html[data-ui="cloudapp"] .ws-menu-item:hover,
html[data-ui="cloudapp"] .ws-menu-item:focus-visible { background: var(--ca-hover); outline: none; }
html[data-ui="cloudapp"] .ws-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--ca-acao); }

/* ===== WORKSPACE: saudação ================================================ */
html[data-ui="cloudapp"] .ws-saudacao {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 6px 0 22px;
    scroll-margin-top: 16px;
}
html[data-ui="cloudapp"] .ws-saudacao-icone {
    flex: none;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--ca-hover);
    color: var(--ca-acao);
    box-shadow: inset 0 0 0 1px rgba(21, 87, 255, 0.08);
}
html[data-ui="cloudapp"] .ws-saudacao-icone .ica { width: 28px; height: 28px; }
html[data-ui="cloudapp"] .ws-saudacao h1 {
    margin: 0 0 4px;
    font-size: clamp(1.5rem, 4.2vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--ca-texto);
    overflow-wrap: anywhere;
}
html[data-ui="cloudapp"] .ws-saudacao h1:focus { outline: none; }
html[data-ui="cloudapp"] .ws-saudacao p { margin: 0; font-size: 0.9375rem; color: var(--ca-texto-2); }

/* ===== WORKSPACE: blocos ================================================== */
html[data-ui="cloudapp"] .ws-bloco {
    margin-bottom: 22px;
    padding: 20px 22px 22px;
    background: rgba(255, 255, 255, 0.55);   /* véu SEM blur sobre a casca, como a lateral */
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--ca-raio-g);
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.04);
    scroll-margin-top: 16px;
}
html[data-ui="cloudapp"] .ws-bloco-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 14px;
}
html[data-ui="cloudapp"] .ws-bloco-cab h2 {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--ca-texto);
}
html[data-ui="cloudapp"] .ws-bloco-cab h2:focus { outline: none; }
html[data-ui="cloudapp"] .ws-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ca-acao);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}
html[data-ui="cloudapp"] .ws-link:hover { background: var(--ca-hover); }
html[data-ui="cloudapp"] .ws-link:focus-visible { outline: 2px solid var(--ca-acao); outline-offset: 1px; }
html[data-ui="cloudapp"] .ws-link .ica { width: 16px; height: 16px; }

/* ===== Abas (Favoritos / Todos) e controles =============================== */
/* Mesmos <button class="lanc-aba"> do launcher (portal.js alterna .ativa/aria-selected); só a
   forma muda: segmento em pílula, em vez do sublinhado. */
html[data-ui="cloudapp"] .lanc-abas {
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 0;
}
html[data-ui="cloudapp"] .lanc-aba {
    margin: 0;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--ca-texto-2);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
html[data-ui="cloudapp"] .lanc-aba:hover { background: rgba(234, 242, 255, 0.75); color: var(--ca-texto); }
html[data-ui="cloudapp"] .lanc-aba.ativa {
    background: var(--ca-hover);
    border-color: rgba(21, 87, 255, 0.12);
    color: var(--ca-acao);
    font-weight: 600;
}
html[data-ui="cloudapp"] .lanc-aba:focus-visible { outline: 2px solid var(--ca-acao); outline-offset: 2px; border-radius: 999px; }
html[data-ui="cloudapp"] .lanc-controles { gap: 6px; padding-bottom: 0; }
html[data-ui="cloudapp"] .lanc-bt-icone {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ca-borda);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ca-texto-2);
}
html[data-ui="cloudapp"] .lanc-bt-icone:hover { background: #FFFFFF; border-color: var(--ca-borda-forte); color: var(--ca-texto); }
html[data-ui="cloudapp"] .lanc-bt-icone:focus-visible { outline: 2px solid var(--ca-acao); outline-offset: 2px; }
html[data-ui="cloudapp"] .lanc-bt-icone.ativo { background: var(--ca-hover); border-color: rgba(21, 87, 255, 0.25); color: var(--ca-acao); }
html[data-ui="cloudapp"] .lanc-bt-icone .ica { width: 18px; height: 18px; vertical-align: 0; }
/* Z→A = o mesmo desenho virado (regra do launcher, agora para o ícone linear). */
html[data-ui="cloudapp"] .lanc-bt-icone.invertido .ica { transform: scaleY(-1); }

/* ===== Cartões de aplicativo ============================================== */
/* Grade fluida: cartões de 200px+ no desktop, duas colunas num celular de 360px. auto-fill (não
   auto-fit) para dois apps não esticarem até a largura toda. */
html[data-ui="cloudapp"] .lanc-grade {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    justify-content: stretch;
    gap: 14px;
    padding-bottom: 2px;
}
html[data-ui="cloudapp"] .lanc-app {
    background: var(--ca-superficie);
    border: 1px solid rgba(227, 233, 242, 0.9);
    border-radius: var(--ca-raio-m);
    box-shadow: var(--ca-sombra-1);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
html[data-ui="cloudapp"] .lanc-app:hover { transform: translateY(-2px); border-color: #CFE0FF; box-shadow: var(--ca-sombra-2); }
html[data-ui="cloudapp"] .lanc-alvo {
    height: 100%;
    gap: 6px;
    padding: 22px 14px 18px;
    border-radius: var(--ca-raio-m);
    text-align: center;
}
html[data-ui="cloudapp"] .lanc-alvo:hover { background: transparent; box-shadow: none; }
html[data-ui="cloudapp"] .lanc-alvo:focus-visible { outline: 2px solid var(--ca-acao); outline-offset: 2px; }
html[data-ui="cloudapp"] .lanc-alvo > .lanc-tile { margin-bottom: 8px; }
html[data-ui="cloudapp"] .lanc-nome {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ca-texto);
}
/* Descrição do catálogo (AppDto.description), duas linhas no máximo; o texto completo continua
   no title do cartão. */
html[data-ui="cloudapp"] .lanc-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ca-texto-2);
}
html[data-ui="cloudapp"] .lanc-tile { width: 56px; height: 56px; border-radius: 16px; }
html[data-ui="cloudapp"] .lanc-tile .ica {
    width: 28px;
    height: 28px;
    color: #FFFFFF;
    vertical-align: 0;
    /* mesmo recurso do launcher: a sombra sob o traço devolve a silhueta sobre o topo claro */
    filter: drop-shadow(0 1px 1px rgba(17, 24, 39, 0.35));
}
html[data-ui="cloudapp"] .lanc-tile-sm .ica { width: 20px; height: 20px; }
html[data-ui="cloudapp"] .lanc-estrela {
    top: 10px;
    right: 10px;
    padding: 6px;
    border-radius: 10px;
    color: var(--ca-texto-2);
}
html[data-ui="cloudapp"] .lanc-estrela:hover { transform: none; background: var(--ca-hover); color: var(--ca-acao); }
html[data-ui="cloudapp"] .lanc-estrela.fav { color: var(--ca-acao); }
html[data-ui="cloudapp"] .lanc-estrela .ica { width: 17px; height: 17px; vertical-align: 0; display: block; }
/* Favorito = a mesma estrela, preenchida (um desenho, dois estados). */
html[data-ui="cloudapp"] .lanc-estrela.fav .ica { fill: currentColor; }
html[data-ui="cloudapp"] .lanc-estrela:focus-visible { outline: 2px solid var(--ca-acao); outline-offset: 1px; }

/* --- Lista --- */
html[data-ui="cloudapp"] .lanc-grade.lanc-lista { display: flex; flex-direction: column; gap: 8px; }
html[data-ui="cloudapp"] .lanc-lista .lanc-app:hover { transform: none; }
html[data-ui="cloudapp"] .lanc-lista .lanc-alvo {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "tile nome abrir" "tile desc abrir";
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    padding: 12px 56px 12px 14px;   /* lugar da estrela à direita */
    text-align: left;
}
html[data-ui="cloudapp"] .lanc-lista .lanc-alvo > .lanc-tile { grid-area: tile; margin: 0; width: 40px; height: 40px; border-radius: 12px; }
html[data-ui="cloudapp"] .lanc-lista .lanc-tile .ica { width: 20px; height: 20px; }
html[data-ui="cloudapp"] .lanc-lista .lanc-nome { grid-area: nome; text-align: left; font-size: 0.9375rem; }
html[data-ui="cloudapp"] .lanc-lista .lanc-desc { grid-area: desc; -webkit-line-clamp: 1; line-clamp: 1; }
html[data-ui="cloudapp"] .lanc-lista .lanc-rotulo-abrir { grid-area: abrir; color: var(--ca-acao); font-size: 0.8125rem; font-weight: 600; }
html[data-ui="cloudapp"] .lanc-lista .lanc-estrela { top: 50%; right: 12px; transform: translateY(-50%); }
html[data-ui="cloudapp"] .lanc-lista .lanc-estrela:hover { transform: translateY(-50%); }

html[data-ui="cloudapp"] .lanc-vazio {
    padding: 32px 16px;
    border: 1px dashed var(--ca-borda-forte);
    border-radius: var(--ca-raio-m);
    background: rgba(255, 255, 255, 0.6);
    color: var(--ca-texto-2);
    font-size: 0.875rem;
}
html[data-ui="cloudapp"] .lanc-grade .loading-container { grid-column: 1 / -1; color: var(--ca-texto-2); }

/* ===== Aplicativos abertos (tabela do portal.js) ========================== */
html[data-ui="cloudapp"] .lanc-abertos { margin-top: 22px; }
html[data-ui="cloudapp"] .lanc-abertos h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 600; color: var(--ca-texto); }
html[data-ui="cloudapp"] .lanc-abertos td .btn { margin: 2px 4px 2px 0; }
html[data-ui="cloudapp"] .lanc-abertos .badge { white-space: nowrap; }   /* "Em uso" quebrava em duas linhas a 375 px */
html[data-ui="cloudapp"] .btn-texto-perigo { color: var(--ca-erro-texto); }
html[data-ui="cloudapp"] .btn-texto-perigo:hover { color: #991B1B; background: var(--ca-erro-fundo); }

/* ===== Sessões recentes =================================================== */
html[data-ui="cloudapp"] .ws-recentes td { vertical-align: middle; }
html[data-ui="cloudapp"] .ws-recentes .ws-app-celula { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ca-texto); min-width: 0; }
html[data-ui="cloudapp"] .ws-recentes .ws-app-celula .ica { width: 18px; height: 18px; color: var(--ca-texto-2); }
html[data-ui="cloudapp"] .ws-recentes .ws-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ca-texto); }
html[data-ui="cloudapp"] .ws-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--ca-texto-2);
}
/* Ponto de estado: verde = em uso (3:1 como PONTO, medido); o texto usa o tom escuro (4,5:1). */
html[data-ui="cloudapp"] .ws-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ca-texto-2);
}
html[data-ui="cloudapp"] .ws-status.ws-ativa { color: var(--ca-ok-texto); }
html[data-ui="cloudapp"] .ws-status.ws-ativa::before { background: var(--ca-ok); box-shadow: 0 0 0 3px var(--ca-ok-fundo); }
html[data-ui="cloudapp"] .ws-encerrar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #F5C9C9;
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--ca-erro-texto);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
html[data-ui="cloudapp"] .ws-encerrar:hover { background: var(--ca-erro-fundo); }
html[data-ui="cloudapp"] .ws-encerrar:focus-visible { outline: 2px solid var(--ca-acao); outline-offset: 2px; }
html[data-ui="cloudapp"] .ws-encerrar:disabled { opacity: 0.6; cursor: progress; }
html[data-ui="cloudapp"] .ws-encerrar .ica { width: 15px; height: 15px; }
html[data-ui="cloudapp"] .ws-recentes .ws-vazio-celula { padding: 26px 18px; text-align: center; color: var(--ca-texto-2); }
html[data-ui="cloudapp"] .ws-aviso { margin: 10px 2px 0; font-size: 0.8125rem; color: var(--ca-texto-2); }
html[data-ui="cloudapp"] .ws-aviso:empty { display: none; }
html[data-ui="cloudapp"] .ws-aviso.ws-erro { color: var(--ca-erro-texto); }

/* ===== Cartão de lançamento (palco do portal.js) ========================== */
/* Fora da casca (irmão dela), então não herda o vidro — e não ganha um próprio: quase sólido. */
html[data-ui="cloudapp"] .lanc-cartao {
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--ca-borda);
    border-radius: var(--ca-raio-m);
    box-shadow: var(--ca-sombra-2);
    font-family: var(--ca-fonte);
}
html[data-ui="cloudapp"] .lanc-cartao-titulo { color: var(--ca-texto); font-weight: 600; }
html[data-ui="cloudapp"] .lanc-cartao-estado { color: var(--ca-texto-2); }
html[data-ui="cloudapp"] .lanc-cartao.ok { border-left: 4px solid var(--ca-ok); }
html[data-ui="cloudapp"] .lanc-cartao.ok .lanc-cartao-estado { color: var(--ca-ok-texto); }
html[data-ui="cloudapp"] .lanc-cartao.falha { border-left: 4px solid var(--ca-erro); }
html[data-ui="cloudapp"] .lanc-cartao.falha .lanc-cartao-titulo { color: var(--ca-erro-texto); }
html[data-ui="cloudapp"] .lanc-acao { color: var(--ca-acao); }
html[data-ui="cloudapp"] .lanc-selo .ica { width: 14px; height: 14px; vertical-align: 0; }
html[data-ui="cloudapp"] .lanc-selo-x { color: var(--ca-erro-texto); background: var(--ca-erro-fundo); }

/* ===== Rodapé do Workspace ================================================ */
html[data-ui="cloudapp"] .ws-rodape { padding: 6px 0 4px; text-align: center; }

/* ===== Telas estreitas ===================================================== */
@media (max-width: 960px) {
    /* A lateral vira faixa no topo (regra do cloudapp.css); o menu vai para a horizontal.
       A casca tem min-height:100vh e duas linhas automáticas: sem fixar as linhas, o grid reparte a
       sobra entre elas e a faixa do menu (flex:1) esticava os itens até ~180 px de altura (medido). */
    html[data-ui="cloudapp"] .ws-casca { grid-template-rows: auto 1fr; }
    html[data-ui="cloudapp"] .ws-nav { flex: none; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px; padding: 0; }
    html[data-ui="cloudapp"] .ws-nav-item { padding: 8px 12px; font-size: 0.875rem; }
    html[data-ui="cloudapp"] .ws-bloco { padding: 16px 14px 18px; border-radius: var(--ca-raio-m); }
}
@media (max-width: 560px) {
    html[data-ui="cloudapp"] .lanc-grade { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    html[data-ui="cloudapp"] .lanc-alvo { padding: 18px 10px 14px; }
    html[data-ui="cloudapp"] .lanc-abas .lanc-controles { margin-left: 0; width: 100%; justify-content: flex-end; }
    html[data-ui="cloudapp"] .ws-saudacao { gap: 12px; }
    html[data-ui="cloudapp"] .ws-saudacao-icone { width: 44px; height: 44px; border-radius: 14px; }
    html[data-ui="cloudapp"] .ws-saudacao-icone .ica { width: 24px; height: 24px; }
    /* Conta: no celular só o avatar e a seta; o nome segue no botão para leitor de tela. */
    html[data-ui="cloudapp"] .ws-conta-bt .ca-conta-texto {
        position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    /* Aplicativos abertos: "Aberto às" sai da vista no estreito para os botões caberem sem
       rolagem lateral (a coluna Estado já diz que está em uso). */
    html[data-ui="cloudapp"] #sessions-wrap .data-table th:nth-child(3),
    html[data-ui="cloudapp"] #sessions-wrap .data-table td:nth-child(3) { display: none; }
    html[data-ui="cloudapp"] #sessions-wrap .data-table th,
    html[data-ui="cloudapp"] #sessions-wrap .data-table td { padding: 10px 10px; }
    /* Sessões recentes: a tabela vira lista de fichas (cada célula com o rótulo da coluna). */
    html[data-ui="cloudapp"] .ws-recentes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    html[data-ui="cloudapp"] .ws-recentes,
    html[data-ui="cloudapp"] .ws-recentes tbody,
    html[data-ui="cloudapp"] .ws-recentes tr,
    html[data-ui="cloudapp"] .ws-recentes td { display: block; width: 100%; }
    html[data-ui="cloudapp"] .ws-recentes tr { padding: 10px 14px; border-bottom: 1px solid var(--ca-borda-suave); }
    html[data-ui="cloudapp"] .ws-recentes tr:last-child { border-bottom: 0; }
    html[data-ui="cloudapp"] .ws-recentes tr:hover td { background: transparent; }
    html[data-ui="cloudapp"] .ws-recentes td { padding: 3px 0; border: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    html[data-ui="cloudapp"] .ws-recentes td[data-rotulo]::before {
        content: attr(data-rotulo);
        flex: none;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--ca-texto-2);
    }
    html[data-ui="cloudapp"] .ws-recentes td.ws-col-app { padding-bottom: 6px; }
    html[data-ui="cloudapp"] .ws-recentes td.ws-col-acao { justify-content: flex-end; padding-top: 6px; }
    html[data-ui="cloudapp"] .ws-recentes td.ws-col-acao:empty { display: none; }
    html[data-ui="cloudapp"] .ws-recentes td.ws-vazio-celula { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-ui="cloudapp"] .lanc-app,
    html[data-ui="cloudapp"] .ws-nav-item,
    html[data-ui="cloudapp"] .ws-conta-bt > .ica { transition: none; }
    html[data-ui="cloudapp"] .lanc-app:hover { transform: none; }
}