/* TSistemas Tickets — folha de estilos única.

   Regras da casa, para tudo ficar proporcional:
   - Um tema são QUATRO cores: fundo da página, fundo dos quadros, texto e cor principal
     (--t-fundo, --t-quadro, --t-texto, --cor-base). Todas as outras derivam destas com color-mix(),
     por isso qualquer tema, pronto ou personalizado, fica coerente sem mais regras.
     Os temas prontos e a escolha de cada pessoa estão em wwwroot/js/tema.js.
   - Todos os quadros (cartões, filtros, tabelas, formulários, comentários) usam a mesma superfície:
     mesmo fundo, mesma moldura, mesmo raio e a mesma margem interior (ver "Quadros").
   - Campos e botões têm todos a mesma altura (--campo), para alinharem lado a lado.
   - Espaços só da escala: .25 / .5 / .75 / 1 / 1.25 / 2 rem. */

:root {
    color-scheme: light;

    /* As quatro cores do tema (aqui: "TSistemas claro"). */
    --t-fundo: #f7f7f9;
    --t-quadro: #ffffff;
    --t-texto: #14151a;
    --cor-base: #6d3fff;

    /* Tudo o resto deriva delas. */
    --fundo: var(--t-fundo);
    --superficie: var(--t-quadro);
    --superficie-2: color-mix(in srgb, var(--t-texto) 5%, var(--t-quadro));
    --texto: var(--t-texto);
    --texto-2: color-mix(in srgb, var(--t-texto) 78%, var(--t-quadro));
    --texto-suave: color-mix(in srgb, var(--t-texto) 58%, var(--t-quadro));
    --linha: color-mix(in srgb, var(--t-texto) 12%, var(--t-quadro));
    --linha-forte: color-mix(in srgb, var(--t-texto) 22%, var(--t-quadro));
    /* Contorno dos quadros: mais marcado do que as linhas de dentro, para cada quadro se destacar do fundo
       em qualquer tema (num tema claro, quadros brancos sobre fundo quase branco mal se distinguiam). */
    --moldura: color-mix(in srgb, var(--t-texto) 28%, var(--t-quadro));
    --sombra-quadro: 0 1px 2px rgb(0 0 0 / .07);
    --destaque: color-mix(in srgb, var(--cor-base) 78%, var(--t-texto));
    --destaque-forte: color-mix(in srgb, var(--cor-base) 62%, var(--t-texto));
    --destaque-fundo: color-mix(in srgb, var(--cor-base) 14%, var(--t-quadro));
    --sobre-destaque: #ffffff;
    --foco: color-mix(in srgb, var(--cor-base) 40%, transparent);
    --erro: color-mix(in srgb, #e0425c 70%, var(--t-texto));
    --sucesso: color-mix(in srgb, #12a37a 70%, var(--t-texto));

    /* Tons das etiquetas: fundo (-f) e texto (-t). O violeta segue a cor principal. */
    --tom-violeta-f: color-mix(in srgb, var(--cor-base) 16%, var(--t-quadro));
    --tom-violeta-t: color-mix(in srgb, var(--cor-base) 62%, var(--t-texto));
    --tom-azul-f: color-mix(in srgb, #3b6fe0 16%, var(--t-quadro));
    --tom-azul-t: color-mix(in srgb, #3b6fe0 62%, var(--t-texto));
    --tom-verde-f: color-mix(in srgb, #12a37a 16%, var(--t-quadro));
    --tom-verde-t: color-mix(in srgb, #12a37a 62%, var(--t-texto));
    --tom-ambar-f: color-mix(in srgb, #e89a0c 18%, var(--t-quadro));
    --tom-ambar-t: color-mix(in srgb, #c97a00 62%, var(--t-texto));
    --tom-vermelho-f: color-mix(in srgb, #e0425c 16%, var(--t-quadro));
    --tom-vermelho-t: color-mix(in srgb, #e0425c 62%, var(--t-texto));
    --tom-neutro-f: color-mix(in srgb, var(--t-texto) 9%, var(--t-quadro));
    --tom-neutro-t: color-mix(in srgb, var(--t-texto) 70%, var(--t-quadro));

    --raio: 10px;
    --raio-pequeno: 7px;
    --campo: 2.3rem;
    --margem-quadro: 1rem 1.25rem;
    --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --fonte-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
    --fonte-mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
}

/* "TSistemas escuro": por preferência do sistema (tema automático) ou por escolha. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema]) {
        color-scheme: dark;
        --t-fundo: #14171f;
        --t-quadro: #1c202b;
        --t-texto: #f8f8fa;
    }
}
:root[data-tema="escuro"] {
    color-scheme: dark;
    --t-fundo: #14171f;
    --t-quadro: #1c202b;
    --t-texto: #f8f8fa;
}

/* ---- Base ---- */

* { box-sizing: border-box; }
/* O que está marcado como escondido fica escondido, mesmo que a classe dele lhe dê outra forma (uma etiqueta, um botão). */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.45;
    color: var(--texto);
    background: var(--fundo);
}

a { color: var(--destaque); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; }

h1, h2 { font-family: var(--fonte-titulo); letter-spacing: -.01em; }
h1 { font-size: 1.55rem; font-weight: 650; line-height: 1.2; margin: 0 0 1.25rem; }
h2 { font-size: 1.05rem; font-weight: 650; margin: 2rem 0 .75rem; }
small { color: var(--texto-suave); }
code { padding: .05rem .3rem; font-family: var(--fonte-mono); font-size: .88em; background: var(--superficie-2); border-radius: 4px; }

.vazio { color: var(--texto-suave); }
.nowrap { white-space: nowrap; }
.texto { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Tabelas escritas no texto (linhas com "|", ver TextoComTabelas): deslizam para o lado se não couberem. */
.tabela-texto { max-width: 100%; margin: .4rem 0; overflow-x: auto; white-space: normal; }
.tabela-texto table { border-collapse: collapse; font-size: .92em; }
.tabela-texto th, .tabela-texto td { padding: .3rem .65rem; text-align: left; vertical-align: top; overflow-wrap: normal; border: 1px solid var(--moldura); }
.tabela-texto th { font-weight: 600; background: var(--superficie-2); }
.tabela-texto tr:nth-child(even) td { background: color-mix(in srgb, var(--superficie-2) 55%, transparent); }
/* "Inserir tabela", por baixo das caixas de texto (tabela.js). */
.barra-tabela { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .3rem; font-size: .85rem; }
.barra-tabela .ligacao { color: var(--destaque); }
.barra-tabela small { color: var(--texto-suave); }

/* ---- Topo ---- */

.topo {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    padding: 0 1.25rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--moldura);
}
.marca { display: flex; align-items: center; gap: .5rem; padding: .6rem 0; font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 700; color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca span { font-weight: 500; color: var(--destaque); }
.marca img { width: 1.9rem; height: 1.9rem; }

.menu { display: flex; flex: 1; flex-wrap: wrap; align-items: center; }
.menu a, .menu summary {
    padding: .85rem .7rem;
    color: var(--texto-2);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.menu a:hover, .menu summary:hover { color: var(--texto); text-decoration: none; }
.menu a.ativa, .menu summary.ativa { color: var(--destaque); font-weight: 600; border-bottom-color: var(--destaque); }
/* Número ao lado de uma entrada do menu (lembretes a avisar). */
.conta-menu {
    display: inline-block;
    min-width: 1.25rem;
    margin-left: .35rem;
    padding: 0 .35rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    color: var(--sobre-destaque);
    background: var(--cor-base);
    border-radius: 999px;
}
.conta-menu[hidden] { display: none; }
.menu .separador { width: 1px; height: 1.2rem; margin: 0 .5rem; background: var(--linha-forte); }

/* Botão do menu (hamburger, antes do Painel): no topo ficam o Painel, os tickets e as reparações; o resto (licenças,
   tarefas, clientes, lembretes, administração…) abre por baixo deste botão, em qualquer ecrã. */
.menu-mais { position: relative; }
.menu-botao {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .85rem .7rem;
    font: inherit;
    color: var(--texto-2);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.menu-botao:hover { color: var(--texto); }
.menu-botao .hamburguer { width: 1rem; margin: 5px 0; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
.menu-botao.ativa, .menu.aberto .menu-botao { color: var(--destaque); }
.menu-botao.ativa { border-bottom-color: var(--destaque); font-weight: 600; }
.menu-botao .conta-menu { margin-left: 0; }
.menu-resto {
    display: none;
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    z-index: 30;
    min-width: 15rem;
    max-width: calc(100vw - 1rem);
    flex-direction: column;
    padding: .35rem;
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.menu.aberto .menu-resto { display: flex; }
.menu-resto a, .menu-resto summary { padding: .55rem .7rem; border: 0; border-radius: var(--raio-pequeno); }
.menu-resto a:hover, .menu-resto summary:hover { background: var(--superficie-2); }
.menu-resto a.ativa, .menu-resto summary.ativa { border: 0; background: var(--destaque-fundo); }
.menu-resto .separador { width: auto; height: 1px; margin: .3rem .4rem; }
/* A administração abre dentro do próprio menu, um pouco recolhida. */
.menu-resto .menu-admin { position: static; }
.menu-resto .menu-admin-lista { position: static; min-width: 0; padding: 0 0 0 .8rem; background: none; border: 0; box-shadow: none; }
/* Nomes compridos no ecrã largo, curtos no telemóvel ("Tickets de clientes" → "Clientes"). */
.so-estreito { display: none; }
.hamburguer { display: block; width: 1.25rem; height: 2px; margin: 6px 0; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }

/* Menu de administração (abre para baixo). */
.menu-admin { position: relative; }
.menu-admin summary { display: block; cursor: pointer; list-style: none; }
.menu-admin summary::-webkit-details-marker { display: none; }
.menu-admin summary::after { content: " ▾"; color: var(--texto-suave); }
.menu-admin-lista {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    padding: .35rem;
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.menu-admin-lista a { padding: .45rem .7rem; border: 0; border-radius: var(--raio-pequeno); }
.menu-admin-lista a:hover { background: var(--superficie-2); }
.menu-admin-lista a.ativa { border: 0; background: var(--destaque-fundo); }

.conta { display: flex; align-items: center; gap: 1rem; }
/* Ticket novo: o cliente escrito já existe ou vai ser criado (ficha-cliente.js). */
.cliente-ficha-novo { color: var(--destaque); font-weight: 600; }
/* Caixa de pesquisa do menu (pesquisa.js): a lista dos encontrados abre por baixo dela. */
.pesquisa-topo { position: relative; flex: 0 1 16rem; min-width: 7rem; }
/* Ecrã largo: o topo fica numa linha e, se apertar, encolhe a caixa (e, no limite, o nome da conta), não o menu
   nem a conta. Abaixo disso (portátil pequeno, tablet) a caixa vai para uma linha própria, como no telemóvel. */
@media (max-width: 1199px) { .pesquisa-topo { flex: 1 1 100%; order: 4; padding: 0 0 .5rem; } .pesquisa-topo-lista { left: 0; right: auto; } }
@media (min-width: 1200px) {
    .topo { flex-wrap: nowrap; }
    .menu { flex: 1 0 auto; }
    .menu-conta summary { display: block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
}
.pesquisa-topo input { width: 100%; min-height: 2.1rem; margin: 0; padding: .35rem .7rem; font-size: .92rem; }
.pesquisa-topo-lista { position: absolute; top: calc(100% + .35rem); right: 0; z-index: 30; width: min(30rem, 92vw); max-height: 70vh; overflow-y: auto;
    padding: .35rem; background: var(--superficie); border: 1px solid var(--moldura); border-radius: var(--raio-pequeno); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.pesquisa-topo-lista ul { list-style: none; margin: 0; padding: 0; }
.pesquisa-topo-lista li a { display: flex; flex-direction: column; gap: .1rem; padding: .45rem .6rem; border-radius: var(--raio-pequeno); color: var(--texto); }
.pesquisa-topo-lista li a:hover, .pesquisa-topo-lista li a:focus { background: var(--superficie-2); text-decoration: none; outline: none; }
.pesquisa-topo-lista .linha-1 { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.pesquisa-topo-lista .assunto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pesquisa-topo-lista small { color: var(--texto-suave); }
.pesquisa-topo-lista .vazio { margin: .4rem .6rem; }
.pesquisa-topo-lista .ver-todos { display: block; margin-top: .25rem; padding: .45rem .6rem; border-top: 1px solid var(--linha); font-size: .9rem; }
/* Menu da conta (assinaturas, password, sair): o mesmo menu que o de administração, alinhado à direita. */
.menu-conta summary { padding: .5rem 0; color: var(--texto-2); white-space: nowrap; }
.menu-conta summary:hover { color: var(--texto); }
.menu-conta summary.ativa { color: var(--destaque); font-weight: 600; }
.menu-conta .menu-admin-lista { left: auto; right: 0; z-index: 30; }
.menu-conta .menu-admin-lista a { color: var(--texto-2); }
.menu-admin-lista button {
    width: 100%;
    padding: .45rem .7rem;
    font: inherit;
    text-align: left;
    color: var(--texto-2);
    background: none;
    border: 0;
    border-radius: var(--raio-pequeno);
    cursor: pointer;
}
.menu-admin-lista button:hover { color: var(--texto); background: var(--superficie-2); }
.conta form { margin: 0; }
.conta a { color: var(--texto-2); }
.conta a.ativa { color: var(--destaque); font-weight: 600; }
.ligacao { padding: 0; font: inherit; color: var(--texto-2); background: none; border: 0; cursor: pointer; }
.ligacao:hover { color: var(--texto); }
.botao-tema {
    display: flex;
    align-items: center;
    list-style: none;
    height: 1.9rem;
    padding: 0 .7rem;
    font: inherit;
    font-size: .85rem;
    color: var(--texto-2);
    background: var(--superficie-2);
    border: 1px solid var(--linha);
    border-radius: 999px;
    cursor: pointer;
}
.botao-tema:hover { color: var(--texto); border-color: var(--linha-forte); }
.botao-tema::-webkit-details-marker { display: none; }

/* Aparência: modo e cor, guardados em cada computador. */
.menu-aparencia { position: relative; }
.aparencia {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 30;
    width: 17rem;
    padding: 1rem;
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.aparencia h3 { margin: 0 0 .45rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.aparencia small { display: block; margin-top: .8rem; }
.aparencia select { margin: 0 0 1rem; }
.cores-tema { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.cor-campo {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 2.1rem;
    padding: 0 .5rem;
    font: inherit;
    font-size: .85rem;
    color: var(--texto-2);
    background: transparent;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pequeno);
    cursor: pointer;
}
.cor-campo:hover { color: var(--texto); background: var(--superficie-2); }
.cor-campo[aria-expanded=true] { color: var(--texto); border-color: var(--destaque); background: var(--destaque-fundo); }
.cor-campo i { flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--linha-forte); background: var(--amostra); }

/* Seletor de cor próprio (em vez da janela de cores do sistema): quadrado de tom, barra de matiz, código. */
.seletor-cor { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--linha); }
.seletor-cor[hidden] { display: none; }
.sv {
    position: relative;
    height: 8.5rem;
    border-radius: var(--raio-pequeno);
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, hsl(var(--matiz, 0) 100% 50%));
    cursor: crosshair;
    touch-action: none;
}
.sv .mira {
    position: absolute;
    width: .9rem;
    height: .9rem;
    margin: -.45rem 0 0 -.45rem;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
    pointer-events: none;
}
.aparencia input[type=range].matiz {
    width: 100%;
    height: .8rem;
    min-height: 0;
    margin: .7rem 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.matiz::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: 1rem; border: 2px solid #fff; border-radius: 50%; background: hsl(var(--matiz, 0) 100% 50%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.matiz::-moz-range-thumb { width: .8rem; height: .8rem; border: 2px solid #fff; border-radius: 50%; background: hsl(var(--matiz, 0) 100% 50%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.linha-cor { display: flex; align-items: center; gap: .5rem; }
.aparencia .linha-cor input { width: 6.2rem; min-height: 2rem; margin: 0; font-family: var(--fonte-mono); font-size: .85rem; }
.amostras { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.amostra { width: 1.35rem; height: 1.35rem; padding: 0; border: 1px solid var(--linha-forte); border-radius: 50%; background: var(--amostra); cursor: pointer; }
.amostra:hover { transform: scale(1.15); }
.aparencia .ligacao { font-size: .85rem; color: var(--destaque); }
.aparencia .ligacao:hover { text-decoration: underline; }
.aparencia .repor-tudo { display: block; margin-top: .8rem; }

/* ---- Página ---- */

.conteudo { max-width: 1440px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }
/* Páginas de formulário e de detalhe são mais estreitas e ficam centradas, em vez de encostadas a um canto. */
.conteudo:has(> .formulario.estreito), .conteudo:has(> .cartao-simples.estreito) { max-width: 600px; }
.conteudo:has(> .formulario.medio), .conteudo:has(> .pagina-media) { max-width: 940px; }
.conteudo:has(> .duas-colunas) { max-width: 1240px; }
.conteudo.centrado { display: flex; flex-direction: column; align-items: center; padding-top: 12vh; }

.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.cabecalho h1 { margin: .15rem 0 0; }

/* ---- Quadros: a mesma superfície em todo o lado ---- */

.cartao, .cartao-simples, .filtros, .caixa, .comentario, .formulario.estreito, .formulario.medio {
    padding: var(--margem-quadro);
    background: var(--superficie);
    border: 1px solid var(--moldura);
    border-radius: var(--raio);
    box-shadow: var(--sombra-quadro);
}
.cartao-simples, .filtros, .comentario { margin-bottom: 1rem; }
.cartao-simples.estreito { max-width: none; }

/* Cartões do painel */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; }
.cartao { display: block; color: var(--texto); }
a.cartao:hover { border-color: var(--destaque); text-decoration: none; }
.cartao h2 { margin: .2rem 0 .25rem; font-size: 1rem; color: var(--texto); }
.cartao p { margin: 0; color: var(--texto-suave); }
.numero-grande { display: block; font-family: var(--fonte-titulo); font-size: 2.4rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--destaque); }

/* Página de entrada */
.caixa { width: 100%; max-width: 380px; padding: 1.75rem; }
.caixa h1 { margin-bottom: .75rem; font-size: 1.05rem; font-weight: 600; text-align: center; color: var(--texto-suave); }
.logo-entrada { display: block; width: 210px; height: auto; margin: .25rem auto 1rem; }

/* O logótipo tem duas versões: a original (letras escuras) e a de letras claras, para o modo escuro. */
.logo-fundo-escuro { display: none; }
:root[data-tema="escuro"] .logo-fundo-claro { display: none; }
:root[data-tema="escuro"] .logo-fundo-escuro { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema]) .logo-fundo-claro { display: none; }
    :root:not([data-tema]) .logo-fundo-escuro { display: block; }
}

/* Painel: quadros com listas curtas do que há para fazer. */
.acoes-rapidas { display: flex; flex-wrap: wrap; gap: .5rem; }
.quadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 1rem; align-items: start; margin-top: 1rem; }
.quadros > .cartao-simples { margin-bottom: 0; }
.titulo-quadro { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.titulo-quadro h2 { margin: 0; }
.linhas { list-style: none; margin: 0; padding: 0; }
.linhas li { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--linha); }
.linhas .ref { flex: none; min-width: 3.9rem; text-align: center; }
.linhas .principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.linhas .principal a, .linhas .principal small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linhas .principal a { color: var(--texto); font-weight: 600; }
.linhas .principal a:hover { color: var(--destaque); }
.etiquetas { display: flex; flex: none; gap: .35rem; }

/* Duas colunas (ticket, reparação) */
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .duas-colunas { grid-template-columns: minmax(0, 1fr); } }

/* ---- Tabelas ---- */

.tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--superficie);
    border: 1px solid var(--moldura);
    border-radius: var(--raio);
    box-shadow: var(--sombra-quadro);
    overflow: hidden;
}
.tabela th, .tabela td { padding: .6rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.tabela th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); background: var(--superficie-2); white-space: nowrap; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela tr.inativo td, .tabela tr.rejeitado td { color: var(--texto-suave); }
.tabela td.assunto { min-width: 260px; }
.tabela form { margin: 0; }
/* Linha de grupo (prateleira): uma etiqueta, como as das prateleiras. */
.tabela tr.grupo td, .tabela tbody tr.grupo:hover td {
    padding: .45rem .85rem;
    font-family: var(--fonte-mono);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-2);
    background: var(--superficie-2);
}
/* Remetentes: as ações de cada linha (botões do endereço e, por baixo, as do domínio). */
.tabela.remetentes td { vertical-align: middle; }
.acoes-regra form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.acoes-regra .do-dominio { margin-top: .35rem; gap: .3rem; font-size: .8rem; color: var(--texto-suave); }
.acoes-regra .ligacao { font-size: .85rem; color: var(--destaque); }
.acoes-regra .do-dominio .ligacao { font-size: inherit; }
.acoes-regra .ligacao:hover { text-decoration: underline; }
.botao.perigo { color: var(--tom-vermelho-t); background: transparent; border-color: color-mix(in srgb, var(--tom-vermelho-t) 45%, transparent); }
.botao.perigo:hover { background: var(--tom-vermelho-f); border-color: var(--tom-vermelho-t); }
.resumo { display: block; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Referências (TS-12, nº de assistência): como a etiqueta colada no equipamento ---- */

.ref, h1 .numero {
    display: inline-block;
    padding: .05rem .4rem;
    font-family: var(--fonte-mono);
    font-size: .86em;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--texto);
    background: var(--superficie-2);
    border: 1px solid var(--linha-forte);
    border-radius: 5px;
}
a.ref:hover { color: var(--destaque); border-color: var(--destaque); text-decoration: none; }
h1 .numero { margin-right: .35rem; font-size: .7em; vertical-align: .12em; color: var(--texto-2); }

/* ---- Formulários ---- */

.formulario { display: flex; flex-direction: column; }
.formulario label, .filtros label { font-size: .85rem; font-weight: 600; color: var(--texto-2); }
.formulario label { margin-top: 1rem; }
.formulario > label:first-child,
.formulario > .linha:first-child label,
.formulario > .aviso:first-child + label,
.formulario > .aviso:first-child + .linha label { margin-top: 0; }
.formulario small { margin-top: .3rem; }
.formulario .caixa-selecao { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 400; color: var(--texto); }
.formulario > .botao { align-self: flex-start; margin-top: 1.25rem; }
.caixa.formulario > .botao, .formulario.cartao-simples > .botao { align-self: stretch; }

/* :where() mantém a regra geral fraca, para as exceções (ex.: campos da tabela de prazos) a poderem ajustar. */
:where(input:not([type=checkbox], [type=radio], [type=file], [type=hidden])), select, textarea {
    width: 100%;
    min-height: var(--campo);
    margin-top: .3rem;
    padding: .4rem .65rem;
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pequeno);
}
textarea { line-height: 1.45; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--texto-suave); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--foco); outline-offset: 0; border-color: var(--destaque); }
input[type=checkbox] { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--destaque); }
input[type=file] { margin-top: .3rem; font: inherit; font-size: .9rem; color: var(--texto-2); }
input[type=file]::file-selector-button {
    height: 2rem;
    margin-right: .6rem;
    padding: 0 .75rem;
    font: inherit;
    color: var(--texto);
    background: var(--superficie-2);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pequeno);
    cursor: pointer;
}

.input-validation-error { border-color: var(--erro) !important; }
.formulario .dica-teclado { margin-top: 1rem; }
.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }
.linha > div { display: flex; flex-direction: column; }
/* Bloco de campos que aparece conforme uma escolha (mostrar.js): por dentro, igual ao resto do formulário. */
.formulario > div[data-so-com] { display: flex; flex-direction: column; }
.erro-campo { font-size: .85rem; color: var(--erro); }
.acoes { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }

/* Botões: todos com a altura dos campos. */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--campo);
    padding: 0 1.1rem;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    color: var(--sobre-destaque);
    background: var(--cor-base);
    border: 1px solid transparent;
    border-radius: var(--raio-pequeno);
    cursor: pointer;
}
.botao:hover { background: color-mix(in srgb, var(--cor-base) 84%, var(--t-texto)); text-decoration: none; }
.botao.secundario { color: var(--destaque); background: transparent; border-color: var(--linha-forte); }
.botao.secundario:hover { background: var(--destaque-fundo); border-color: var(--destaque); }
.botao.pequeno { min-height: 1.9rem; padding: 0 .7rem; font-size: .85rem; }

/* Filtros: um quadro com os campos alinhados pela base. */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.filtros label { display: flex; flex-direction: column; }
.filtros select, .filtros input:not([type=hidden]) { min-width: 140px; }
.filtros input.largo { min-width: 320px; }
.filtros > a { line-height: var(--campo); }
/* Guardar ou esquecer a filtragem da pessoa: discreto, ao lado de "Limpar". */
.filtro-guardado { line-height: var(--campo); font-size: .9rem; color: var(--texto-2); }
.filtro-guardado:empty { display: none; }
.filtro-guardado .ligacao { color: var(--destaque); }
/* Enquanto a lista filtrada não chega (filtrar.js), a anterior fica esbatida. */
.a-filtrar #lista-resultados { opacity: .55; transition: opacity .15s .2s; }
.filtros > .vazio { line-height: var(--campo); }

/* Dois quadros de filtros na mesma linha (pesquisa e nova regra, nos remetentes). */
.filtros-lado-a-lado { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.filtros-lado-a-lado > .filtros { flex: 1 1 460px; }
.filtros-lado-a-lado .filtros label { flex: 1 1 180px; }
.filtros-lado-a-lado input[type=text] { width: 100%; min-width: 0; }

.separadores { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--linha); }
.separadores a { margin-bottom: -1px; padding: .5rem .9rem; color: var(--texto-suave); border-bottom: 2px solid transparent; }
.separadores a:hover { color: var(--texto); text-decoration: none; }
.separadores a.ativa { color: var(--destaque); font-weight: 600; border-bottom-color: var(--destaque); }

.paginacao { display: flex; justify-content: space-between; margin-top: 1rem; }
.paginacao span > * { margin-left: .8rem; }

/* ---- Avisos ---- */

.aviso { margin-bottom: 1rem; padding: .7rem 1rem; border-radius: var(--raio); }
.aviso.erro { color: var(--tom-vermelho-t); background: var(--tom-vermelho-f); }
.aviso.sucesso { color: var(--tom-verde-t); background: var(--tom-verde-f); }
.aviso.alerta { color: var(--tom-ambar-t); background: var(--tom-ambar-f); }
.aviso.validation-summary-valid { display: none; }
.aviso ul { margin: 0; padding-left: 1.1rem; }
.aviso .acoes { margin-top: .6rem; }
.aviso a { color: inherit; text-decoration: underline; }

/* ---- Etiquetas ---- */

.etiqueta {
    display: inline-block;
    padding: .1rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border-radius: 999px;
    color: var(--tom-neutro-t);
    background: var(--tom-neutro-f);
}
.estado-novo, .lembrete-poravisar { color: var(--tom-violeta-t); background: var(--tom-violeta-f); }
.estado-emcurso, .reparacao-emreparacao, .lembrete-avisado { color: var(--tom-azul-t); background: var(--tom-azul-f); }
.estado-aguardacliente, .lembrete-pendentecliente, .prioridade-alta, .reparacao-semreparacaoporentregar, .sla-aacabar { color: var(--tom-ambar-t); background: var(--tom-ambar-f); }
.estado-resolvido, .reparacao-reparadoporentregar, .sla-dentrodoprazo, .sla-cumprido, .regra-autorizado, .lembrete-aceite { color: var(--tom-verde-t); background: var(--tom-verde-f); }
.prioridade-urgente, .sla-ematraso, .sla-falhado, .regra-bloqueado, .lembrete-recusado, .lembrete-vencido { color: var(--tom-vermelho-t); background: var(--tom-vermelho-f); }
.estado-rejeitado { text-decoration: line-through; }
.prioridade-baixa { color: var(--texto-suave); }

/* Biometria: um telemóvel por linha, com o botão de retirar à direita. */
.telemovel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linha); }
.telemovel small { display: block; margin-top: .15rem; }
.telemovel .ligacao { color: var(--destaque); }
.formulario [data-biometria-ativar] { display: flex; flex-direction: column; margin-top: 1.25rem; }
.formulario [data-biometria-ativar][hidden] { display: none; }
.formulario [data-biometria-ativar] .botao { align-self: flex-start; margin-top: 1rem; }
.formulario [data-biometria-ativar] h2 { margin-bottom: 0; }

