/*
 * O que o 98.css não traz: fonte de interface, densidade de ERP e o
 * comportamento de aplicação (janela que ocupa a tela, menu no alto, grade).
 *
 * O 98.css desenha os controles — inclusive os botões da barra de título, que o
 * classic-stylesheets não desenhava. Foi por isso que trocamos de base.
 */

/* A pixelada do Windows 98. Fica de reserva: a Tahoma lê melhor em tela
   moderna, mas quando ela falta é a MS Sans Serif que segura o tom.
   ⚠️ Os dois formatos vão num `src` só. O 98.css declara dois `src`
   separados, e o segundo apaga o primeiro — é por isso que ele pedia um
   .woff2 que não existia e devolvia 404 no console. */
@font-face {
    font-family: "MS Sans Serif";
    src: url("ms_sans_serif.woff2") format("woff2"),
         url("ms_sans_serif.woff") format("woff");
    font-weight: normal;
}
@font-face {
    font-family: "MS Sans Serif";
    src: url("ms_sans_serif_bold.woff2") format("woff2"),
         url("ms_sans_serif_bold.woff") format("woff");
    font-weight: bold;
}

:root {
    --fonte: Tahoma, "Segoe UI", "MS Sans Serif", Geneva, sans-serif;

    /* Era 11px. Subiu por pedido — e o A-/A+ da barra de status mexe daqui,
       entre 11 e 16, guardando a escolha no navegador. */
    --corpo: 12px;
}

html, body {
    font-family: var(--fonte);
    font-size: var(--corpo);
    margin: 0;
    height: 100%;
    color: #222;
}

/* ⚠️ Esta lista é a mesma do 98.css, de propósito.
 *
 * Lá ela pede "Pixelated MS Sans Serif" em 11px com font-smoothing desligado —
 * uma fonte bitmap, que só é nítida no tamanho em que foi desenhada. Como
 * `.window` é classe e `body` é elemento, era ela que ganhava, e tudo dentro
 * da janela saía pixelado; nos números grandes dos indicadores, ampliada,
 * saía deformada. Repetir os mesmos seletores aqui devolve a Tahoma, que é o
 * que o Delphi desenha em tela moderna. */
.title-bar, .window, button, input, label, legend,
li[role=tab], option, select, table, textarea, ul.tree-view {
    font-family: var(--fonte);
    font-size: var(--corpo);
    -webkit-font-smoothing: auto;
}

/* --- Tela de entrada --------------------------------------------------- */
/* Papel de parede próprio, diferente do da área de trabalho: aqui ninguém
   entrou ainda, e a tela é uma só. */
body.tela-de-entrada {
    display: grid;
    place-items: center;
    height: 100vh;
    margin: 0;
    background: #0a5ca8 url("../img/fundo-login.jpg") center / cover no-repeat;
}
.window.login {
    width: 380px;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
                inset -2px -2px grey, inset 2px 2px #fff,
                0 8px 26px rgba(0, 0, 0, .45);
}
.window.login .window-body { padding: 18px 20px 16px; }

/* A marca: painel azul à esquerda, nome do produto à direita — o arranjo da
   tela de entrada do Windows. */
