/* ==========================================================================
   Placar 360 — sistema visual
   Manual de identidade: docs/identidade-visual.md
   CSS puro, sem build.

   Regra de cor: azul-escuro é estrutura e ação; verde é acento e energia.
   ========================================================================== */

:root {
    /* Marca — manual, item 9 */
    --azul-escuro: #0B2D4B;
    --verde-principal: #16A34A;
    --verde-secundario: #2CC55E;
    --verde-claro: #84E043;

    /* Variações do azul para profundidade e estados */
    --azul-profundo: #071E33;
    --azul-hover: #14406A;
    --azul-claro-fundo: #EAF0F6;

    /* Especial — manual, item 10. USO RESTRITO: finais, premiações, eventos */
    --preto: #000000;
    --dourado: #D4AF37;
    --dourado-claro: #F5D77A;

    /* Neutros com viés azulado */
    --fundo: #F3F6F9;
    --superficie: #FFFFFF;
    --borda: #E2E8EE;
    --borda-forte: #CBD5DF;
    --texto: #14212E;
    --texto-suave: #5B6B7B;
    --texto-fraco: #8A98A6;

    /* Estados */
    --sucesso: #16A34A;
    --sucesso-fundo: #E8F6EE;
    --sucesso-texto: #0F7A37;
    --erro: #C2362B;
    --erro-fundo: #FCEDEC;
    --erro-texto: #9A2A21;

    /* Tipografia — Montserrat, manual item 11 */
    --fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Formas */
    --raio-p: 8px;
    --raio-m: 12px;
    --raio-g: 18px;
    --sombra-cartao: 0 1px 2px rgba(11, 45, 75, 0.04), 0 2px 6px rgba(11, 45, 75, 0.04);
    --sombra-foco: 0 0 0 4px rgba(22, 163, 74, 0.16);

    /* Estrutura */
    --largura-lateral: 264px;
    --altura-barra: 72px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    color: var(--azul-escuro);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.3px;
}

p {
    margin: 0;
}

a {
    color: var(--azul-escuro);
}

img {
    max-width: 100%;
}

button {
    font-family: inherit;
}

code {
    padding: 0.1em 0.4em;
    border-radius: 6px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.875em;
}

:focus-visible {
    outline: 2px solid var(--verde-principal);
    outline-offset: 2px;
}

.icone {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.oculto {
    display: none !important;
}

.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ==========================================================================
   Marca (imagem oficial, via partials/marca.php)
   ========================================================================== */

.marca {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

.marca img {
    display: block;
    width: auto;
}

.marca-horizontal img {
    height: 40px;
}

.marca-vertical img {
    height: 150px;
}

.marca-simbolo img {
    height: 40px;
}

/* ==========================================================================
   Botões
   ========================================================================== */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--raio-p);
    background: var(--azul-escuro);
    color: #FFFFFF;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.1px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.botao:hover {
    background: var(--azul-hover);
}

.botao:active {
    transform: translateY(1px);
}

.botao[disabled] {
    opacity: 0.7;
    cursor: progress;
}

.botao .icone {
    width: 18px;
    height: 18px;
    color: var(--verde-claro);
}

.botao-grande {
    min-height: 52px;
    font-size: 1rem;
}

.botao-bloco {
    width: 100%;
}

.botao-secundario {
    background: var(--superficie);
    color: var(--azul-escuro);
    box-shadow: inset 0 0 0 1px var(--borda-forte);
}

.botao-secundario:hover {
    background: var(--fundo);
}

.botao-secundario .icone {
    color: var(--verde-principal);
}

.link-acao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--verde-principal);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}

.link-acao:hover {
    color: var(--sucesso-texto);
}

.link-acao .icone {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.link-acao:hover .icone {
    transform: translateX(3px);
}

/* ==========================================================================
   Formulários
   ========================================================================== */

.campo {
    margin-bottom: 20px;
}

.rotulo {
    display: block;
    margin-bottom: 8px;
    color: var(--azul-escuro);
    font-size: 0.8125rem;
    font-weight: 700;
}

.entrada-grupo {
    position: relative;
}

.entrada-grupo > .icone {
    position: absolute;
    top: 50%;
    left: 15px;
    width: 18px;
    height: 18px;
    color: var(--texto-fraco);
    transform: translateY(-50%);
    pointer-events: none;
    transition: color 0.2s;
}

.entrada {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: var(--superficie);
    color: var(--texto);
    font-family: inherit;
    font-size: 0.9375rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.entrada-grupo .entrada {
    padding-left: 46px;
}

.entrada-grupo .entrada.com-acao {
    padding-right: 50px;
}

.entrada::placeholder {
    color: var(--texto-fraco);
}

.entrada:hover {
    border-color: var(--texto-fraco);
}

.entrada:focus {
    outline: none;
    border-color: var(--verde-principal);
    box-shadow: var(--sombra-foco);
}

.entrada-grupo:focus-within > .icone {
    color: var(--verde-principal);
}

.entrada:-webkit-autofill {
    -webkit-text-fill-color: var(--texto);
    box-shadow: 0 0 0 100px var(--superficie) inset;
}

.entrada-acao {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--texto-fraco);
    cursor: pointer;
    transform: translateY(-50%);
}

.entrada-acao:hover {
    background: var(--fundo);
    color: var(--azul-escuro);
}

.entrada-acao .icone {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Avisos e selos
   ========================================================================== */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    padding: 12px 14px;
    border-radius: var(--raio-p);
    font-size: 0.875rem;
    line-height: 1.5;
}

.aviso .icone {
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.aviso-erro {
    background: var(--erro-fundo);
    color: var(--erro-texto);
}

.aviso-sucesso {
    background: var(--sucesso-fundo);
    color: var(--sucesso-texto);
}

.selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.selo::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.selo-ok {
    background: var(--sucesso-fundo);
    color: var(--sucesso-texto);
}

.selo-falha {
    background: var(--erro-fundo);
    color: var(--erro-texto);
}

.selo-neutro {
    background: var(--azul-claro-fundo);
    color: var(--azul-escuro);
}

/* ==========================================================================
   Tela de acesso — dividida em marca + formulário
   ========================================================================== */

.pagina-acesso {
    background: var(--superficie);
}

.acesso {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* Painel da marca */

.acesso-marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: 44px 56px;
    overflow: hidden;
    color: #FFFFFF;
    background:
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(20, 64, 106, 0.9), transparent 70%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(22, 163, 74, 0.18), transparent 70%),
        var(--azul-escuro);
}

.acesso-marca > * {
    position: relative;
    z-index: 1;
}

.acesso-marca > .marca-horizontal img {
    height: 54px;
}

.acesso-dagua {
    position: absolute;
    right: -190px;
    bottom: -170px;
    z-index: 0;
    width: 660px;
    max-width: none;
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
}

.acesso-chamada {
    max-width: 30rem;
}

/* Eco dos traços do "—360—" do lockup */
.acesso-traco {
    display: block;
    width: 52px;
    height: 4px;
    margin-bottom: 28px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--verde-principal), var(--verde-claro));
}