/* ---- Lembretes ---- */

/* Estado mudado na própria lista: a etiqueta é a caixa de escolha. */
.tabela.lembretes td { vertical-align: middle; }
.estado-em-linha { display: flex; align-items: center; gap: .4rem; }
.estado-em-linha select { width: auto; min-height: 1.9rem; margin-top: 0; padding: .1rem .5rem; border-color: transparent; cursor: pointer; }
.estado-em-linha select option { font-weight: 400; color: var(--texto); background: var(--superficie); }
.escolhas { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .4rem; }
.formulario .escolhas .caixa-selecao { margin-top: 0; }
.formulario .ligado-a { margin: 0; }

/* Janela de avisos: fica no canto de baixo, à direita, por cima de tudo, em todas as páginas. */
.lembretes-aviso {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: min(360px, calc(100vw - 2rem));
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}
.lembretes-aviso:empty { display: none; }
.cartao-lembrete {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .85rem 1rem;
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-left: 4px solid var(--cor-base);
    border-radius: var(--raio);
    box-shadow: 0 10px 30px rgb(0 0 0 / .28);
}
.cartao-lembrete header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cartao-lembrete .quando { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--destaque); }
.cartao-lembrete .cliente { font-size: .9rem; color: var(--texto-2); }
.cartao-lembrete p { margin: 0; font-size: .9rem; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-lembrete .botoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.cartao-lembrete .botoes form { margin: 0; }
.cartao-lembrete .botoes > a { margin-left: auto; font-size: .85rem; }

/* Janela de pergunta (ao fechar um ticket). Sem JavaScript aparece no sítio, como um quadro. */
dialog.janela {
    width: min(460px, calc(100vw - 2rem));
    padding: 1.25rem 1.4rem;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    box-shadow: 0 20px 60px rgb(0 0 0 / .35);
}
dialog.janela:not(:modal) { position: static; margin: 0 0 1rem; }
dialog.janela::backdrop { background: rgb(0 0 0 / .5); }
dialog.janela h2 { margin: 0 0 .3rem; }
dialog.janela p { margin: 0; }

/* ---- Ticket e reparação ---- */

.comentario { border-left: 3px solid var(--moldura); scroll-margin-top: 6rem; }
/* O comentário acabado de escrever (a página abre nele): realçado, para se ver onde ficou. */
.comentario:target { box-shadow: 0 0 0 3px var(--foco); }
.comentario.resposta { border-left-color: var(--destaque); }
.comentario.do-cliente { border-left-color: var(--tom-verde-t); }
.comentario header { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.comentario header small { margin-left: auto; }
/* Editar (quem escreveu) e apagar (administradores), discretos por baixo do texto. */
.acoes-comentario { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .2rem 1rem; margin-top: .5rem; font-size: .85rem; }
.acoes-comentario form { margin: 0; }
.editar-comentario[open] { flex: 1 1 100%; }
.editar-comentario summary { display: inline; color: var(--destaque); cursor: pointer; list-style: none; }
.editar-comentario summary::-webkit-details-marker { display: none; }
.editar-comentario[open] summary { color: var(--texto-suave); }
.editar-comentario .formulario { margin-top: .5rem; }
.botoes-editar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .4rem; }
.acoes-comentario .apagar { color: var(--tom-vermelho-t); }
.estado-email { margin: .6rem 0 0; font-size: .85rem; color: var(--texto-suave); }
.estado-email.falhou { color: var(--erro); }
.estado-email .ligacao { margin-left: .4rem; color: var(--destaque); text-decoration: underline; }

.anexos { margin: .8rem 0 0; padding: .6rem 0 0; border-top: 1px dashed var(--linha-forte); }
.anexos ul { list-style: none; margin: 0; padding: 0; }
.anexos small { margin-left: .4rem; }
/* Fotografias anexadas: miniaturas todas da mesma altura; clicar abre a fotografia em tamanho real. */
.miniaturas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.miniaturas a { display: block; overflow: hidden; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio-pequeno); }
.miniaturas a:hover { border-color: var(--destaque); }
.miniaturas img { display: block; width: auto; max-width: 260px; height: 150px; object-fit: contain; }

