/* Painel de licenças do PDV Simples. Usa as variáveis de style.css. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.admin-topo { position: sticky; top: 0; }
.admin-usuario { display: flex; align-items: center; gap: .75rem; color: var(--suave); font-size: .9375rem; }
.admin-main { width: min(75rem, calc(100% - var(--gutter) - var(--gutter))); margin: clamp(1.5rem, 5vw, 3rem) auto; }
.admin-main h1 { margin: .5rem 0 .25rem; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); line-height: 1.2; }
.intro { color: var(--suave); }

.admin button { font-family: inherit; line-height: 1.3; cursor: pointer; min-height: 2.75rem; }
.admin button:disabled { opacity: .55; cursor: wait; }
.admin button:focus-visible, .admin input:focus-visible, .admin textarea:focus-visible { outline: 3px solid var(--laranja-claro); outline-offset: 3px; }
.secondary {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .5rem 1rem; border: 1px solid var(--borda); border-radius: 999px;
    background: var(--superficie-2); color: var(--texto); font-size: .9375rem; font-weight: 500;
}
.secondary:hover { border-color: var(--laranja); }
.btn.perigo { background: #e5484d; color: #fff; }
.mini { min-height: 2.25rem !important; padding: .3rem .8rem; font-size: .8125rem; }
.mini.perigo { border-color: rgba(229, 72, 77, .5); color: #ff8a8e; }
.mini.ok { border-color: rgba(48, 164, 108, .55); color: #6fdba6; }

.admin label { display: block; margin: 1.1rem 0 .4rem; font-size: .875rem; font-weight: 600; }
.admin input, .admin textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem 1rem; border: 1px solid #5a4a3d; border-radius: .75rem;
    background: var(--fundo); color: var(--texto); font: inherit; resize: vertical;
}
.admin input:focus, .admin textarea:focus { border-color: var(--laranja); box-shadow: 0 0 0 4px rgba(255, 106, 0, .18); }
.admin input:disabled { opacity: .7; cursor: not-allowed; }
.ajuda { margin-top: .4rem; color: var(--suave); font-size: .8125rem; }
.mensagem { margin-top: .9rem; color: #ff8a8e; font-size: .9rem; }
.mensagem:empty { display: none; }
.mensagem.sucesso { color: #6fdba6; }

/* Login */
.login-admin {
    max-width: 28rem; margin: clamp(1rem, 6vw, 4rem) auto; padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--borda); border-radius: 1.25rem;
    background: radial-gradient(24rem 12rem at 100% 0%, rgba(255, 106, 0, .14), transparent 60%), var(--superficie);
    box-shadow: var(--sombra);
}
.login-admin .btn { width: 100%; margin-top: 1.25rem; }