.acesso-chamada h2 {
    color: #FFFFFF;
    font-size: clamp(2rem, 3.1vw, 2.85rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1px;
}

.acesso-chamada h2 em {
    font-style: normal;
    color: var(--verde-claro);
}

.acesso-chamada p {
    max-width: 26rem;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.acesso-rodape-marca {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

/* Painel do formulário */

.acesso-formulario {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 32px;
}

.acesso-caixa {
    width: 100%;
    max-width: 400px;
}

.acesso-titulo {
    font-size: 1.875rem;
    letter-spacing: -0.6px;
}

.acesso-subtitulo {
    margin: 10px 0 34px;
    color: var(--texto-suave);
    font-size: 0.9375rem;
}

.acesso-ajuda {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: 0.8125rem;
    text-align: center;
}

.acesso-ambiente {
    margin-top: 40px;
    text-align: center;
}

/* ==========================================================================
   Estrutura do app: barra lateral + área principal
   ========================================================================== */

.lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: var(--largura-lateral);
    background:
        radial-gradient(ellipse 120% 40% at 0% 0%, rgba(20, 64, 106, 0.7), transparent 70%),
        var(--azul-escuro);
    color: #FFFFFF;
}

.lateral-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--altura-barra);
    padding: 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.lateral-topo .marca-horizontal img {
    height: 44px;
}

/* Seletor com dois níveis de propósito: .botao-icone, declarado mais
   abaixo, também define display, e com a mesma especificidade venceria
   pela ordem — o "X" apareceria no desktop. */
.lateral-topo .lateral-fechar {
    display: none;
}

.lateral-nav {
    flex: 1;
    padding: 12px 12px 20px;
    overflow-y: auto;
}

.lateral-secao {
    margin: 20px 12px 8px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lateral-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0;
    padding: 11px 14px;
    border-radius: var(--raio-p);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.lateral-link .icone {
    width: 19px;
    height: 19px;
}

.lateral-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
}

.lateral-link.ativo {
    background: rgba(132, 224, 67, 0.1);
    color: #FFFFFF;
    font-weight: 700;
}

.lateral-link.ativo .icone {
    color: var(--verde-claro);
}

.lateral-link.ativo::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -12px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--verde-claro);
}

.lateral-usuario {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px;
    padding: 12px;
    border-radius: var(--raio-m);
    background: rgba(255, 255, 255, 0.05);
}

.avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--verde-principal), var(--verde-claro));
    color: var(--azul-escuro);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.avatar-grande {
    width: 60px;
    height: 60px;
    font-size: 1.25rem;
}

.lateral-usuario-dados {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.lateral-usuario-nome {
    overflow: hidden;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lateral-usuario-email {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.botao-icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--raio-p);
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.botao-icone:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.botao-icone .icone {
    width: 18px;
    height: 18px;
}

.lateral-fundo {
    display: none;
}

/* Área principal */

.principal {
    min-height: 100vh;
    margin-left: var(--largura-lateral);
}

.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--altura-barra);
    padding: 0 36px;
    border-bottom: 1px solid var(--borda);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.4) blur(8px);
}

.barra-menu {
    display: none;
    color: var(--azul-escuro);
}

.barra-menu:hover {
    background: var(--fundo);
    color: var(--azul-escuro);
}

.barra-titulo {
    flex: 1;
    font-size: 1.25rem;
    letter-spacing: -0.4px;
}

.barra-data {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--texto-suave);
    font-size: 0.8125rem;
    font-weight: 500;
}

.barra-data .icone {
    width: 17px;
    height: 17px;
    color: var(--texto-fraco);
}

.conteudo {
    max-width: 1240px;
    padding: 32px 36px 56px;
}

/* ==========================================================================
   Cartões
   ========================================================================== */

.cartao {
    border: 1px solid var(--borda);
    border-radius: var(--raio-m);
    background: var(--superficie);
    box-shadow: var(--sombra-cartao);
}

.cartao-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--borda);
}

.cartao-titulo {
    font-size: 1rem;
    letter-spacing: -0.2px;
}

.cartao-corpo {
    padding: 22px 24px;
}

/* ==========================================================================
   Painel
   ========================================================================== */

.boas-vindas {
    position: relative;
    overflow: hidden;
    padding: 34px 38px;
    border-radius: var(--raio-g);
    color: #FFFFFF;
    background:
        radial-gradient(ellipse 70% 120% at 0% 0%, rgba(20, 64, 106, 0.95), transparent 70%),
        radial-gradient(ellipse 50% 90% at 100% 100%, rgba(22, 163, 74, 0.28), transparent 70%),
        var(--azul-escuro);
}

.boas-vindas > * {
    position: relative;
    z-index: 1;
}

.boas-vindas-dagua {
    position: absolute;
    top: -70px;
    right: -40px;
    z-index: 0;
    width: 330px;
    max-width: none;
    opacity: 0.1;
    pointer-events: none;
}

.boas-vindas-data {
    color: var(--verde-claro);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.boas-vindas h2 {
    margin-top: 10px;
    color: #FFFFFF;
    font-size: 2rem;
    letter-spacing: -0.8px;
}

.boas-vindas p {
    max-width: 34rem;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.9375rem;
}

.indicadores {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.indicador {
    padding: 20px 22px;
}

.indicador-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.indicador-rotulo {
    color: var(--texto-suave);
    font-size: 0.8125rem;
    font-weight: 500;
}

.indicador-icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--azul-claro-fundo);
    color: var(--azul-escuro);
}

.indicador-icone.verde {
    background: var(--sucesso-fundo);
    color: var(--verde-principal);
}

.indicador-icone .icone {
    width: 19px;
    height: 19px;
}

.indicador-valor {
    margin-top: 14px;
    color: var(--azul-escuro);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.6px;
}

.indicador-valor small {
    color: var(--texto-fraco);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
}

.indicador-nota {
    margin-top: 6px;
    color: var(--texto-suave);
    font-size: 0.8125rem;
}

.grade-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    margin-top: 20px;
}

/* Conta */