.marca-login {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid grey;
    box-shadow: 0 1px #fff;
}
.marca-login img { width: 54px; height: 54px; flex-shrink: 0; }
.marca-login div { display: flex; flex-direction: column; line-height: 1.15; }
.marca-login strong {
    font-size: calc(var(--corpo) + 10px);
    font-weight: normal;   /* leve, como o "Windows" da tela original */
    color: #0a5ca8;
}
.marca-login strong b { font-weight: bold; }
.marca-login span { color: #404040; letter-spacing: .5px; }

.window.login .campo { margin-bottom: 14px; }
.window.login .campo label { display: block; margin-bottom: 5px; }
.window.login .campo input[type=text],
.window.login .campo input[type=password] {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 4px;
}
.window.login .campo.lembrar { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.window.login .campo.lembrar label { margin: 0; }
.window.login .acoes { display: flex; justify-content: flex-end; margin-top: 20px; }
.window.login .acoes button { min-width: 92px; min-height: 26px; }

/* --- A página é uma área de trabalho do Windows ------------------------ */
/* Mesa em cima, barra de tarefas colada embaixo. Nada rola: o que precisa de
   espaço é janela, e janela se arrasta. */
body.area-de-trabalho {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    background: #008080;   /* o verde-azulado da área de trabalho */
}

/* O papel de parede cobre a mesa inteira; o verde-azulado do body fica por
   baixo, para o caso de a imagem demorar ou não vir. */
.mesa {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: url("../img/papel-de-parede.jpg") center / cover no-repeat;
}

/* --- Ícones da área de trabalho --- */
.icones {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    width: 100px;
}
/* A lixeira fica sozinha no canto de baixo, à direita, fora do fluxo — as
   janelas nascem por cima dela. */
.icones-rodape {
    position: absolute;
    right: 0;
    bottom: 0;
}
.icone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    text-decoration: none;
    color: #fff;
    text-align: center;
    border: 1px dotted transparent;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .9);
}
.icone img { width: 48px; height: 48px; }
.icone span { padding: 0 3px; }
.icone:hover { border-color: #fff; }
.icone:hover span,
.icone:focus span { background: navy; }

/* --- Barra de tarefas --- */
.barra-tarefas {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-shrink: 0;
    padding: 4px;
    background: silver;
    box-shadow: inset 0 1px #fff, inset 0 2px #dfdfdf;
    z-index: 200;
}
.barra-tarefas .iniciar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 30px;
    padding: 0 12px 0 7px;
    font-weight: bold;
}
.barra-tarefas .iniciar.apertado {
    box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
                inset -2px -2px #dfdfdf, inset 2px 2px grey;
}
.barra-tarefas .iniciar img { width: 16px; height: 16px; }

/* O sulco que separa Iniciar das tarefas, como no original. */
.tarefas {
    display: flex;
    gap: 3px;
    flex: 1;
    min-width: 0;
    padding-left: 6px;
    border-left: 1px solid grey;
    box-shadow: inset 1px 0 #fff;
}
/* Todos os botões do mesmo tamanho, independente do tamanho do título: é o
   que a barra do Windows faz. Crescem até 200px e, quando não couberem
   todos, encolhem juntos — nenhum fica grande com o vizinho espremido. */
.tarefa {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 200px;
    min-width: 0;
    max-width: 200px;
    min-height: 30px;
    padding: 0 10px;
    text-align: left;
}
.tarefa span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tarefa img { width: 16px; height: 16px; flex-shrink: 0; }
.tarefa.ativa {
    font-weight: bold;
    box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
                inset -2px -2px #dfdfdf, inset 2px 2px grey;
}

/* A bandeja: um painel afundado só, com o que roda por trás e o relógio —
   como a área de notificação do Windows. */