.detalhes { margin-top: 0; }
.detalhes dt { margin-top: .8rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.detalhes dt:first-child { margin-top: 0; }
.detalhes dd { margin: .15rem 0 0; }
.detalhes dd .ligacao { margin-top: .5rem; font-size: .85rem; color: var(--destaque); }

/* ---- Registo de horas (página do ticket e contador a andar, no topo) ---- */
.tempo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.tempo-topo span { font-size: .85rem; color: var(--texto-2); }
.tempo-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.tempo-relogio { flex: 1 1 100%; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--destaque); }
.tempo-relogio.parado { font-size: 1rem; color: var(--texto-2); }
.tempo-lista { list-style: none; margin: .8rem 0 0; padding: .6rem 0 0; border-top: 1px dashed var(--linha-forte); }
.tempo-lista li { padding: .3rem 0; }
.tempo-lista li > div { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.tempo-lista small { color: var(--texto-suave); }
.tempo-corrigir { display: inline-block; margin-left: .5rem; font-size: .85rem; }
.tempo-corrigir summary { display: inline; color: var(--destaque); cursor: pointer; list-style: none; }
.tempo-corrigir summary::-webkit-details-marker { display: none; }
.tempo-corrigir form { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .4rem; }
.tempo-corrigir input[type=number] { width: 4.2rem; min-width: 0; }
.tempo-corrigir .ligacao { color: var(--tom-vermelho-t); }
.a-contar {
    display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem;
    font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--sobre-destaque, #fff); background: var(--destaque); border-radius: 2rem;
}
.a-contar:hover { text-decoration: none; filter: brightness(1.1); }

/* ---- Visor de anexos (visor.js): o ficheiro por cima da página, a toda a janela ---- */
dialog.visor {
    display: none;
    flex-direction: column;
    width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
    margin: 0; padding: 0;
    color: #f4f4f6; background: rgb(18 19 24 / .96);
    border: 0;
}
dialog.visor[open] { display: flex; }
dialog.visor::backdrop { background: rgb(0 0 0 / .6); }
.visor header { display: flex; flex: none; align-items: center; gap: .6rem; padding: .6rem .9rem; background: rgb(0 0 0 / .35); }
.visor-nome { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.visor-nome strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.visor-nome small, .visor-conta { font-size: .8rem; color: #b9bcc8; }
.visor-conta { flex: none; }
.visor header .botao.secundario { flex: none; color: #f4f4f6; border-color: rgb(255 255 255 / .35); }
.visor header .botao.secundario:hover { background: rgb(255 255 255 / .12); border-color: #fff; }
.visor-fechar { flex: none; width: 2.2rem; height: 2.2rem; font-size: 1.1rem; color: #f4f4f6; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.visor-fechar:hover, .visor-seta:hover { background: rgb(255 255 255 / .15); }
.visor-corpo { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 0; padding: 1rem 3.6rem; overflow: auto; }
.visor-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor-corpo iframe { width: min(100%, 1100px); height: 100%; background: #fff; border: 0; border-radius: var(--raio-pequeno); }
.visor-corpo pre {
    align-self: stretch; width: min(100%, 1100px); margin: 0 auto; padding: 1rem 1.2rem; overflow: auto;
    font: .85rem/1.5 Consolas, "Cascadia Mono", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4;
    color: #e6e7ec; background: #1d1f27; border-radius: var(--raio-pequeno);
}
.visor-aviso { margin: 0; color: #b9bcc8; }
/* Folha de Excel: uma tabela clara, como no programa, com as letras e os números sempre à vista. */
.visor-folha { display: flex; align-self: stretch; flex-direction: column; gap: .5rem; width: 100%; min-height: 0; }
.visor-folhas { display: flex; flex: none; flex-wrap: wrap; gap: .3rem; }
.visor-folhas button { padding: .3rem .8rem; font: inherit; font-size: .85rem; color: #d7d9e2; background: rgb(255 255 255 / .08); border: 0; border-radius: var(--raio-pequeno); cursor: pointer; }
.visor-folhas button.ativa { color: #14151a; background: #fff; }
.visor-tabela { flex: 1 1 auto; min-height: 0; overflow: auto; color: #14151a; background: #fff; border-radius: var(--raio-pequeno); }
.visor-tabela table { border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.visor-tabela th, .visor-tabela td { max-width: 28rem; padding: .22rem .55rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-right: 1px solid #d9dbe2; border-bottom: 1px solid #d9dbe2; }
.visor-tabela th { position: sticky; font-weight: 500; text-align: center; color: #5b5f6d; background: #eef0f4; }
.visor-tabela thead th { top: 0; z-index: 2; }
.visor-tabela tbody th { left: 0; z-index: 1; }
.visor-tabela thead th:first-child { left: 0; z-index: 3; }
.visor-tabela p { margin: 0; padding: .7rem .9rem; color: #5b5f6d; }
.visor-seta {
    position: absolute; top: 50%; width: 2.6rem; height: 2.6rem; margin-top: -1.3rem;
    font-size: 1.6rem; line-height: 1; color: #f4f4f6; background: rgb(0 0 0 / .35); border: 0; border-radius: 50%; cursor: pointer;
}
.visor-anterior { left: .6rem; }
.visor-seguinte { right: .6rem; }
@media (max-width: 700px) {
    .visor-corpo { padding: .5rem; }
    .visor header [data-separador] { display: none; }
    .visor-seta { top: auto; bottom: .8rem; }
}

/* Gravação automática (estado, prioridade, técnico, prateleira): sem botão, com confirmação discreta. */
.com-js [data-so-sem-js] { display: none; }
.estado-gravacao { min-height: 1.3em; margin-top: .7rem; font-size: .85rem; color: var(--texto-suave); }
.estado-gravacao.ok { color: var(--sucesso); }
.estado-gravacao.erro { color: var(--erro); }

/* ---- Entrada em dois passos ---- */

.codigo { max-width: 11rem; font-family: var(--fonte-mono); font-size: 1.3rem; letter-spacing: .25em; text-align: center; }
.caixa .codigo { max-width: none; }
.codigo-qr { display: block; width: 13rem; height: 13rem; margin: .5rem 0; padding: .5rem; background: #fff; border-radius: var(--raio-pequeno); image-rendering: pixelated; }
.formulario h2.passo { margin: 1.4rem 0 .2rem; }
.sem-margem { margin: 0; }
.caixa.formulario > small { margin-top: 1rem; text-align: center; }

/* ---- Anexar: arrastar, colar ou escolher ---- */

.zona-anexar { margin-top: .3rem; padding: .7rem .9rem; border: 1px dashed var(--linha-forte); border-radius: var(--raio-pequeno); }
.zona-anexar.sobre { border-color: var(--destaque); background: var(--destaque-fundo); }
.zona-anexar p { margin: 0; font-size: .9rem; color: var(--texto-suave); }
.zona-anexar .ligacao { color: var(--destaque); }
.zona-anexar .ligacao:hover { text-decoration: underline; }
.zona-anexar ul { list-style: none; margin: 0; padding: 0; }
.zona-anexar li { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; font-size: .9rem; }
.zona-anexar li img { flex: none; width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: 5px; border: 1px solid var(--linha); }
.zona-anexar li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zona-anexar li small { flex: none; margin: 0; }
.imagem-email { display: block; max-width: 100%; height: auto; margin-top: .6rem; border-radius: var(--raio-pequeno); }
.miniaturas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.formulario .miniatura { display: flex; flex-direction: column; gap: .3rem; margin: 0; font-size: .85rem; font-weight: 400; color: var(--texto-2); }
.miniatura img { width: 7rem; height: 5rem; object-fit: cover; border-radius: var(--raio-pequeno); border: 1px solid var(--linha); background: #fff; }
.miniatura span { display: flex; align-items: center; gap: .35rem; }
.bloco-mensagem { display: flex; flex-direction: column; }
.bloco-mensagem + .bloco-mensagem { margin-top: 1.5rem; padding-top: .5rem; border-top: 1px solid var(--linha); }

/* ---- Mensagens automáticas ---- */

.formulario h2.primeiro { margin-top: 0; }
.formulario h2 + small { margin-top: 0; }
.campos-modelo { margin: 0; padding-left: 1.1rem; color: var(--texto-2); }
.campos-modelo li { margin: .15rem 0; }
.formulario small .ligacao { color: var(--destaque); }
.formulario small .ligacao:hover { text-decoration: underline; }

/* ---- Assinaturas de email ---- */

.assinatura { margin-top: .7rem; padding-top: .6rem; font-size: .9rem; color: var(--texto-suave); border-top: 1px dashed var(--linha-forte); }
.cartao-simples > .assinatura { margin-top: 0; padding-top: 0; border-top: 0; color: var(--texto-2); }
.curto { max-width: 9rem; }
.assinatura img { display: block; max-width: 100%; height: auto; margin-top: .6rem; padding: .4rem; background: #fff; border-radius: var(--raio-pequeno); }
.acoes-linha { display: flex; flex: none; align-items: center; gap: 1rem; font-size: .9rem; }
.acoes-linha form { margin: 0; }
.acoes-linha .ligacao { color: var(--destaque); }
.acoes-linha .ligacao:hover { text-decoration: underline; }
.titulo-quadro h2 .etiqueta { margin-left: .4rem; vertical-align: .1em; }

/* ---- Prazos (administração) ---- */

.tabela.prazos { margin-bottom: 1rem; }
.tabela.prazos td { vertical-align: middle; }
.tabela.prazos input { width: 7rem; margin-top: 0; }

@media (max-width: 700px) {
    .conteudo { padding: 1.25rem .9rem 2.5rem; }
    /* Telemóvel: o topo deixa de acompanhar a página (ocuparia meio ecrã). No menu ficam as três entradas mais
       usadas e um botão "mais" com as restantes: nada desliza para o lado (isso atrapalhava o puxar para atualizar). */
    .topo { position: static; gap: 0 .75rem; padding: 0 .9rem; }
    .menu { position: relative; flex: 1 1 100%; order: 3; flex-wrap: nowrap; margin: 0 -.9rem; padding: 0 .5rem; border-top: 1px solid var(--linha); }
    .menu a, .menu summary { padding: .6rem .6rem; }
    .menu > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    /* O botão do menu fica à esquerda, antes do Painel, e o menu dele abre do lado esquerdo do ecrã. */
    .menu-mais { position: static; flex: none; }
    .menu-botao { padding: .6rem .7rem; }
    .menu-resto { left: .5rem; right: auto; }
    .menu-resto a, .menu-resto summary { padding: .65rem .7rem; }
    .so-largo { display: none; }
    .so-estreito { display: inline; }
    .conta { margin-left: auto; }
    .pesquisa-topo { flex: 1 1 100%; order: 4; padding: .5rem 0; }
    .pesquisa-topo-lista { left: 0; right: 0; width: auto; }
    .menu-admin { position: static; }
    /* O menu da conta não está na faixa que desliza: continua a abrir por baixo do nome (senão ia parar fora do ecrã). */
    .menu-conta { position: relative; }
    .aparencia { position: fixed; top: 3.2rem; left: .9rem; right: .9rem; width: auto; max-height: calc(100vh - 4rem); overflow-y: auto; }
    .cabecalho { flex-wrap: wrap; align-items: flex-start; }
    .filtros label, .filtros select, .filtros input:not([type=hidden]) { flex: 1 1 100%; min-width: 0; }
    .filtros label { flex-basis: calc(50% - .5rem); }
    .comentario header { flex-wrap: wrap; }
    .linhas li { flex-wrap: wrap; }
    .linhas .principal { flex-basis: calc(100% - 5rem); }
    .etiquetas { margin-left: 4.65rem; }
    .titulo-quadro { flex-wrap: wrap; }
    .tabela { display: block; overflow-x: auto; }
    .filtros input.largo { min-width: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    a, .botao, .cartao, .ref, input, select, textarea { transition: color .12s, background-color .12s, border-color .12s; }
}

/* ---- Grelha para editar uma tabela escrita no texto (tabela.js) ---- */
dialog.editor-tabela {
    width: min(1100px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
    padding: 1rem 1.2rem; color: var(--texto); background: var(--superficie);
    border: 1px solid var(--moldura); border-radius: var(--raio); box-shadow: 0 20px 60px rgb(0 0 0 / .35);
}
dialog.editor-tabela[open] { display: flex; flex-direction: column; gap: .7rem; }
dialog.editor-tabela::backdrop { background: rgb(0 0 0 / .5); }
.editor-tabela header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.editor-tabela h2 { margin: 0; font-size: 1.1rem; }
.editor-tabela .opcao { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 400; font-size: .9rem; }
.editor-tabela .grelha { min-height: 0; overflow: auto; border: 1px solid var(--moldura); border-radius: var(--raio-pequeno); }
.editor-tabela table { border-collapse: collapse; }
.editor-tabela td { padding: 0; border-bottom: 1px solid var(--linha); border-right: 1px solid var(--linha); }
.editor-tabela input[type=text] { min-width: 0; width: auto; padding: .35rem .5rem; font: inherit; font-size: .9rem; color: var(--texto); background: transparent; border: 0; border-radius: 0; }
.editor-tabela input[type=text]:focus { outline: 2px solid var(--foco); outline-offset: -2px; background: var(--destaque-fundo); }
.editor-tabela tr.titulo input { font-weight: 600; background: var(--superficie-2); }
.editor-tabela .apagar-linha { width: 2rem; height: 100%; font-size: 1rem; color: var(--texto-suave); background: none; border: 0; cursor: pointer; }
.editor-tabela .apagar-linha:hover { color: var(--tom-vermelho-t); }
.editor-tabela footer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.editor-tabela footer .espaco { flex: 1; }
.editor-tabela footer small { color: var(--texto-suave); }
[data-editar-tabelas] { display: contents; }
/* Mudar linhas de sítio na grelha: pega para arrastar e setas. */
.editor-tabela td.mover { white-space: nowrap; padding: 0 .2rem; }
.editor-tabela .pega { display: inline-block; padding: .2rem .3rem; color: var(--texto-suave); cursor: grab; user-select: none; }
.editor-tabela .pega:active { cursor: grabbing; }
.editor-tabela td.mover button { padding: .1rem .3rem; font-size: .8rem; color: var(--texto-suave); background: none; border: 0; border-radius: var(--raio-pequeno); cursor: pointer; }
.editor-tabela td.mover button:hover { color: var(--texto); background: var(--superficie-2); }
.editor-tabela tr.a-arrastar { opacity: .45; }
.editor-tabela tr.cair-aqui td { box-shadow: inset 0 2px 0 var(--destaque); }

/* ---- Módulo Licenças ---- */
.chave { font-family: var(--fonte-mono); font-size: .9em; letter-spacing: .02em; }
input.chave { text-transform: uppercase; }
.copiar { margin-left: .4rem; padding: .05rem .45rem; font: inherit; font-size: .75rem; color: var(--destaque); background: none; border: 1px solid var(--moldura); border-radius: 999px; cursor: pointer; }
.copiar:hover { background: var(--destaque-fundo); }
.acoes-cabecalho { display: flex; flex-wrap: wrap; gap: .5rem; }
.licenca-emuso { color: var(--tom-verde-t); background: var(--tom-verde-f); }
.licenca-porusar { color: var(--tom-azul-t); background: var(--tom-azul-f); }
.licenca-inativa { color: var(--tom-neutro-t); background: var(--tom-neutro-f); }
.importar-fora td { color: var(--texto-suave); }

/* ---- Administração > Módulos e definições ---- */
.lista-modulos { list-style: none; margin: .6rem 0 0; padding: 0; }
.lista-modulos li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--linha); }
.lista-modulos li small { margin-left: auto; color: var(--texto-suave); }
.lista-modulos .marca-modulo { width: 1.4rem; text-align: center; font-weight: 700; }
.lista-modulos .tem .marca-modulo { color: var(--tom-verde-t); }
.lista-modulos .nao-tem { color: var(--texto-suave); }
.formulario label.opcao { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; font-weight: 400; }
.formulario label.opcao input { width: auto; min-height: 0; }
/* Marca da empresa: cada imagem com uma pré-visualização ao lado. */
.imagem-marca { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.imagem-marca > div { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; }
.imagem-marca label { margin: 0; }
.imagem-marca img { flex: none; max-width: 9rem; max-height: 4rem; object-fit: contain; padding: .35rem; background: #fff; border: 1px solid var(--moldura); border-radius: var(--raio-pequeno); }
.imagem-marca img.sobre-escuro { background: #1c202b; }

/* Tabelas que no telemóvel passam a cartões: uma linha por bloco, cada valor com o nome da coluna (data-rotulo). */
@media (max-width: 700px) {
    .tabela.em-cartoes, .tabela.em-cartoes tbody, .tabela.em-cartoes tr, .tabela.em-cartoes td { display: block; width: 100%; }
    .tabela.em-cartoes { background: transparent; border: 0; box-shadow: none; }
    .tabela.em-cartoes thead { display: none; }
    .tabela.em-cartoes tr {
        margin-bottom: .7rem; padding: .35rem 0; background: var(--superficie);
        border: 1px solid var(--moldura); border-radius: var(--raio); box-shadow: var(--sombra-quadro);
    }
    .tabela.em-cartoes td { display: flex; gap: .8rem; padding: .3rem .9rem; border: 0; white-space: normal; min-width: 0; }
    .tabela.em-cartoes td:empty { display: none; }
    .tabela.em-cartoes td[data-rotulo]::before {
        content: attr(data-rotulo); flex: 0 0 6.5rem; font-size: .78rem; font-weight: 600; color: var(--texto-suave);
        text-transform: uppercase; letter-spacing: .03em; padding-top: .15rem;
    }
    .tabela.em-cartoes td.nowrap { flex-wrap: wrap; }
    .tabela.em-cartoes tbody tr:hover td { background: transparent; }
}

/* Marca da empresa no telemóvel: a pré-visualização vai para baixo do campo, em vez de ficar por cima dele. */
@media (max-width: 700px) {
    .imagem-marca { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .imagem-marca > div { width: 100%; }
    .imagem-marca input[type="file"] { max-width: 100%; }
}

/* ---- Inventário: clientes e equipamentos ---- */
.garantia-ok { color: var(--tom-verde-t); background: var(--tom-verde-f); }
.garantia-a-acabar { color: var(--tom-ambar-t); background: var(--tom-ambar-f); }
.garantia-expirada { color: var(--tom-vermelho-t); background: var(--tom-vermelho-f); }
.tabela.equipamentos td { vertical-align: middle; }
/* Ficha do cliente: quadro que se dobra e equipamentos em várias colunas. */
.quadro-dobravel { margin-bottom: 1.5rem; }
.quadro-dobravel > summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; margin-bottom: .5rem; }
.quadro-dobravel > summary::-webkit-details-marker { display: none; }
.quadro-dobravel > summary::before { content: "▸"; color: var(--texto-suave); transition: transform .15s; }
.quadro-dobravel[open] > summary::before { transform: rotate(90deg); }
.quadro-dobravel > summary h2 { margin: 0; }
.quadro-dobravel > summary:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; border-radius: var(--raio-pequeno); }
@media (prefers-reduced-motion: reduce) { .quadro-dobravel > summary::before { transition: none; } }
.grelha-equipamentos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }
.grelha-equipamentos li { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: .8rem 1rem; background: var(--superficie); border: 1px solid var(--moldura); border-radius: var(--raio-pequeno); min-width: 0; }
.grelha-equipamentos li.inativo { opacity: .6; }
/* "cabeca" e não "topo": .topo é a barra do topo da aplicação. */
.grelha-equipamentos .cabeca { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; }
.grelha-equipamentos .cabeca > a:first-child { min-width: 0; overflow-wrap: anywhere; font-size: 1.02rem; }
.grelha-equipamentos .info { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.grelha-equipamentos small { color: var(--texto-suave); }
.ficha-equipamento { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin: 0 0 1rem; }
.ficha-equipamento > div { padding: .6rem .85rem; background: var(--superficie); border: 1px solid var(--moldura); border-radius: var(--raio-pequeno); }
.ficha-equipamento dt { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.ficha-equipamento dd { margin: .15rem 0 0; }
.inventario-ticket small .ligacao { color: var(--destaque); }

/* Lista de tickets no telemóvel: cartão compacto, em três linhas: nº e assunto; estado, prioridade e prazo; cliente e
   técnico. As quebras de linha são os ::before e ::after da linha (elementos de largura inteira, sem altura). */
/* Um assunto, nome, email ou morada sem espaços (um endereço, um caminho) não alarga a página. */
h1, h2, .assunto, dd, td, small, .texto, .detalhes, .lateral a, a[href^="mailto:"] { overflow-wrap: anywhere; min-width: 0; }

/* No iPhone, um campo com letra abaixo de 16 px faz zoom ao tocar e a página fica deslocada. */
@media (max-width: 768px) {
    input, select, textarea, .pesquisa-topo input { font-size: max(16px, 1em); }
}

@media (max-width: 700px) {
    .tabela.em-cartoes.tickets tr { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .45rem; padding: .7rem .85rem; }
    .tabela.em-cartoes.tickets tr::before, .tabela.em-cartoes.tickets tr::after { content: ""; flex-basis: 100%; height: 0; }
    .tabela.em-cartoes.tickets tr::before { order: 3; }
    .tabela.em-cartoes.tickets tr::after { order: 5; }
    .tabela.em-cartoes.tickets td { display: block; width: auto; min-width: 0; padding: 0; }
    .tabela.em-cartoes.tickets td[data-rotulo]::before { content: none; }
    .tabela.em-cartoes.tickets .c-num { order: 1; }
    .tabela.em-cartoes.tickets .c-assunto { order: 2; flex: 1 1 0; font-weight: 600; }
    .tabela.em-cartoes.tickets .c-estado, .tabela.em-cartoes.tickets .c-prio, .tabela.em-cartoes.tickets .c-prazo { order: 4; }
    .tabela.em-cartoes.tickets .c-cli { order: 6; flex: 1 1 0; font-size: .85rem; color: var(--texto-2); }
    .tabela.em-cartoes.tickets .c-ficha { order: 6; font-size: .85rem; font-weight: 600; }
    .tabela.em-cartoes.tickets .c-ficha.sem-ficha { display: none; }
    .tabela.em-cartoes.tickets .c-tec { order: 7; font-size: .85rem; text-align: right; color: var(--texto-suave); }
    .tabela.em-cartoes.tickets .c-criado, .tabela.em-cartoes.tickets .c-alterado { display: none; }
}