/* CD Distribuidora: estilos base. Identidade: vermelho e preto do logo. */
:root {
    --marca: #E21F24;
    --marca-escura: #B8151A;
    --tinta: #202020;
    --papel: #F2F3F5;
    --superficie: #FFFFFF;
    --linha: #D8DBE0;
    --suave: #5A606A;
    --ok: #1E7B4A;
    --perigo: #A8121A;
    --raio: 6px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

h1 {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.suave { color: var(--suave); }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }

/* Botoes e campos */
.btn-principal, .btn-leve {
    min-height: 44px;
    border: 0;
    border-radius: var(--raio);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.btn-principal { background: var(--marca); color: #fff; padding: 0 24px; }
.btn-principal:hover { background: var(--marca-escura); }
.btn-principal:disabled { opacity: .65; cursor: progress; }
.btn-leve { background: transparent; color: var(--tinta); padding: 0 12px; border: 1px solid var(--linha); }
.btn-leve:hover { border-color: var(--tinta); }

input[type="text"], input[type="password"], input[type="search"], select {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--tinta);
    font: inherit;
}
label { display: block; margin: 16px 0 6px; font-weight: 600; }

.aviso-ok { border-left-color: var(--ok); color: var(--ok); }
.aviso { margin: 0 0 8px; padding: 10px 12px; border-radius: var(--raio); border-left: 4px solid var(--perigo); background: #fff; color: var(--perigo); font-weight: 600; }

/* Topo das telas logadas: barra no desktop, gaveta no celular */
.topo {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: var(--superficie);
    border-bottom: 3px solid var(--tinta);
}
.topo-logo { display: flex; line-height: 0; }
.topo-menu { display: none; }
.topo-nav { display: flex; gap: 4px; flex: 1; align-items: center; }
.topo-nav a, .grupo-bt {
    display: block; padding: 10px 12px; border: 0; border-radius: var(--raio); background: transparent;
    color: inherit; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; text-align: left;
}
.topo-nav a:hover, .grupo-bt:hover { background: var(--papel); }
.topo-nav a[aria-current="page"], .grupo-ativo > .grupo-bt { box-shadow: inset 0 -3px 0 var(--marca); }
.grupo { position: relative; }
.grupo-bt::after { content: "▾"; margin-left: 6px; font-size: 12px; }
.grupo-sub {
    display: none; position: absolute; left: 0; top: 100%; z-index: 20; min-width: 200px; padding: 4px;
    background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.grupo:hover > .grupo-sub, .grupo:focus-within > .grupo-sub { display: block; }
.topo-gaveta-pe, .topo-fundo { display: none; }
.topo-sair { display: flex; align-items: center; gap: 12px; margin: 0; }
.topo-nome { color: var(--suave); }

.conteudo { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }

/* Entrada (login): tela dividida como as setas do logo */
body.entrada { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.entrada-marca { position: relative; display: flex; align-items: center; justify-content: center; }
.entrada-marca .metade { position: absolute; top: 0; bottom: 0; width: 50%; }
.entrada-marca .vermelha { left: 0; background: var(--marca); }
.entrada-marca .preta { right: 0; background: var(--tinta); }
.entrada-marca img { position: relative; max-width: 70%; height: auto; padding: 20px; background: #fff; border-radius: 12px; }
.entrada-form { display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.entrada-form form { width: 100%; max-width: 360px; }
.entrada-form .btn-principal { width: 100%; margin-top: 24px; }

@media (max-width: 760px) {
    body.entrada { display: block; }
    .entrada-marca { height: 140px; }
    .entrada-marca img { max-width: 120px; padding: 8px; border-radius: 8px; }
    .entrada-form { padding: 24px 16px 40px; }
    h1 { font-size: 24px; }
    .topo { gap: 8px; padding: 8px; }
    .topo-logo { margin-right: auto; }
    .topo-menu {
        display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
        border: 1px solid var(--linha); border-radius: var(--raio); background: transparent; cursor: pointer;
    }
    .topo-menu-barras, .topo-menu-barras::before, .topo-menu-barras::after {
        display: block; width: 20px; height: 2px; background: var(--tinta); content: ""; position: relative;
    }
    .topo-menu-barras::before { position: absolute; top: -6px; }
    .topo-menu-barras::after { position: absolute; top: 6px; }
    .topo-nav {
        position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(300px, 85vw); flex-direction: column;
        align-items: stretch; gap: 0; padding: 12px 8px; overflow-y: auto; background: var(--superficie);
        transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility .2s;
    }
    body.gaveta-aberta .topo-nav { transform: none; visibility: visible; }
    .topo-nav a, .grupo-bt { width: 100%; min-height: 44px; }
    .grupo-sub { display: none; position: static; min-width: 0; padding: 0 0 0 16px; border: 0; box-shadow: none; }
    .grupo:hover > .grupo-sub, .grupo:focus-within > .grupo-sub { display: none; }
    .grupo.aberto > .grupo-sub { display: block; }
    .topo-gaveta-pe { display: block; margin-top: auto; padding: 12px; border-top: 1px solid var(--linha); }
    .topo-fundo { position: fixed; z-index: 30; inset: 0; background: rgba(0, 0, 0, .45); }
    .topo-fundo:not([hidden]) { display: block; }
    .topo-sair .topo-nome { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Lista de clientes */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.busca { margin: 0 0 4px; }
.sub-busca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
.busca input[type="search"] { width: 100%; min-height: 52px; font-size: 18px; border: 2px solid var(--tinta); }
.busca input[type="search"]:focus-visible { border-color: var(--marca); }
.marca-inativos { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.marca-inativos input { width: 20px; height: 20px; accent-color: var(--marca); }
.contador { margin: 0; color: var(--suave); font-weight: 600; }

.lista, .lista-cab { list-style: none; margin: 0; padding: 0; }
.lista-cab, .cliente-corpo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.6fr) minmax(0, 1.5fr) minmax(0, 1.4fr); gap: 12px; align-items: center; }
.lista-cab { padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--tinta); }
.cliente { position: relative; display: flex; align-items: center; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.cliente:hover { background: #FAFAFB; }
.cliente-corpo { flex: 1; min-width: 0; min-height: 52px; padding: 8px 12px; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cliente-corpo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-nome strong { font-weight: 700; }
.c-doc, .c-fone { font-variant-numeric: tabular-nums; }
.cliente-acoes { display: none; }
.cliente.inativo .c-nome { opacity: .6; }
.etiqueta { margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: var(--linha); font-size: 12px; font-weight: 700; }

.esqueleto { height: 52px; padding: 18px 12px; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.esqueleto .barra { display: block; height: 14px; width: 45%; border-radius: 4px; background: var(--linha); animation: pulsar 1.2s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .45; } }

.estado { padding: 32px 16px; text-align: center; background: var(--superficie); border: 1px dashed var(--linha); border-radius: var(--raio); }
.estado p { margin: 0 0 12px; font-weight: 600; }
.paginacao { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0 0; }

.detalhe { width: min(520px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: 10px; color: var(--tinta); }
.detalhe::backdrop { background: rgba(32, 32, 32, .55); }
.detalhe-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.detalhe-cab h2 { margin: 0; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.detalhe-dados { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.detalhe-dados dt { color: var(--suave); font-weight: 600; }
.detalhe-dados dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
    .conteudo { padding: 12px 12px 24px; }
    .busca input[type="search"] { min-height: 48px; font-size: 16px; }
    .lista-cab { display: none; }
    .cliente-corpo { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 56px; padding: 8px 4px 8px 12px; }
    .cliente-corpo .c-doc, .cliente-corpo .c-fone { display: none; }
    .cliente-corpo .c-local { color: var(--suave); font-size: 14px; }
    .cliente-acoes { display: flex; gap: 4px; padding-right: 8px; }
    .acao { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border: 1px solid var(--linha); border-radius: var(--raio); font-size: 13px; font-weight: 700; text-decoration: none; }
    .detalhe-dados { grid-template-columns: 1fr; gap: 0; }
    .detalhe-dados dd { margin-bottom: 10px; }
}

/* Area de admin */
.cab-adm { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cab-adm h1 { margin: 0; }
.btn-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.voltar { color: var(--suave); font-weight: 600; text-decoration: none; }
.sub-titulo { margin: 32px 0 0; font-size: 20px; }
.form-adm { max-width: 460px; }
.form-adm .btn-principal, .form-adm .btn-leve { margin-top: 20px; }
.form-adm .marca-inativos { margin-top: 16px; }
.dica { margin: 6px 0 0; color: var(--suave); font-size: 14px; }
.lista-cab-adm, .cliente-corpo-adm { grid-template-columns: minmax(0, 3fr) minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1.6fr); }
.cliente-corpo-adm { text-decoration: none; }
.lista-cab-aud, .cliente-corpo-aud { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 3fr); }
.cliente-corpo-aud { cursor: default; }
.cliente-corpo-aud .c-detalhe { white-space: normal; }
.filtro-adm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 12px; }
.filtro-adm label { margin: 0 0 4px; }
.filtro-adm > div { flex: 1 1 180px; max-width: 280px; }
.filtro-adm .btn-principal, .filtro-adm .btn-leve { flex: 0 0 auto; padding: 0 20px; }

@media (max-width: 760px) {
    .lista-cab-adm, .lista-cab-aud { display: none; }
    .cliente-corpo-adm, .cliente-corpo-aud { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 10px 12px; }
    .cliente-corpo-adm .c-login, .cliente-corpo-adm .c-perfil, .cliente-corpo-adm .c-acesso { display: block; color: var(--suave); font-size: 14px; }
    .cliente-corpo-adm .c-perfil, .cliente-corpo-adm .c-acesso { display: inline; }
    .cliente-corpo-aud .c-quando, .cliente-corpo-aud .c-login { color: var(--suave); font-size: 14px; }
    .cliente-corpo-aud .c-detalhe { color: var(--suave); font-size: 14px; overflow-wrap: anywhere; }
    .cliente-corpo-aud > span, .cliente-corpo-adm > span { white-space: normal; }
    .filtro-adm > div { flex: 1 1 100%; max-width: none; }
    .filtro-adm .btn-principal { flex: 1 1 auto; }
    .cab-adm .btn-principal { padding: 0 14px; }
}

/* Faixa "Esta tela foi atualizada" (public/assets/versao.js) */
.vp-faixa { display: none; position: sticky; top: 0; z-index: 900; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: #FFF3DD; border-bottom: 3px solid var(--marca); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); font-size: 15px; color: var(--tinta); text-align: center; }
.vp-faixa.vis { display: flex; }
.vp-faixa button { min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--raio); background: var(--marca); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.vp-faixa button:hover { background: var(--marca-escura); }

/* Troca de senha e requisitos */
.requisitos { margin: 12px 0 0; padding: 0; list-style: none; color: var(--suave); }
.requisitos li { padding: 2px 0; }
.requisitos li.ok { color: var(--ok); font-weight: 600; }
.requisitos .marca { display: inline-block; width: 1.4em; }

/* Assinatura da desenvolvedora */
.assinatura { display: inline-block; padding: 8px; color: var(--suave); font-size: 14px; text-decoration: none; }
.assinatura:hover { color: var(--tinta); }
.rodape { padding: 8px 16px 24px; text-align: center; }
.entrada-assinatura { margin-top: 16px; text-align: center; }
@media print { .rodape, .entrada-assinatura, .topo, .topo-fundo { display: none !important; } }

/* Senha provisoria (modal do admin) */
.senha-temp-valor { margin: 12px 0; padding: 14px; border: 2px dashed var(--tinta); border-radius: var(--raio); background: var(--papel); font: 700 22px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .04em; text-align: center; overflow-wrap: anywhere; user-select: all; }
.acoes-modal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Permissoes */
.form-largo { max-width: 720px; }
.tabela-rolagem { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
.matriz { width: 100%; border-collapse: collapse; }
.matriz th, .matriz td { padding: 10px 12px; border-bottom: 1px solid var(--linha); text-align: center; }
.matriz thead th { font-size: 14px; color: var(--suave); }
.matriz tbody th { text-align: left; font-weight: 600; min-width: 150px; }
.matriz input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--marca); }
.lista-perm { margin: 12px 0 0; padding: 0; list-style: none; }
.lista-perm li { padding: 10px 0; border-bottom: 1px solid var(--linha); }
.lista-perm label { margin: 0 0 6px; }
.lista-perm-links a { display: flex; justify-content: space-between; gap: 12px; min-height: 44px; align-items: center; text-decoration: none; }