.bandeja {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 0 8px;
    box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey;
}
.relogio {
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

/* O que roda por trás — só o ícone, como na bandeja de verdade. O nome
   aparece na dica, com o mouse em cima. */
.na-bandeja {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 4px;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
}
.na-bandeja img {
    width: 16px;
    height: 16px;
}
a.na-bandeja:hover { border-color: #fff #808080 #808080 #fff; }

/* O nome só aparece com o mouse em cima — e é a dica amarela do Windows,
   não o `title` do navegador, que demora e não combina com o resto. */
.dica-bandeja {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    display: none;
    padding: 3px 6px;
    background: #ffffe1;
    border: 1px solid #0a0a0a;
    color: #0a0a0a;
    font-size: calc(var(--corpo) - 1px);
    white-space: nowrap;
    pointer-events: none;
    z-index: 300;
}
.na-bandeja:hover .dica-bandeja { display: block; }

/* Sem permissão o ícone continua lá, parado e sem clique: a fila roda de
   qualquer jeito, mas a tela não é de todo mundo. */
.na-bandeja.bloqueado { cursor: default; }
.na-bandeja.bloqueado img { opacity: .45; filter: grayscale(1); }

/* --- Menu Iniciar --- */
.menu-iniciar {
    position: fixed;
    left: 3px;
    bottom: 40px;
    z-index: 250;
    display: flex;
    min-width: 210px;
    background: silver;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
                inset -2px -2px grey, inset 2px 2px #fff,
                2px 2px 4px rgba(0, 0, 0, .4);
    padding: 3px;
}
.menu-iniciar[hidden] { display: none; }
/* A faixa azul lateral, escrita de baixo para cima. */
.menu-iniciar .faixa {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 10px 5px;
    background: linear-gradient(0deg, navy, #1084d0);
    color: #fff;
    letter-spacing: 1px;
}
.menu-iniciar ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.menu-iniciar ul { display: flex; flex-direction: column; }
.menu-iniciar li { display: flex; position: relative; }
.menu-iniciar a,
.menu-iniciar .item {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    padding: 11px 24px 11px 8px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}
/* O item que abre submenu é <button> — assim ele não é link, e o mdi.js não
   tenta transformá-lo em janela. Só precisa perder a cara de botão. */
.menu-iniciar .item {
    background: none;
    border: 0;
    box-shadow: none;
    min-height: 0;
    font: inherit;
    text-align: left;
}
.menu-iniciar a:hover,
.menu-iniciar .item:not(.bloqueado):hover,
.menu-iniciar li.aberto > .item { background: navy; color: #fff; }
.menu-iniciar .item.bloqueado { color: grey; cursor: default; }
.menu-iniciar img { width: 26px; height: 26px; }
.menu-iniciar .separador {
    height: 0;
    margin: 3px 2px;
    border-top: 1px solid grey;
    box-shadow: 0 1px #fff;
}

/* --- Submenus do Iniciar --- */
.menu-iniciar .seta { margin-left: auto; padding-left: 12px; font-size: 9px; }
.menu-iniciar .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -3px;
    min-width: 190px;
    padding: 3px;
    background: silver;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
                inset -2px -2px grey, inset 2px 2px #fff,
                2px 2px 4px rgba(0, 0, 0, .4);
}
.menu-iniciar li.aberto > .submenu { display: flex; }
/* No submenu os ícones são pequenos, como no Programas do Windows. */
.menu-iniciar .submenu a,
.menu-iniciar .submenu .item { padding: 6px 14px 6px 8px; gap: 7px; }
.menu-iniciar .submenu img { width: 16px; height: 16px; }
.menu-iniciar .bloqueado img { opacity: .4; filter: grayscale(1); }
/* O submenu do submenu abre para o mesmo lado, um degrau acima. */
.menu-iniciar .submenu .submenu { top: -3px; }

/* --- Barra de título: mais alta, e colorida sempre --- */
/* O cinza do tema anterior vinha de InactiveCaption, cor de sistema que muda
   quando a janela perde foco. Aqui o gradiente é literal: não desbota. */
.title-bar {
    padding: 5px 3px 5px 6px;
    flex-shrink: 0;
}
.title-bar-text {
    font-size: calc(var(--corpo) + 1px);
    margin-right: 24px;
    flex: 1;
}
.title-bar-controls button {
    min-height: 16px;
    min-width: 18px;
}

/* O ícone do COB.exe na barra de título, como todo form do Delphi tem. */
.icone-titulo {
    width: 16px; height: 16px;
    margin-right: 5px;
    image-rendering: pixelated;
}

/* --- Menu principal: grupo no alto, itens caindo dele ------------------- */
.menu-principal { flex-shrink: 0; }

.menu-barra {
    display: flex;
    list-style: none;
    margin: 0 0 4px;
    padding: 0 0 3px;
    border-bottom: 1px solid grey;
    box-shadow: 0 1px #fff;
}
.menu-grupo { position: relative; }
.menu-grupo > button {
    background: none;
    box-shadow: none;
    border: 1px solid transparent;
    min-width: 0;
    min-height: 0;
    padding: 3px 9px;
    color: inherit;
    text-shadow: none;
}
.menu-grupo > button u { text-underline-offset: 1px; }

/* Aberto pelo teclado ou pelo mouse, o grupo fica rebaixado — é o que o menu
   do Windows faz com o item que está com a lista aberta. */
.menu-grupo:hover > button,
.menu-grupo > button[aria-expanded="true"] {
    border: 1px solid transparent;
    background: navy;
    color: #fff;
}

.menu-lista {
    display: none;
    position: absolute;
    left: 0; top: 100%;
    z-index: 80;
    min-width: 210px;
    margin: 0;
    padding: 2px;
    list-style: none;
    background: silver;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
                inset -2px -2px grey, inset 2px 2px #fff,
                2px 2px 3px rgba(0, 0, 0, .35);
}
.menu-grupo:hover > .menu-lista,
.menu-grupo > button[aria-expanded="true"] + .menu-lista { display: block; }

/* Item alto: a lista do Delphi respira, e clicar no item certo não vira
   pontaria. Só a altura muda — a largura continua a do texto. */
.menu-lista a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px 7px 8px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}
.menu-lista a:hover { background: navy; color: #fff; }
.menu-lista img { width: 16px; height: 16px; image-rendering: pixelated; }
.menu-separador {
    height: 0;
    margin: 3px 2px;
    border-top: 1px solid grey;
    box-shadow: 0 1px #fff;
}

/* --- O corpo da janela do módulo: menu no alto, marca d'água embaixo ---- */
.corpo-modulo {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* A arte sai do Picture.Data do imgMarcaDAgua, no _MenuCob.dfm, com o
   letreiro trocado para Módulo Web. `contain` mantém a proporção: a janela
   nasce do tamanho dela, e quem a redimensiona vê a arte acompanhar em vez
   de ser cortada. */
.marca-dagua {
    flex: 1;
    min-height: 0;
    background: #fff url("../img/fundo-web.jpg") center/contain no-repeat;
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey,
                inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

/* O miolo das pastas de mentira — Meus documentos e Lixeira. Vazias de
   propósito: existem para a área de trabalho parecer uma área de trabalho. */
.pasta {
    display: flex;
    flex: 1;
    min-height: 0;
    margin: 2px;
    background: #fff;
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey,
                inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
.pasta-vazia {
    margin: auto;
    text-align: center;
    color: #808080;
    user-select: none;
}
.pasta-vazia img {
    width: 48px;
    height: 48px;
    opacity: .4;
    filter: grayscale(1);
}
.pasta-vazia p { margin: 10px 0 0; }

/* --- Apps de mentira: Meus documentos, Lixeira, Bloco de notas ---------- */
/* Barra de menu no topo da janela, como Arquivo/Editar do bloco de notas. */
.menu-app {
    display: flex;
    flex-shrink: 0;
    gap: 2px;
    padding: 2px;
    background: silver;
    box-shadow: inset 0 -1px #808080;
}
.menu-app-grupo { position: relative; }
.menu-app .item {
    background: none;
    border: 0;
    box-shadow: none;
    min-height: 0;
    padding: 3px 8px;
    font: inherit;
}
.menu-app .item:hover { background: navy; color: #fff; }
.menu-app-lista {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 10;
    min-width: 170px;
    padding: 2px;
    background: silver;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
                inset -2px -2px grey, inset 2px 2px #fff,
                2px 2px 4px rgba(0, 0, 0, .4);
}
.menu-app-lista.aberto { display: block; }
.menu-app-lista .item { display: block; width: 100%; text-align: left; }

.window-body.app-pasta,
.window-body.app-bloco { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

/* Itens dentro da pasta: ícone em cima, nome embaixo, como no Explorer. */
.itens-pasta {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    padding: 8px;
    overflow: auto;
    flex: 1;
}
.item-arquivo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 84px;
    padding: 6px 4px;
    background: none;
    border: 1px dotted transparent;
    box-shadow: none;
    min-height: 0;
    font: inherit;
    cursor: default;
}
.item-arquivo img { width: 32px; height: 32px; }
.item-arquivo span {
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item-arquivo:hover { border-color: #808080; }
.item-arquivo:hover span,
.item-arquivo:focus span { background: navy; color: #fff; }

/* Bloco de notas: a folha ocupa tudo, sem moldura, letra de máquina. */
.folha-bloco {
    flex: 1;
    min-height: 0;
    margin: 0;
    border: 0;
    padding: 6px 8px;
    resize: none;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.35;
    box-shadow: inset 1px 1px grey, inset -1px -1px #fff;
}

/* Lixeira: uma linha por documento, com Restaurar e Excluir de vez. */
.lista-lixeira { flex: 1; overflow: auto; padding: 4px; }
.linha-lixeira {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 6px;
}
.linha-lixeira:nth-child(2n) { background: rgba(0, 0, 128, .05); }
.nome-lixo { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nome-lixo img { width: 16px; height: 16px; }
.nome-lixo > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acoes-lixo { display: flex; gap: 5px; flex-shrink: 0; }

/* Diálogo do "Novo documento". */
.window-body.app-dialogo { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.app-dialogo input { padding: 4px; }
.acoes-dialogo { display: flex; justify-content: flex-end; gap: 6px; margin-top: auto; }
.acoes-dialogo button { min-width: 84px; min-height: 24px; }

/* Meu computador: a ficha do que está rodando, no formato do "Sobre o
   Windows" — marca à esquerda, dados à direita. */
.sobre {
    display: flex;
    gap: 18px;
    flex: 1;
    min-height: 0;
    padding: 18px 16px;
    align-items: flex-start;
}
.sobre .marca { width: 48px; height: 48px; flex-shrink: 0; }
.sobre .ficha { flex: 1; min-width: 0; }
.sobre h2 {
    margin: 0;
    font-size: calc(var(--corpo) + 7px);
    font-weight: bold;
}
.sobre .sub {
    margin: 0 0 14px;
    padding-bottom: 10px;
    color: navy;
    border-bottom: 1px solid grey;
    box-shadow: 0 1px #fff;
}
.sobre dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 14px;
    margin: 0;
}
.sobre dt { color: #404040; }
.sobre dd { margin: 0; font-weight: bold; overflow-wrap: anywhere; }

/* --- Janelas internas: o menu abre form sobre a área de trabalho -------- */
.area-mdi {
    position: absolute;
    inset: 0;
    pointer-events: none;   /* só as janelas capturam o clique */
    z-index: 50;
}

/* Sem JavaScript a tela vem pela navegação comum: aparece como janela fixa
   sobre a área de trabalho, e o X volta para o menu. */
.janela-servida {
    position: fixed;
    left: 12px; top: 12px; right: 12px; bottom: 42px;
    display: flex;
    flex-direction: column;
    z-index: 20;
}
.janela-servida > .window-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    margin: 6px;
}
.janela-servida > .window-body > * { flex-shrink: 0; }
.janela-servida > .window-body > .tela-cheia { flex: 1; min-height: 0; }
.janela-servida > .status-bar { margin: 0 1px 1px; }
.janela-servida .voltar {
    display: block;
    width: 18px; height: 16px;
    background: silver;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
                inset -2px -2px grey, inset 2px 2px #dfdfdf;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Barra de ferramentas das janelas, como a do Cadastro de Clientes ---- */
/* Botão alto, ícone em cima e rótulo embaixo com a letra de atalho entre
   parênteses. Os ícones são os mesmos da TImageList do menu do COB. */
.ferramentas-delphi {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 4px 2px;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.ferramentas-delphi .botao {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 84px;
    padding: 5px 8px;
    text-decoration: none;
    color: inherit;
    background: silver;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
                inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
.ferramentas-delphi .botao:active,
.ferramentas-delphi .botao:not(.inativo):active {
    box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
                inset -2px -2px #dfdfdf, inset 2px 2px grey;
}
.ferramentas-delphi .botao img {
    width: 32px; height: 32px;
    image-rendering: pixelated;   /* 16px do Delphi dobrado, sem borrar */
}
.ferramentas-delphi .botao.inativo {
    color: grey;
    text-shadow: 1px 1px 0 #fff;
    pointer-events: none;
}
.ferramentas-delphi .botao.inativo img { opacity: .4; }
/* O vão que separa os grupos de botões, como no original. */
.ferramentas-delphi .vao { width: 14px; }
.ferramentas-delphi .separador { flex: 1; }

/* Os dois quadros do alto da tela de licença, lado a lado: o que o cliente
   tem hoje, e o que se vai fazer. Em janela estreita voltam a empilhar. */
.lado-a-lado { display: flex; gap: 6px; flex-shrink: 0; }
.lado-a-lado > fieldset { flex: 1; margin-bottom: 0; }
.lado-a-lado > fieldset.acao { flex: 0 0 260px; }
@media (max-width: 620px) {
    .lado-a-lado { flex-direction: column; }
    .lado-a-lado > fieldset.acao { flex: 1; }
}

/* Renovar licença: rótulo, campo e botão em coluna, alinhados à esquerda.
   Lado a lado o botão alto deixava o campo de data flutuando no meio dele. */
.renovar {
    display: inline-grid;
    gap: 4px;
    justify-items: start;
}
.renovar input[type="date"] { width: 170px; }
.renovar .botao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 170px;
    margin-top: 4px;
    padding: 6px 10px;
}
.renovar .botao img { width: 32px; height: 32px; image-rendering: pixelated; }

/* --- Pesquisa --- */
fieldset.pesquisa { margin-bottom: 6px; }
fieldset.pesquisa legend { color: #a00000; }

/* A caixa do token recém-gerado: aparece uma vez e chama atenção. */
.token-novo { background: #fffbe6; box-shadow: inset -1px -1px #fff, inset 1px 1px #c0b040; }
.token-novo legend { color: #7a4a00; }
.token-linha { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.token-linha code {
    flex: 1;
    padding: 5px 8px;
    background: #fff;
    box-shadow: inset 1px 1px grey, inset -1px -1px #fff;
    font-family: "Lucida Console", "Courier New", monospace;
    word-break: break-all;
}

/* A linha de resumo do filtro dos downloads: o que está aplicado à esquerda,
   o botão Filtrar à direita. */
.filtro-resumo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* O aviso de filtro de data aplicado, com o atalho para removê-lo. */
.filtro-ativo {
    margin: 0 0 6px;
    padding: 4px 8px;
    background: #fffbe6;
    box-shadow: inset -1px -1px #fff, inset 1px 1px #c0b040;
}
.filtro-ativo a { margin-left: 8px; }

/* Formulário de cadastro: rótulo à esquerda, campo à direita, sem a zebra
   de tabela — ali não há linhas para separar, são campos. */
.campos { display: grid; grid-template-columns: max-content 1fr; gap: 7px 10px; align-items: center; }
.campos > label { justify-self: start; }
.campos .dica { color: #444; margin-left: 6px; }
.campos input[type="text"], .campos input[type="password"],
.campos input[type="date"], .campos select { width: 260px; }
.campos.triplo input[type="text"], .campos.triplo select { width: 100%; }
.campos input[type="file"] { width: 100%; }
.campos .largo { width: 100%; max-width: 420px; }

/* Duas ou três colunas de rótulo+campo, para o formulário não virar uma
   coluna comprida com meia tela vazia ao lado. Em janela estreita volta a
   uma. */
.campos.duplo { grid-template-columns: max-content minmax(180px, 1fr) max-content minmax(180px, 1fr); }
.campos.duplo .ocupa-linha { grid-column: 2 / -1; }

.campos.triplo {
    grid-template-columns: max-content minmax(150px, 1fr) max-content minmax(150px, 1fr) max-content minmax(150px, 1fr);
}
/* Quebra a linha: o campo seguinte recomeça na primeira coluna. */
.campos.triplo .nova-linha { grid-column-start: 1; }
/* Botão sem rótulo: ocupa o par inteiro da coluna onde caiu. */
.campos.triplo .ocupa-par { grid-column: span 2; justify-self: start; }

@media (max-width: 860px) {
    .campos.duplo,
    .campos.triplo { grid-template-columns: max-content 1fr; }
    .campos.duplo .ocupa-linha,
    .campos.triplo .ocupa-par { grid-column: auto; }
    .campos.triplo .nova-linha { grid-column-start: auto; }
}

/* O quadro que não é a grade tem a altura do que há dentro dele; quem estica
   até o rodapé é o último, que é sempre a lista. */
.tela-cheia > fieldset:not(:last-of-type) { flex: 0 0 auto; margin-bottom: 6px; }


/* --- Grade densa, no espírito do DBGrid --- */
table.grade { width: 100%; border-collapse: collapse; background: #fff; }
table.grade th, table.grade td {
    padding: 3px 6px;
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid #c0c0c0;
}
table.grade th {
    position: sticky; top: 0; z-index: 1;
    background: silver;
    font-weight: normal;
    border-bottom: 1px solid grey;
    box-shadow: inset -1px -1px grey, inset 1px 1px #fff;
}
table.grade td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grade tbody tr:nth-child(2n) { background: #f2f2f2; }

/* O cabeçalho escrito em vermelho é do Versatho. O corpo é branco: o verde
   da grade original não ajudava a ler nada. */
.sunken-panel table.grade th { color: #a00000; }

/* Cliente com fatura vencida em aberto. O vermelho é bem claro de propósito:
   marca a linha sem competir com o texto nem virar alarme. */
table.grade tbody tr.devendo { background: #fbe4e4; }
table.grade tbody tr.devendo:nth-child(2n) { background: #f6dada; }

/* ⚠️ O hover precisa da mesma força do rosa das linhas pares: `tr:hover`
   sozinho perde para `tr.devendo:nth-child(2n)`, e metade das linhas em
   vermelho ficava sem realce ao passar o mouse. */
table.grade tbody tr:hover,
table.grade tbody tr.devendo:hover { background: navy; color: #fff; }
table.grade tbody tr:hover a { color: #fff; }
table.grade a { color: navy; }

/* A coluna de ações: cada botão é um <form> próprio, e sem isto cada um
   quebraria linha. */
table.grade td.acoes { display: flex; align-items: center; gap: 6px; }
table.grade td.acoes form { display: inline; }
table.grade td.acoes button { min-width: 0; padding: 1px 8px; }

/* Link com cara de botão: para um <a> ficar par com um <button> de verdade
   ao lado — o Cancelar do formulário, o Baixar da lista de módulos. */
.botao-link {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 12px;
    text-decoration: none;
    color: inherit;
    background: silver;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
                inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
.botao-link:active {
    box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
                inset -2px -2px #dfdfdf, inset 2px 2px grey;
}

/* O rodapé de totais: fica colado embaixo enquanto a grade rola. */
table.grade tfoot td {
    position: sticky; bottom: 0; z-index: 1;
    background: silver;
    font-weight: bold;
    border-top: 1px solid grey;
    box-shadow: inset 1px 1px #fff;
}

/* .sunken-panel é do 98.css e substitui a antiga .rolagem. Esta classe faz
   a grade ocupar toda a altura que sobrar, em vez de uma fração da tela. */
.painel-cheio { flex: 1; min-height: 0; }
.tela-cheia { display: flex; flex-direction: column; }
.tela-cheia > fieldset { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-bottom: 0; }

/* --- Barra de ferramentas das telas: filtros e busca --- */
.ferramentas {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.ferramentas input[type="search"], .ferramentas input[type="text"] { width: 220px; }
.ferramentas .separador { flex: 1; }
.ferramentas .aba {
    padding: 3px 10px;
    text-decoration: none;
    color: inherit;
    border: 1px outset;
    background: silver;
}
.ferramentas .aba[aria-current="page"] { border: 1px inset; font-weight: bold; }
/* A aba de "aguardando liberação" chama atenção quando há o que liberar. */
.ferramentas .aba.destaque { color: #8b0000; font-weight: bold; }
.ferramentas .contagem { color: #444; }

/* --- Topo das Notificações: cards à esquerda, filtro à direita --- */
.painel-topo {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 6px;
}
/* Os cards crescem para preencher a largura sobrando à esquerda do filtro. */
.painel-topo .indicadores { flex: 1; margin-bottom: 0; }
.painel-topo .filtro-topo { flex: 0 0 230px; margin: 0; }

/* --- Indicadores --- */
.indicadores { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.indicador {
    flex: 1 1 0;
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey;
    background: #fff; padding: 5px 12px; min-width: 92px;
    display: flex; flex-direction: column; justify-content: center;
}
.indicador b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.indicador span { color: #444; }
.indicador a { color: inherit; text-decoration: none; display: block; }

/* O painel de filtro: o resumo do que está aplicado e o botão que abre o
   diálogo avançado. */
.filtro-topo { display: flex; }
.filtro-resumo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}
.filtro-resumo dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 8px;
    margin: 0;
}
.filtro-resumo dt { color: #444; }
.filtro-resumo dd { margin: 0; font-weight: bold; }
.filtro-resumo .filtrar { margin-top: auto; align-self: flex-start; }

/* --- Barra de status, colada embaixo --- */
.status-bar { margin: 4px 1px 0; flex-shrink: 0; }
.status-bar-field:first-child { flex-grow: 6; }
.status-bar-field[data-relogio] { flex-grow: 0; white-space: nowrap; }

fieldset { margin: 0 0 8px; padding: 6px 8px; }
legend { padding: 0 4px; }

.vazio { padding: 24px; text-align: center; color: #444; }
.ok { color: #005500; } .erro { color: #8b0000; }
.aviso { color: #7a4a00; }
.bom { color: #005500; }

/* O LED da tela de Rede: pisca enquanto o modal está aberto, para dar a
   sensação de que a conexão está sendo observada de verdade. Verde quando vai
   bem, âmbar e mais rápido durante a medição, vermelho se caiu. */
.led-rede {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 7px;
    border-radius: 50%;
    background: #00c000;
    box-shadow: 0 0 4px #00c000;
    vertical-align: baseline;
    animation: led-pulso 1.6s ease-in-out infinite;
}
.led-rede.medindo { background: #e0a000; box-shadow: 0 0 5px #e0a000; animation-duration: .5s; }
.led-rede.instavel { background: #e0a000; box-shadow: 0 0 4px #e0a000; }
.led-rede.caiu { background: #d00000; box-shadow: 0 0 5px #d00000; animation-duration: 1s; }
@keyframes led-pulso {
    0%, 100% { opacity: 1; }
    50%      { opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
    .led-rede { animation: none; }
}

.janela-mdi {
    position: absolute;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    min-width: 320px;
    min-height: 160px;
}
.janela-mdi .title-bar { cursor: move; user-select: none; }
.janela-mdi.inativa .title-bar { background: linear-gradient(90deg, #808080, #b5b5b5); }
.janela-mdi > .window-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    margin: 6px;
    min-height: 0;
}
/* O fragmento é só um invólucro: precisa repassar a altura para a tela que
   está dentro, senão a grade de Duplicatas não sabe até onde crescer. */
.janela-mdi .fragmento-conteudo {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.janela-mdi .fragmento-conteudo > * { flex-shrink: 0; }
.janela-mdi .fragmento-conteudo > .tela-cheia { flex: 1; min-height: 0; }
.janela-mdi > .status-bar { margin: 0 1px 1px; }
/* Minimizada some da mesa e fica só na barra de tarefas, como no Windows —
   não vira barra de título solta no canto. */
.janela-mdi.minimizada { display: none; }
.janela-mdi .redimensiona {
    position: absolute;
    right: 0; bottom: 0;
    width: 14px; height: 14px;
    cursor: nwse-resize;
}
.carregando { padding: 24px; text-align: center; color: #444; }

/* --- Quando o servidor barra a tela --- */
/* O menu não deixa clicar no que é fechado, então isto só aparece se alguém
   chegar pelo endereço direto: a janela mostra o 403 em vez de dizer que não
   foi possível abrir. */
.veu-bloqueio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    background: #4a4a4a;
    color: #f0f0f0;
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey,
                inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
.veu-bloqueio b { font-size: calc(var(--corpo) + 4px); }
.veu-bloqueio p { margin: 0; }
.veu-bloqueio .quem { color: #c0c0c0; }

/* No menu, o item fechado é cinza e não responde a nada — como item
   desabilitado do Windows. Continua visível para não fazer a pessoa procurar
   uma tela que existe. */
.menu-lista .bloqueado {
    display: flex;
    align-items: center;
    padding: 7px 16px 7px 8px;
    white-space: nowrap;
    color: grey;
    text-shadow: 1px 1px 0 #fff;
    cursor: default;
    user-select: none;
}