/* Painel */
.painel-cabecalho { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.indicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0 1rem; }
.indicador {
    display: flex; flex-direction: column; padding: .9rem 1.1rem; border: 1px solid var(--borda);
    border-radius: 1rem; background: var(--superficie);
}
.indicador strong { font-size: 1.75rem; line-height: 1.1; color: var(--laranja); }
.indicador.alerta strong { color: #ff8a8e; }
.indicador span { color: var(--suave); font-size: .8125rem; }
.busca { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.admin .busca-rotulo { width: 100%; margin: 0; }
.busca input { flex: 1; }

.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: 1rem; background: var(--superficie); }
.clientes { width: 100%; border-collapse: collapse; font-size: .9rem; }
.clientes th {
    padding: .75rem 1rem; text-align: left; color: var(--suave); font-size: .75rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--borda); white-space: nowrap;
}
.clientes td { padding: .7rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; }
.clientes tbody tr:last-child td { border-bottom: 0; }
.clientes tbody tr:hover { background: rgba(255, 255, 255, .02); }
.clientes .doc { font-variant-numeric: tabular-nums; white-space: nowrap; }
.clientes .nome { font-weight: 600; }
.clientes .obs, .clientes .motivo { display: block; color: var(--suave); font-size: .8rem; font-weight: 400; }
.clientes .motivo { color: #ff8a8e; }
.clientes .vazio { padding: 2rem; text-align: center; color: var(--suave); }
.clientes .acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.situacao {
    display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.situacao::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.situacao.ativo { background: rgba(48, 164, 108, .14); color: #6fdba6; }
.situacao.bloqueado { background: rgba(229, 72, 77, .14); color: #ff8a8e; }
.paginas { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .75rem; color: var(--suave); font-size: .875rem; }
.paginas span { margin-right: auto; }

/* Diálogos */
dialog {
    margin: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    width: min(32rem, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: clamp(1.25rem, 4vw, 2rem);
    max-height: calc(100dvh - 2rem);
    border: 1px solid var(--borda); border-radius: 1.25rem; background: var(--superficie); color: var(--texto);
    box-shadow: var(--sombra);
}
dialog::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(3px); }
dialog h2 { font-size: 1.3rem; }
.acoes-dialogo { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; }
.historico { list-style: none; margin-top: 1rem; max-height: 22rem; overflow-y: auto; }
.historico li { padding: .6rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: .875rem; }
.historico li strong { color: var(--laranja-claro); }
.historico li span { display: block; color: var(--suave); font-size: .8rem; }
.usuarios { list-style: none; margin-top: 1rem; max-height: 14rem; overflow-y: auto; }
.usuarios li {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .6rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: .9rem;
}
.usuario-nome { font-weight: 600; overflow-wrap: anywhere; }
.usuario-nome span { display: block; color: var(--suave); font-size: .78rem; font-weight: 400; }
.usuarios .acoes { display: flex; gap: .4rem; }
#form-usuario { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
#form-usuario h3 { font-size: 1rem; }
.painel-botoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.link-esqueci {
    display: block; margin: 1rem auto 0; padding: .25rem .5rem; border: 0; background: none;
    color: var(--laranja-claro); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px;
}
.link-esqueci:hover { color: var(--texto); }
#form-redefinir .intro { padding: .75rem 1rem; border: 1px solid var(--borda); border-radius: .75rem; font-size: .875rem; }

/* Repositório */
dialog.dialogo-largo { width: min(46rem, calc(100% - 2rem)); }
.admin .soltar {
    display: flex; flex-direction: column; align-items: center; gap: .25rem; margin: 1rem 0 0; padding: 1.75rem 1rem;
    border: 2px dashed #5a4a3d; border-radius: 1rem; background: var(--fundo); text-align: center; cursor: pointer;
    font-weight: 400;
}
.soltar input[type=file] { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; }
.soltar strong { font-size: 1rem; }
.soltar span { color: var(--suave); }
.soltar:hover, .soltar.arrastando { border-color: var(--laranja); background: rgba(255, 106, 0, .08); }
.soltar:focus-within { outline: 3px solid var(--laranja-claro); outline-offset: 3px; }
.envios, .arquivos { list-style: none; }
.envios li {
    display: grid; grid-template-columns: minmax(0, 1fr) 8rem; gap: .25rem .75rem; align-items: center;
    margin-top: .6rem; font-size: .875rem;
}
.envios strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.envios progress { width: 100%; accent-color: var(--laranja); }
.envios span { grid-column: 1 / -1; color: var(--suave); font-size: .8rem; }
.envios li.erro span { color: #ff8a8e; }
.arquivos { margin-top: 1rem; max-height: 26rem; overflow-y: auto; }
.arquivos li { padding: .8rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.arquivos li.novo { padding: .8rem; border: 1px solid rgba(255, 106, 0, .45); border-radius: .75rem; background: rgba(255, 106, 0, .06); }
.arquivos li.vazio { color: var(--suave); font-size: .9rem; }
.arquivo-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.arquivo-nome { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.arquivo-nome a { color: var(--texto); }
.arquivo-nome span { display: block; color: var(--suave); font-size: .78rem; font-weight: 400; }
.arquivos .acoes { display: flex; gap: .4rem; }
.arquivos textarea { min-height: 2.5rem; font-size: .875rem; }

@media (max-width: 40rem) {
    .admin .mini { min-height: 2.75rem !important; }
    .admin-topo .logo-texto { display: none; }
    .admin-usuario { min-width: 0; font-size: .8125rem; }
    .admin-usuario span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
    .indicadores { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
    .indicador { padding: .7rem; }
    .indicador strong { font-size: 1.35rem; }
    .painel-botoes, .painel-botoes > * { width: 100%; }
    .busca { flex-direction: column; }

    /* Tabela vira lista de cartões: nada de rolagem lateral no celular. */
    .tabela-rolagem { overflow: visible; border: 0; background: none; }
    .clientes thead { display: none; }
    .clientes, .clientes tbody, .clientes tr, .clientes td { display: block; width: 100%; }
    .clientes tr {
        margin-bottom: .75rem; padding: .5rem 1rem; border: 1px solid var(--borda); border-radius: 1rem;
        background: var(--superficie);
    }
    .clientes tbody tr:hover { background: var(--superficie); }
    .clientes td {
        display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .45rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, .05); overflow-wrap: anywhere;
    }
    .clientes td::before { content: attr(data-rotulo); color: var(--suave); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
    .clientes td:last-child { display: block; border-bottom: 0; padding-top: .6rem; }
    .clientes td:last-child::before { content: none; }
    .clientes td.vazio { display: block; }
    .clientes td.vazio::before { content: none; }
    .clientes .acoes { justify-content: stretch; }
    .clientes .acoes .mini { flex: 1; }
    .paginas { flex-wrap: wrap; }
    .paginas span { width: 100%; }

    dialog { width: calc(100% - 1rem); padding: 1.25rem 1rem; }
    .acoes-dialogo { flex-wrap: wrap; }
    .acoes-dialogo > * { flex: 1 1 auto; }
    .usuarios li { align-items: flex-start; }
    .usuarios .acoes { width: 100%; }
    .usuarios .acoes .mini { flex: 1; }
    dialog.dialogo-largo { width: calc(100% - 1rem); }
    .arquivos .acoes { width: 100%; }
    .arquivos .acoes .mini { flex: 1; }
}