.conta-perfil {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.conta-nome {
    color: var(--azul-escuro);
    font-size: 1.0625rem;
    font-weight: 700;
}

.conta-email {
    color: var(--texto-suave);
    font-size: 0.875rem;
}

.lista-dados {
    margin: 0;
}

.lista-dados > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--borda);
    font-size: 0.875rem;
}

.lista-dados dt {
    color: var(--texto-suave);
}

.lista-dados dd {
    margin: 0;
    color: var(--texto);
    font-weight: 500;
    text-align: right;
}

/* Lista de verificações */

.verificacoes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.verificacoes li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--borda);
    font-size: 0.875rem;
}

.verificacoes li:first-child {
    border-top: 0;
    padding-top: 0;
}

.verificacao-marca {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sucesso-fundo);
    color: var(--verde-principal);
}

.verificacao-marca.falha {
    background: var(--erro-fundo);
    color: var(--erro);
}

.verificacao-marca .icone {
    width: 13px;
    height: 13px;
    stroke-width: 3;
}

.verificacao-nome {
    flex: 1;
    color: var(--texto);
    font-weight: 500;
}

.verificacao-detalhe {
    color: var(--texto-suave);
    font-size: 0.8125rem;
    text-align: right;
}

/* ==========================================================================
   Ambiente
   ========================================================================== */

.resumo-saude {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px 28px;
}

.resumo-saude-icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--sucesso-fundo);
    color: var(--verde-principal);
}

.resumo-saude-icone.falha {
    background: var(--erro-fundo);
    color: var(--erro);
}

.resumo-saude-icone .icone {
    width: 26px;
    height: 26px;
    stroke-width: 2.5;
}

.resumo-saude h2 {
    font-size: 1.25rem;
}

.resumo-saude p {
    margin-top: 4px;
    color: var(--texto-suave);
}

.resumo-saude .botao {
    margin-left: auto;
}

/* Duas colunas independentes: o grupo maior à esquerda, os menores
   empilhados à direita. Com grade comum, os cartões curtos esticariam
   até a altura do vizinho e ficariam com um vazio no meio. */
.grupos-verificacao {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
    margin-top: 20px;
}

.grupos-coluna {
    display: grid;
    gap: 20px;
}

/* ==========================================================================
   Página simples (erros)
   ========================================================================== */

.pagina-simples {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 32px 20px;
    background: var(--fundo);
}

.simples-caixa {
    width: 100%;
    max-width: 480px;
    text-align: center;
}

.simples-caixa .marca {
    margin-bottom: 44px;
}

.simples-caixa .marca-horizontal img {
    height: 52px;
}

/* Dois níveis para vencer .simples-caixa p, que também casa com este <p>. */
.simples-caixa .simples-codigo {
    margin: 0;
    color: var(--verde-principal);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.simples-caixa h1 {
    margin-top: 10px;
    font-size: 1.75rem;
    letter-spacing: -0.6px;
}

.simples-caixa p {
    margin: 12px auto 30px;
    max-width: 28rem;
    color: var(--texto-suave);
    text-wrap: balance;
}

/* ==========================================================================
   Versão especial preto e dourado
   USO RESTRITO — finais, premiações e eventos. Nunca em tela comum.
   ========================================================================== */

.premium {
    background: var(--preto);
    color: var(--dourado-claro);
}

.premium h1,
.premium h2,
.premium h3 {
    color: var(--dourado);
}

.premium .botao {
    background: var(--dourado);
    color: var(--preto);
}

.premium .botao:hover {
    background: var(--dourado-claro);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1180px) {
    .indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    /* Acesso: marca vira faixa no topo */
    .acesso {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .acesso-marca {
        gap: 0;
        padding: 22px 24px;
    }

    .acesso-chamada,
    .acesso-rodape-marca,
    .acesso-dagua {
        display: none;
    }

    .acesso-marca .marca-horizontal img {
        height: 34px;
    }

    .acesso-formulario {
        justify-content: flex-start;
        padding: 40px 24px 48px;
    }

    /* App: barra lateral vira gaveta */
    .lateral {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .menu-aberto .lateral {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(7, 30, 51, 0.35);
    }

    .lateral-topo .lateral-fechar {
        display: grid;
    }

    .lateral-fundo {
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgba(7, 30, 51, 0.45);
    }

    .menu-aberto .lateral-fundo {
        display: block;
    }

    .principal {
        margin-left: 0;
    }

    .barra {
        padding: 0 20px;
    }

    .barra-menu {
        display: grid;
    }

    .conteudo {
        padding: 24px 20px 48px;
    }

    .grade-2,
    .grupos-verificacao {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .barra-data {
        display: none;
    }

    .boas-vindas {
        padding: 26px 24px;
    }

    .boas-vindas h2 {
        font-size: 1.625rem;
    }

    .boas-vindas-dagua {
        width: 240px;
        top: -40px;
        right: -70px;
    }

    /* Indicadores em duas colunas compactas: em coluna única, os quatro
       ocupavam três telas de rolagem antes do conteúdo. */
    .indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 16px;
    }

    .indicador {
        padding: 16px;
    }

    .indicador-icone {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .indicador-icone .icone {
        width: 16px;
        height: 16px;
    }

    .indicador-rotulo {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .indicador-valor {
        margin-top: 10px;
        font-size: 1.375rem;
    }

    .indicador-nota {
        font-size: 0.75rem;
    }

    /* Detalhe da verificação desce para a linha de baixo, alinhado ao nome */
    .verificacoes li {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .verificacao-detalhe {
        flex-basis: 100%;
        padding-left: 34px;
        text-align: left;
    }

    .resumo-saude {
        flex-wrap: wrap;
    }

    .resumo-saude .botao {
        width: 100%;
        margin-left: 0;
    }

    .cartao-cabeca,
    .cartao-corpo {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ==========================================================================
   Etapa 1 — formulários completos
   ========================================================================== */

fieldset.campo {
    min-width: 0;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

legend.rotulo {
    padding: 0;
}

.rotulo-opcional {
    margin-left: 4px;
    color: var(--texto-fraco);
    font-size: 0.75rem;
    font-weight: 500;
}

.campo-erro {
    margin-top: 6px;
    color: var(--erro-texto);
    font-size: 0.8125rem;
    font-weight: 500;
}

.campo-ajuda {
    margin: -10px 0 20px;
    color: var(--texto-fraco);
    font-size: 0.8125rem;
}

.campo .campo-ajuda {
    margin: 6px 0 0;
}

.entrada[aria-invalid="true"] {
    border-color: var(--erro);
}

.entrada[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 4px rgba(194, 54, 43, 0.14);
}

select.entrada {
    padding-right: 40px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

.grade-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.grade-cidade {
    grid-template-columns: minmax(0, 1fr) 110px;
}

/* Opções em cartão (rádio) */

.opcoes {
    display: grid;
    gap: 10px;
}

.opcoes-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opcao {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: var(--superficie);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.opcao:hover {
    border-color: var(--texto-fraco);
}

.opcao input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--verde-principal);
}

.opcao:has(input:checked) {
    border-color: var(--verde-principal);
    background: var(--sucesso-fundo);
    box-shadow: inset 0 0 0 1px var(--verde-principal);
}

.opcao:has(input:focus-visible) {
    box-shadow: var(--sombra-foco);
}

.opcao-detalhada {
    align-items: flex-start;
}

.opcao-detalhada input {
    margin-top: 2px;
}

.opcao-detalhada strong {
    display: block;
    color: var(--azul-escuro);
    font-size: 0.875rem;
    font-weight: 700;
}

.opcao-detalhada small {
    display: block;
    margin-top: 2px;
    color: var(--texto-suave);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.acoes-formulario {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

/* ==========================================================================
   Botões e links extras
   ========================================================================== */

.botao-perigo {
    background: var(--superficie);
    color: var(--erro);
    box-shadow: inset 0 0 0 1px rgba(194, 54, 43, 0.35);
}

.botao-perigo:hover {
    background: var(--erro-fundo);
}

.botao-whatsapp {
    background: #1FA855;
}

.botao-whatsapp:hover {
    background: #178A45;
}

.botao-whatsapp .icone {
    color: #FFFFFF;
}

.link-forte {
    color: var(--verde-principal);
    font-weight: 700;
    text-decoration: none;
}

.link-forte:hover {
    color: var(--sucesso-texto);
    text-decoration: underline;
}

.link-botao {
    padding: 0;
    border: 0;
    background: none;
    color: var(--texto-suave);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.link-botao:hover {
    color: var(--azul-escuro);
}

.link-perigo {
    color: var(--erro);
}

.link-perigo:hover {
    color: var(--erro-texto);
}

.link-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    color: var(--texto-suave);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.link-voltar:hover {
    color: var(--azul-escuro);
}

.link-voltar .icone {
    width: 17px;
    height: 17px;
}

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

.texto-atencao {
    color: #A16207;
    font-weight: 500;
}

/* ==========================================================================
   Avisos extras
   ========================================================================== */

.aviso-atencao {
    background: #FEF6E4;
    color: #7A4B05;
}

.aviso-link {
    margin-top: 20px;
    text-decoration: none;
    transition: background-color 0.15s;
}

.aviso-link:hover {
    background: #FCEDCB;
}

.aviso-link > span {
    flex: 1;
}

.aviso-link strong {
    font-weight: 700;
}

/* ==========================================================================
   Mensagem de retorno (flash), com link para copiar
   ========================================================================== */

.flash {
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: var(--raio-m);
    border: 1px solid transparent;
}

.flash-sucesso {
    background: var(--sucesso-fundo);
    border-color: rgba(22, 163, 74, 0.25);
    color: var(--sucesso-texto);
}

.flash-erro {
    background: var(--erro-fundo);
    border-color: rgba(194, 54, 43, 0.25);
    color: var(--erro-texto);
}

.flash-mensagem {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
}

.flash-mensagem .icone {
    width: 19px;
    height: 19px;
    margin-top: 2px;
}

.caixa-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 6px 6px 6px 14px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: var(--superficie);
    color: var(--texto-suave);
}

.caixa-link > .icone {
    width: 18px;
    height: 18px;
}

.caixa-link-texto {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--texto);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8125rem;
    text-overflow: ellipsis;
}

.caixa-link-texto:focus {
    outline: none;
}

.caixa-link .botao {
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.8125rem;
}

.caixa-link .botao .icone {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Cabeçalho de página e grades
   ========================================================================== */

.cabecalho-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
}

.cabecalho-pagina-sobre {
    color: var(--verde-principal);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cabecalho-pagina-titulo {
    margin-top: 4px;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
}

.cabecalho-pagina-nota {
    color: var(--texto-suave);
    font-size: 0.875rem;
}

.grade-lateral {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.grade-conta {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.pilha {
    display: grid;
    gap: 20px;
}

/* ==========================================================================
   Busca
   ========================================================================== */

.busca {
    position: relative;
    flex: 1;
    max-width: 380px;
}

.busca > .icone {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--texto-fraco);
    transform: translateY(-50%);
    pointer-events: none;
}

.busca .entrada {
    height: 44px;
    padding-left: 42px;
}

/* ==========================================================================
   Tabela
   ========================================================================== */

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.tabela th,
.tabela td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--borda);
    text-align: left;
    vertical-align: middle;
}

.tabela thead th {
    background: var(--fundo);
    color: var(--texto-suave);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tabela thead th:first-child {
    border-top-left-radius: var(--raio-m);
}

.tabela thead th:last-child {
    border-top-right-radius: var(--raio-m);
}

.tabela tbody tr:last-child td {
    border-bottom: 0;
}

.tabela tbody tr:hover {
    background: rgba(22, 163, 74, 0.04);
}

.tabela-link {
    color: var(--azul-escuro);
    font-weight: 700;
    text-decoration: none;
}

.tabela-link:hover {
    color: var(--verde-principal);
    text-decoration: underline;
}

.coluna-numero {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.rodape-lista {
    margin-top: 12px;
    color: var(--texto-fraco);
    font-size: 0.8125rem;
}

/* ==========================================================================
   Estados vazios
   ========================================================================== */

.vazio {
    padding: 56px 32px;
    text-align: center;
}

.vazio h2 {
    margin-top: 18px;
    font-size: 1.25rem;
}

.vazio p {
    max-width: 30rem;
    margin: 8px auto 24px;
    color: var(--texto-suave);
}

.vazio-icone {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--azul-claro-fundo);
    color: var(--azul-escuro);
}

.vazio-icone .icone {
    width: 26px;
    height: 26px;
}

.vazio-pequeno {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--texto-suave);
    font-size: 0.875rem;
}

.vazio-pequeno .vazio-icone {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.vazio-pequeno .vazio-icone .icone {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Pessoas, papéis e convites
   ========================================================================== */

.lista-pessoas,
.lista-convites,
.lista-clientes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pessoa {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-top: 1px solid var(--borda);
}

.pessoa:first-child {
    border-top: 0;
}

.pessoa-dados {
    flex: 1;
    min-width: 0;
}

.pessoa-nome {
    color: var(--azul-escuro);
    font-weight: 700;
}

.pessoa-voce {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--fundo);
    color: var(--texto-suave);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    vertical-align: 2px;
}

.pessoa-contato {
    overflow: hidden;
    color: var(--texto-suave);
    font-size: 0.8125rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pessoa-papeis {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.etiqueta-papel {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--azul-claro-fundo);
    color: var(--azul-escuro);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.etiqueta-papel form {
    display: flex;
}

.etiqueta-remover {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin: 0 -4px 0 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
}

.etiqueta-remover:hover {
    background: var(--erro-fundo);
    color: var(--erro);
}

.etiqueta-remover .icone {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
}

.lista-convites li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--borda);
}

.lista-convites li:first-child {
    border-top: 0;
}

.convite-item-papel {
    color: var(--azul-escuro);
    font-size: 0.875rem;
    font-weight: 700;
}

.convite-item-info {
    color: var(--texto-suave);
    font-size: 0.8125rem;
}

.lista-clientes li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    border-top: 1px solid var(--borda);
}

.lista-clientes li:first-child {
    border-top: 0;
}

.lista-clientes-icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--azul-claro-fundo);
    color: var(--azul-escuro);
}

.lista-clientes-nome {
    color: var(--azul-escuro);
    font-weight: 700;
}

.lista-clientes-papel {
    color: var(--texto-suave);
    font-size: 0.8125rem;
}

.indicador-link {
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.indicador-link:hover {
    border-color: var(--borda-forte);
    box-shadow: 0 2px 10px rgba(11, 45, 75, 0.08);
}

/* ==========================================================================
   Plataforma — detalhe do cliente
   ========================================================================== */

.cartao-formulario {
    max-width: 720px;
}

.cliente-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 26px 28px;
}

.cliente-topo-titulo {
    display: flex;
    gap: 8px;
}

.cliente-topo h2 {
    margin-top: 12px;
    font-size: 1.625rem;
    letter-spacing: -0.6px;
}

.cliente-topo-acoes {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cliente-topo-acoes .icone {
    width: 17px;
    height: 17px;
}

.dados-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin: 16px 0 0;
}

.dados-linha dt {
    color: var(--texto-fraco);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dados-linha dd {
    margin: 2px 0 0;
    color: var(--texto);
    font-size: 0.875rem;
    font-weight: 500;
}

/* ==========================================================================
   Barra lateral — cliente ativo
   ========================================================================== */

.lateral-cliente {
    margin: 20px 0 6px;
    padding: 0 12px;
}

.lateral-cliente .lateral-secao {
    margin: 0 0 8px;
}

.lateral-cliente-nome {
    color: #FFFFFF;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
}

.lateral-cliente-troca {
    position: relative;
}

.lateral-cliente-troca select {
    width: 100%;
    padding: 9px 34px 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--raio-p);
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    appearance: none;
    cursor: pointer;
}

.lateral-cliente-troca select:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lateral-cliente-troca option {
    color: var(--texto);
}

.lateral-cliente-troca .icone {
    position: absolute;
    top: 50%;
    right: 11px;
    width: 15px;
    height: 15px;
    color: rgba(255, 255, 255, 0.6);
    transform: translateY(-50%);
    pointer-events: none;
}

.lateral-cliente-papeis {
    margin-top: 4px;
    color: var(--verde-claro);
    font-size: 0.75rem;
    font-weight: 500;
}

/* ==========================================================================
   Acesso — cadastro e convite
   ========================================================================== */

.acesso-caixa:has(.acesso-caixa-larga) {
    max-width: 520px;
}

.acesso-ajuda-nota {
    display: block;
    margin-top: 8px;
    color: var(--texto-fraco);
    font-size: 0.75rem;
}

.convite-titulo {
    margin-top: 14px;
    font-size: 1.625rem;
    line-height: 1.2;
}

.convite-papel {
    display: grid;
    gap: 2px;
    margin: 20px 0 26px;
    padding: 14px 16px;
    border-left: 3px solid var(--verde-principal);
    border-radius: 0 var(--raio-p) var(--raio-p) 0;
    background: var(--fundo);
}

.convite-papel-nome {
    color: var(--azul-escuro);
    font-weight: 700;
}

.convite-papel-descricao {
    color: var(--texto-suave);
    font-size: 0.875rem;
}

.convite-conta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
}

.convite-conta-nome {
    color: var(--azul-escuro);
    font-weight: 700;
}

.convite-conta-email {
    color: var(--texto-suave);
    font-size: 0.8125rem;
}

.convite-trocar {
    margin-top: 14px;
    text-align: center;
}

.divisor-texto {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 22px;
    color: var(--texto-fraco);
    font-size: 0.8125rem;
    font-weight: 500;
}

.divisor-texto::before,
.divisor-texto::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borda);
}

/* ==========================================================================
   Responsivo — Etapa 1
   ========================================================================== */

@media (max-width: 1080px) {
    .grade-lateral,
    .grade-conta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .coluna-media {
        display: none;
    }

    .tabela th,
    .tabela td {
        padding: 12px 14px;
    }

    .cliente-topo {
        flex-direction: column;
    }

    .pessoa {
        flex-wrap: wrap;
        padding: 14px 18px;
    }

    .pessoa-papeis {
        width: 100%;
        justify-content: flex-start;
        padding-left: 54px;
    }
}

@media (max-width: 600px) {
    .grade-campos {
        grid-template-columns: 1fr;
    }

    .grade-cidade {
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    .cabecalho-pagina {
        align-items: stretch;
    }

    .busca {
        max-width: none;
    }

    .caixa-link {
        flex-wrap: wrap;
        padding: 10px;
    }

    .caixa-link-texto {
        flex-basis: calc(100% - 30px);
    }

    .caixa-link .botao {
        flex: 1;
    }

    .acoes-formulario {
        flex-direction: column-reverse;
    }

    .acoes-formulario .botao {
        width: 100%;
    }

    .lista-convites li,
    .lista-clientes li {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Contador numérico (quantidade de itens): sem o ponto de status do .selo */
.contador {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--azul-claro-fundo);
    color: var(--azul-escuro);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Opções simples lado a lado (ex.: gênero): mais compactas que as
   detalhadas, para caber em meia coluna sem encostar na borda. */
.opcoes-2 .opcao:not(.opcao-detalhada) {
    gap: 8px;
    padding: 12px 10px;
    font-size: 0.875rem;
}

/* ==========================================================================
   Etapa 2 — locais
   ========================================================================== */

.cartao-subtitulo {
    margin-top: 2px;
    color: var(--texto-suave);
    font-size: 0.8125rem;
}

.botao-pequeno {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.8125rem;
}

.botao-pequeno .icone {
    width: 16px;
    height: 16px;
}

.formulario-largo {
    display: grid;
    gap: 20px;
    max-width: 880px;
}

.formulario-largo .acoes-formulario {
    margin-top: 0;
}

.cartao-estreito {
    max-width: 560px;
}

/* Lista de locais */

.lista-locais {
    display: grid;
    gap: 14px;
}

.local-cartao {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.local-cartao:hover {
    border-color: var(--borda-forte);
    box-shadow: 0 2px 10px rgba(11, 45, 75, 0.08);
}

.local-cartao-icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--sucesso-fundo);
    color: var(--verde-principal);
}

.local-cartao-icone .icone {
    width: 22px;
    height: 22px;
}

.local-cartao-dados {
    flex: 1;
    min-width: 0;
}

.local-cartao-dados h3 {
    font-size: 1.0625rem;
}

.local-cartao-endereco {
    margin-top: 2px;
    color: var(--texto-suave);
    font-size: 0.875rem;
}

.local-cartao-horario {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--texto);
    font-size: 0.8125rem;
    font-weight: 500;
}

.local-cartao-horario .icone {
    width: 15px;
    height: 15px;
    color: var(--texto-fraco);
}

.local-cartao-lado {
    display: flex;
    align-items: center;
    gap: 12px;
}

.local-cartao-seta {
    color: var(--texto-fraco);
    transition: transform 0.15s, color 0.15s;
}

.local-cartao:hover .local-cartao-seta {
    color: var(--azul-escuro);
    transform: translateX(3px);
}

.local-inativo .local-cartao-icone {
    background: var(--fundo);
    color: var(--texto-fraco);
}

.local-inativo .local-cartao-dados h3 {
    color: var(--texto-suave);
}

/* Detalhe do local */

.local-endereco {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    color: var(--texto-suave);
    font-size: 0.9375rem;
}

.local-endereco .icone {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--verde-principal);
}

.horario-semana {
    margin: 0;
    padding: 0;
    list-style: none;
}

.horario-semana li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 24px;
    border-top: 1px solid var(--borda);
    font-size: 0.9375rem;
}

.horario-semana li:first-child {
    border-top: 0;
}

.horario-dia {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--azul-escuro);
    font-weight: 500;
}

.horario-hoje {
    background: var(--verde-5, rgba(22, 163, 74, 0.05));
}

.horario-hoje .horario-dia {
    font-weight: 700;
}

.horario-hoje-marca {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--sucesso-fundo);
    color: var(--sucesso-texto);
    font-size: 0.6875rem;
    font-weight: 700;
}

.horario-faixa {
    color: var(--texto);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.horario-fechado {
    color: var(--texto-fraco);
}

/* Formulário — endereço */

.grade-endereco {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 110px;
    gap: 0 16px;
}

.campo-complemento {
    grid-column: 1 / span 1;
}

.campo-bairro {
    grid-column: 2 / span 2;
}

.campo-cidade {
    grid-column: 1 / span 2;
}

.campo-complemento,
.campo-cep {
    min-width: 0;
}

/* Formulário — horário da semana */

.campo-erro-bloco {
    margin: 0 0 14px;
}

.semana {
    display: grid;
    gap: 8px;
}

.semana-dia {
    display: grid;
    grid-template-columns: 150px auto 1fr;
    align-items: center;
    gap: 6px 16px;
    padding: 10px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    transition: background-color 0.15s, border-color 0.15s;
}

.semana-chave {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.semana-chave input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--verde-principal);
}

.semana-nome {
    color: var(--azul-escuro);
    font-weight: 700;
}

.semana-horas {
    display: flex;
    align-items: center;
    gap: 10px;
}

.entrada-hora {
    width: 120px;
    height: 42px;
    padding: 0 10px;
    font-variant-numeric: tabular-nums;
}

.semana-ate {
    color: var(--texto-suave);
    font-size: 0.875rem;
}

.semana-situacao {
    color: var(--texto-fraco);
    font-size: 0.875rem;
    font-weight: 500;
}

.semana-fechado {
    background: var(--fundo);
}

.semana-fechado .semana-nome {
    color: var(--texto-suave);
}

.semana-fechado .semana-horas {
    opacity: 0.4;
}

.semana-com-erro {
    border-color: var(--erro);
}

.semana-erro {
    grid-column: 1 / -1;
    margin: 0;
}

.campo-ajuda-solta {
    margin: 14px 0 0;
}

@media (max-width: 760px) {
    .grade-endereco {
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    .campo-cep {
        grid-column: 1 / -1;
    }

    .campo-logradouro {
        grid-column: 1 / span 1;
    }

    .campo-complemento,
    .campo-bairro,
    .campo-cidade {
        grid-column: auto;
    }

    .campo-complemento {
        grid-column: 1 / -1;
    }

    .campo-bairro {
        grid-column: 1 / -1;
    }

    .campo-cidade {
        grid-column: 1 / span 1;
    }

    .semana-dia {
        grid-template-columns: 1fr;
    }

    .semana-situacao {
        display: none;
    }

    .entrada-hora {
        flex: 1;
        width: auto;
    }

    .cartao-cabeca:has(.botao-pequeno) {
        flex-direction: column;
        align-items: flex-start;
    }

    .local-cartao {
        padding: 16px;
        gap: 14px;
    }

    .local-cartao-icone {
        width: 40px;
        height: 40px;
    }

    .horario-semana li {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Título de grupo de campos (ex.: "Endereço"), separando do campo acima */
.rotulo-grupo {
    margin: 4px 0 14px;
    padding-top: 18px;
    border-top: 1px solid var(--borda);
    color: var(--azul-escuro);
    font-size: 0.875rem;
    font-weight: 700;
}

/* Gênero com três opções lado a lado */
.opcoes-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opcoes-3 .opcao {
    gap: 8px;
    padding: 12px 10px;
    font-size: 0.875rem;
}

/* Campo que aparece conforme outra escolha (ex.: "Qual?" do gênero Outro).
   Só some quando há JavaScript: sem ele, fica sempre visível e utilizável. */
.campo-condicional {
    margin-top: 14px;
}

.js .campo-condicional.fechado {
    display: none;
}

@media (max-width: 420px) {
    .opcoes-3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   Zona de perigo — ações sem volta (excluir clube)
   ========================================================================== */

.zona-perigo {
    margin-top: 32px;
    border-color: rgba(194, 54, 43, 0.35);
}

.zona-perigo .cartao-cabeca {
    border-bottom-color: rgba(194, 54, 43, 0.2);
}

.zona-perigo .cartao-titulo {
    color: var(--erro-texto);
}

.zona-perigo-texto {
    margin-bottom: 10px;
    color: var(--texto-suave);
    font-size: 0.875rem;
}

.zona-perigo-lista {
    margin: 0 0 16px;
    padding-left: 20px;
    color: var(--texto);
    font-size: 0.875rem;
    line-height: 1.8;
}

.zona-perigo-lista span {
    color: var(--texto-fraco);
}

.zona-perigo-form {
    max-width: 520px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--borda);
}

.zona-perigo-nome {
    color: var(--erro-texto);
    font-weight: 700;
    user-select: all;
}

/* Vermelho sólido: branco sobre #C2362B dá contraste 5:1 (passa no mínimo) */
.botao-excluir {
    background: var(--erro);
}

.botao-excluir:hover {
    background: var(--erro-texto);
}

.botao-excluir .icone {
    color: #FFFFFF;
}

.botao-excluir[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.botao-excluir[disabled]:hover {
    background: var(--erro);
}

/* ==========================================================================
   Plataforma — usuários
   ========================================================================== */

/* Barra de busca e filtros */

.filtros {
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-m);
    background: var(--superficie);
    box-shadow: var(--sombra-cartao);
}

.filtros-busca {
    display: flex;
    gap: 10px;
}

.filtros-busca .busca {
    flex: 1;
    max-width: none;
}

.filtros-busca .botao {
    min-height: 44px;
}

.filtros-linha {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.filtro {
    display: grid;
    gap: 5px;
}

.filtro > span {
    color: var(--texto-suave);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.filtro .entrada {
    height: 40px;
    padding-left: 12px;
    font-size: 0.875rem;
}

.lista-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--texto-suave);
    font-size: 0.875rem;
}

.lista-resumo strong {
    color: var(--azul-escuro);
}

.lista-resumo .link-acao .icone {
    width: 14px;
    height: 14px;
}

/* Tabela */

.tabela-usuarios td {
    vertical-align: middle;
}

.tabela-usuarios td.coluna-media {
    white-space: nowrap;
}

.tabela-usuarios .clubes-celula {
    min-width: 150px;
}

.pessoa-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.pessoa-linha:hover .pessoa-linha-nome {
    color: var(--verde-principal);
    text-decoration: underline;
}

.avatar-pequeno {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
}

.pessoa-linha-dados {
    display: grid;
    min-width: 0;
}

.pessoa-linha-nome {
    color: var(--azul-escuro);
    font-weight: 700;
}

.pessoa-linha-apelido {
    margin-left: 4px;
    color: var(--texto-suave);
    font-weight: 500;
}

.pessoa-linha-email {
    overflow: hidden;
    color: var(--texto-suave);
    font-size: 0.8125rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.clubes-celula {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clubes-celula li {
    display: grid;
    line-height: 1.35;
}

.clubes-celula span {
    color: var(--texto);
    font-weight: 500;
}

.clubes-celula small {
    color: var(--texto-suave);
    font-size: 0.75rem;
}

.selos-celula {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.selo-atencao {
    background: #FEF6E4;
    color: #7A4B05;
}

.texto-fraco {
    color: var(--texto-fraco);
}

.linha-inativa .pessoa-linha-nome,
.linha-inativa .clubes-celula span {
    color: var(--texto-suave);
}

.linha-inativa .avatar {
    filter: grayscale(1);
    opacity: 0.6;
}

/* Paginação */

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
    font-size: 0.875rem;
}

.paginacao-atual {
    color: var(--texto-suave);
}

.paginacao-passo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: var(--superficie);
    color: var(--azul-escuro);
    font-weight: 700;
    text-decoration: none;
}

.paginacao-passo:hover {
    background: var(--fundo);
}

.paginacao-passo .icone {
    width: 16px;
    height: 16px;
}

/* Detalhe */

.usuario-topo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.usuario-topo .avatar-grande {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
}

.usuario-topo h2 {
    margin-top: 10px;
    font-size: 1.625rem;
    letter-spacing: -0.6px;
}

.usuario-topo-apelido {
    color: var(--texto-suave);
    font-weight: 500;
}

.usuario-topo-email {
    margin-top: 2px;
    color: var(--texto-suave);
}

.lista-dados-solta > div:first-child {
    padding-top: 0;
    border-top: 0;
}

.bloco-espacado {
    margin-top: 20px;
}

.lista-clientes-texto {
    flex: 1;
    min-width: 0;
}

@media (max-width: 1080px) {
    .filtros-linha {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tabela-usuarios .coluna-acesso {
        display: none;
    }
}

@media (max-width: 600px) {
    .filtros {
        padding: 14px;
    }

    .filtros-linha {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .usuario-topo {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Botão de busca: texto no computador, só a lupa no celular */

.filtros-busca .botao .icone {
    display: none;
    width: 20px;
    height: 20px;
}

/* No celular a tabela de usuários vira uma lista de cartões:
   pessoa em cima, clubes e selos embaixo, alinhados ao nome. */

@media (max-width: 600px) {
    .filtros-busca .botao {
        width: 48px;
        padding: 0;
    }

    .filtros-busca .botao .icone {
        display: block;
    }

    .filtros-busca .botao span {
        display: none;
    }

    .tabela-usuarios thead {
        display: none;
    }

    .tabela-usuarios,
    .tabela-usuarios tbody,
    .tabela-usuarios tr,
    .tabela-usuarios td {
        display: block;
    }

    .tabela-usuarios tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--borda);
    }

    .tabela-usuarios tbody tr:last-child {
        border-bottom: 0;
    }

    .tabela-usuarios td {
        padding: 0;
        border: 0;
    }

    .tabela-usuarios tbody tr td + td {
        margin-top: 8px;
        padding-left: 46px;
    }

    .tabela-usuarios td.coluna-media {
        display: none;
    }

    .tabela-usuarios td.celula-vazia {
        display: none;
    }

    .tabela-usuarios .pessoa-linha-email {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .tabela-usuarios .clubes-celula small {
        display: inline;
    }

    .tabela-usuarios .clubes-celula li {
        display: block;
    }

    .tabela-usuarios .clubes-celula small::before {
        content: " · ";
    }
}

/* ==========================================================================
   Modalidades e quadras
   ========================================================================== */

/* Campo + botão na mesma linha (adicionar modalidade, adicionar quadra) */

.formulario-linha {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.formulario-linha .campo {
    flex: 1;
    margin-bottom: 0;
}

.formulario-linha .botao {
    min-height: 44px;
    flex-shrink: 0;
}

.cartao-formulario-linha {
    margin-bottom: 18px;
    padding: 20px 24px;
}

.cartao-formulario-linha .campo-ajuda-solta {
    margin-top: 10px;
}

.tabela-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Bloco de cada modalidade dentro da página do clube */

.modalidade {
    padding: 20px 24px 22px;
    border-top: 1px solid var(--borda);
    scroll-margin-top: 80px;
}

.modalidade-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.modalidade-nome {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    color: var(--azul-escuro);
    font-size: 1.0625rem;
}

.quadras-lista {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.quadras-lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    background: var(--superficie);
}

.quadra-icone {
    display: inline-flex;
    color: var(--verde-principal);
}

.quadra-icone .icone {
    width: 18px;
    height: 18px;
}

.quadra-nome {
    min-width: 0;
    color: var(--azul-escuro);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.quadra-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.quadra-inativa .quadra-nome {
    color: var(--texto-suave);
}

.quadra-inativa .quadra-icone {
    color: var(--texto-fraco);
}

.formulario-quadra .entrada {
    height: 44px;
}

@media (max-width: 600px) {
    .formulario-linha {
        flex-direction: column;
        align-items: stretch;
    }

    .formulario-linha .botao {
        width: 100%;
    }

    .modalidade {
        padding: 18px 18px 20px;
    }

    .modalidade-topo {
        flex-direction: column;
        align-items: flex-start;
    }

    .quadras-lista li {
        flex-wrap: wrap;
    }

    .quadra-acoes {
        width: 100%;
        margin-left: 28px;
    }

    .tabela-acoes {
        flex-direction: column;
        align-items: stretch;
    }
}

.modalidade .campo-ajuda-solta {
    margin: 0 0 12px;
}

/* ==========================================================================
   Campeonatos
   ========================================================================== */

.entrada-texto {
    height: auto;
    min-height: 150px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

.campo-estreito {
    max-width: 360px;
}

.campo-caixa {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    background: var(--superficie);
    cursor: pointer;
}

.campo-caixa input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--azul-escuro);
}

.campo-caixa span {
    display: grid;
    gap: 2px;
}

.campo-caixa strong {
    color: var(--azul-escuro);
}

.campo-caixa small {
    color: var(--texto-suave);
    font-size: 0.8125rem;
}

.texto-corrido {
    margin: 0;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

/* Categorias da modalidade */

.formulario-categoria .campo-genero {
    flex: 0 0 200px;
}

@media (max-width: 600px) {
    .formulario-categoria .campo-genero {
        flex: 1 1 auto;
    }
}

@media (max-width: 600px) {
    .quadras-lista-simples .quadra-acoes {
        margin-left: 0;
    }
}
/* Ordenar categorias: subir e descer */

.quadras-lista-ordenavel li {
    scroll-margin-top: 90px;
}

.ordenar {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}

.ordenar form {
    display: inline-flex;
}

.ordenar-botao {
    width: 32px;
    height: 32px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    background: var(--superficie);
    color: var(--azul-escuro);
}

.ordenar-botao:hover:not(:disabled) {
    background: var(--fundo);
    border-color: var(--borda-forte);
}

.ordenar-botao:disabled {
    cursor: default;
    opacity: 0.35;
}

.ordenar-botao .icone {
    width: 16px;
    height: 16px;
}

@media (max-width: 600px) {
    .quadras-lista-ordenavel .quadra-acoes {
        margin-left: 0;
    }
}
/* Excluir categoria: botão de ícone, discreto até o ponteiro chegar */

.excluir-botao {
    width: 34px;
    height: 34px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    background: var(--superficie);
    color: var(--texto-suave);
}

.excluir-botao:hover,
.excluir-botao:focus-visible {
    border-color: #E4B4B0;
    background: #FDF1F0;
    color: #B42318;
}

.excluir-botao .icone {
    width: 16px;
    height: 16px;
}
/* Categorias do campeonato */

.categorias-escolha {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.caixa-compacta {
    margin-top: 0;
    padding: 12px 14px;
}

.caixa-compacta strong {
    overflow-wrap: anywhere;
}

.caixa-inativa {
    background: var(--fundo);
}

.caixa-inativa strong {
    color: var(--texto-suave);
}

.grupo-atalhos {
    display: inline-flex;
    gap: 16px;
}

.grupo-atalhos .link-acao {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
}

.categorias-grupo + .categorias-grupo {
    margin-top: 18px;
}

.categorias-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--azul-escuro);
    font-size: 0.9375rem;
}

.categorias-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.categorias-chips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--azul-escuro);
    font-size: 0.875rem;
    font-weight: 700;
}

.categorias-chips .chip-inativo {
    background: var(--fundo);
    color: var(--texto-suave);
}

.categorias-chips small {
    color: var(--texto-fraco);
    font-weight: 500;
}

@media (max-width: 600px) {
    .categorias-escolha {
        grid-template-columns: 1fr;
    }
}
/* Lista de campeonatos no celular: as colunas de datas somem, então as datas
   vêm para baixo do nome, e a linha de clube/modalidade pode quebrar. */

.sublinha-quebra {
    white-space: normal;
    text-overflow: clip;
}

.detalhe-celular {
    display: none;
}

@media (max-width: 760px) {
    .detalhe-celular {
        display: grid;
        gap: 2px;
        margin-top: 6px;
        color: var(--texto-suave);
        font-size: 0.8125rem;
    }
}
/* ==========================================================================
   Campeonatos para o jogador (vitrine)
   ========================================================================== */

.vitrine {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.vitrine-cartao {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 20px 22px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-m);
    background: var(--superficie);
    box-shadow: var(--sombra-cartao);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

.vitrine-cartao:hover,
.vitrine-cartao:focus-visible {
    border-color: var(--verde-principal);
    transform: translateY(-2px);
}

.vitrine-cartao .selo {
    justify-self: start;
}

.vitrine-titulo {
    margin: 4px 0 0;
    color: var(--azul-escuro);
    font-size: 1.125rem;
    line-height: 1.3;
}

.vitrine-sub {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.875rem;
}

.vitrine-dados {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--borda);
}

.vitrine-dados > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.875rem;
}

.vitrine-dados dt {
    color: var(--texto-suave);
}

.vitrine-dados dd {
    margin: 0;
    color: var(--azul-escuro);
    font-weight: 700;
    text-align: right;
}

.vitrine-dados small {
    display: block;
    color: var(--texto-suave);
    font-size: 0.75rem;
    font-weight: 500;
}

@media (max-width: 600px) {
    .vitrine {
        grid-template-columns: 1fr;
    }
}