/* ===========================================================================
   Fluxo Agenda — paleta da marca

     Branco Inspiracao    #FFFFFF
     Verde Transformacao  #B7BF48   acao primaria, item ativo, confirmado
     Terracota Poder      #B6612D   selecao, pendencia, alerta
     Turqueza Elegante    #02525E   titulos, cabecalhos, texto forte

   As quatro cores da marca sao os tokens --marca-*. Os tons derivados
   (--verde-claro, --terracota-suave, ...) sao mistura dessas mesmas cores com
   branco: nenhuma cor nova entra na paleta, so versoes mais leves para fundo.
   =========================================================================== */

:root {
    /* --- marca --- */
    --marca-branco:    #FFFFFF;
    --marca-verde:     #B7BF48;
    --marca-terracota: #B6612D;
    --marca-turqueza:  #02525E;

    /* --- derivados do verde --- */
    --verde-escuro:  #9AA23A;
    --verde-medio:   #C6CD69;
    --verde-claro:   #EDF0D4;
    --verde-vidro:   #F6F8E9;

    /* --- derivados do terracota --- */
    --terracota-escuro: #934E23;
    --terracota-claro:  #F5E2D6;
    --terracota-vidro:  #FBF0E9;

    /* --- derivados do turqueza --- */
    --turqueza-escuro: #013C45;
    --turqueza-medio:  #0E7185;
    --turqueza-claro:  #D9E7EA;
    --turqueza-vidro:  #EFF5F6;

    /* --- neutros: cinzas puxados para o turqueza, para nao brigar com a marca --- */
    --texto:        #17323A;
    --texto-suave:  #5B7379;
    --texto-fraco:  #8CA1A6;
    --borda:        #E3EAEC;
    --borda-forte:  #CBD8DB;
    --fundo:        #F7F9FA;
    --superficie:   #FFFFFF;

    --raio:      14px;
    --raio-sm:   10px;
    --raio-pill: 999px;
    --sombra:    0 1px 2px rgba(2, 82, 94, .05), 0 8px 24px rgba(2, 82, 94, .06);
    --sombra-sm: 0 1px 2px rgba(2, 82, 94, .06);

    --topo-altura: 76px;
    --lateral-largura: 264px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--marca-turqueza); font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

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

/* ===========================================================================
   Topo
   =========================================================================== */

.topo {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--topo-altura);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
}

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.marca-folha { width: 34px; height: 34px; flex: 0 0 auto; }

.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-texto strong {
    font-size: 21px;
    font-weight: 800;
    color: var(--marca-turqueza);
    letter-spacing: .01em;
}
.marca-texto span {
    font-size: 11px;
    letter-spacing: .32em;
    color: var(--texto-suave);
    font-weight: 600;
}

.topo-divisor {
    width: 1px;
    height: 38px;
    background: var(--borda);
    flex: 0 0 auto;
}

.topo-saudacao { flex: 0 0 auto; line-height: 1.25; }
.topo-saudacao strong { display: block; color: var(--marca-turqueza); font-size: 15px; }
.topo-saudacao span   { display: block; color: var(--texto-suave); font-size: 13px; }

.topo-busca { flex: 1 1 auto; max-width: 560px; margin: 0 auto; position: relative; }

.topo-busca input {
    width: 100%;
    height: 46px;
    padding: 0 16px 0 46px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--fundo);
    color: var(--texto);
    font-size: 14px;
    font-family: inherit;
}
.topo-busca input::placeholder { color: var(--texto-fraco); }
.topo-busca input:focus {
    outline: none;
    border-color: var(--turqueza-medio);
    background: var(--superficie);
    box-shadow: 0 0 0 4px var(--turqueza-claro);
}
.topo-busca .lupa {
    position: absolute;
    left: 15px; top: 50%;
    transform: translateY(-50%);
    color: var(--texto-fraco);
    pointer-events: none;
}
.topo-busca kbd {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    padding: 3px 7px;
    font: 600 11px/1 inherit;
    color: var(--texto-suave);
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: 6px;
}

.topo-acoes { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.sino {
    position: relative;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    background: var(--superficie);
    color: var(--texto-suave);
    cursor: pointer;
}
.sino:hover { border-color: var(--borda-forte); color: var(--marca-turqueza); }
.sino .contador {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    display: grid; place-items: center;
    background: var(--marca-terracota);
    color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: var(--raio-pill);
    border: 2px solid var(--superficie);
}

/* --- Caixa de notificacoes ------------------------------------------------
   <details> nativo: o navegador abre e fecha sozinho. Nao ha JavaScript aqui
   por decisao do projeto (a CSP fecha script-src em 'self' e nao existe handler
   inline em lugar nenhum), e como efeito colateral a caixa continua funcionando
   com o JS desligado.

   O marcador padrao do <summary> some pelos dois caminhos que existem: o
   ::-webkit-details-marker (Safari) e o list-style (o resto).                */
.sino-caixa { position: relative; }
.sino::-webkit-details-marker { display: none; }
.sino { list-style: none; }

.sino-caixa[open] > .sino {
    border-color: var(--marca-turqueza);
    color: var(--marca-turqueza);
}
.sino .contador.urgente { background: var(--marca-terracota); }

.sino-painel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: 0 18px 40px rgba(2, 82, 94, .18);
    overflow: hidden;
}

.sino-cabeca {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--borda);
    background: var(--fundo);
}
.sino-cabeca strong { color: var(--marca-turqueza); font-size: 14px; }
.sino-cabeca span { color: var(--texto-suave); font-size: 12px; }

.sino-vazio { margin: 0; padding: 22px 14px; color: var(--texto-suave); font-size: 13px; text-align: center; }

/* A lista rola por dentro: o painel nao pode crescer alem da janela. */
.sino-lista {
    list-style: none; margin: 0; padding: 0;
    max-height: 340px;
    overflow-y: auto;
}

.sino-item + .sino-item { border-top: 1px solid var(--borda); }
.sino-item > a {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: start;
    gap: 10px;
    padding: 11px 14px;
    text-decoration: none;
    color: inherit;
}
.sino-item > a:hover { background: var(--fundo); }

.sino-marca {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: var(--raio-sm);
    background: var(--turqueza-vidro);
    color: var(--marca-turqueza);
}
.sino-marca.atrasada { background: var(--terracota-vidro); color: var(--marca-terracota); }
.sino-marca.prazo { background: var(--verde-vidro); color: var(--verde-escuro); }

.sino-texto { min-width: 0; }
.sino-texto strong {
    display: block;
    font-size: 13px; font-weight: 600; line-height: 1.3;
    color: var(--texto);
    overflow-wrap: anywhere;
}
.sino-detalhe {
    display: block;
    margin-top: 2px;
    font-size: 12px; color: var(--texto-suave);
    overflow-wrap: anywhere;
}

.sino-quando {
    font-size: 11px; font-weight: 600;
    color: var(--texto-suave);
    white-space: nowrap;
    padding-top: 2px;
}
.sino-item.urgente .sino-quando { color: var(--marca-terracota); }

.sino-mais { margin: 0; padding: 10px 14px; font-size: 12px; color: var(--texto-suave); border-top: 1px solid var(--borda); }
.sino-mais a { color: var(--marca-turqueza); }

.sino-pe {
    display: flex; gap: 16px;
    padding: 10px 14px;
    border-top: 1px solid var(--borda);
    background: var(--fundo);
}
.sino-pe a { font-size: 12px; font-weight: 600; color: var(--marca-turqueza); text-decoration: none; }
.sino-pe a:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .sino-painel { width: calc(100vw - 24px); right: -8px; }
}

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

.avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    flex: 0 0 auto;
    background: var(--marca-turqueza);
}
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }

.usuario-info { line-height: 1.25; }
.usuario-info strong { display: block; font-size: 14px; color: var(--marca-turqueza); }
.usuario-info span   { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--texto-suave); }
.ponto-online { width: 7px; height: 7px; border-radius: 50%; background: var(--marca-verde); }

/* ===========================================================================
   Estruturas de pagina
   =========================================================================== */

.pagina { padding: 28px 24px 40px; }
.pagina-larga { max-width: 1500px; margin: 0 auto; }

.pagina-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.pagina-cabecalho h1 { font-size: 30px; }
.pagina-cabecalho p  { color: var(--texto-suave); margin-top: 4px; }

/* layout com barra lateral (painel do visualizador) */
.com-lateral { display: flex; min-height: calc(100vh - var(--topo-altura)); }

.lateral {
    width: var(--lateral-largura);
    flex: 0 0 auto;
    background: var(--superficie);
    border-right: 1px solid var(--borda);
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lateral-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: var(--raio);
    color: var(--texto-suave);
    font-weight: 600;
    font-size: 15px;
}
.lateral-item:hover { background: var(--fundo); color: var(--marca-turqueza); }
.lateral-item.ativo {
    background: var(--verde-vidro);
    color: var(--marca-turqueza);
    box-shadow: inset 3px 0 0 var(--marca-verde);
}
.lateral-item.ativo svg { color: var(--verde-escuro); }

.lateral-rodape { margin-top: auto; }

.cartao-ajuda {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--fundo);
}
.cartao-ajuda .icone { color: var(--verde-escuro); flex: 0 0 auto; }
.cartao-ajuda strong { display: block; font-size: 14px; color: var(--marca-turqueza); }
.cartao-ajuda a { font-size: 13px; color: var(--marca-terracota); font-weight: 600; }
.cartao-ajuda a:hover { text-decoration: underline; }

.conteudo { flex: 1 1 auto; min-width: 0; padding: 28px 26px 40px; }

/* ===========================================================================
   Cartoes
   =========================================================================== */

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

.cartao-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--borda);
}
.cartao-cabecalho h2 { font-size: 16px; display: flex; align-items: center; gap: 10px; }
.cartao-corpo { padding: 22px; }

.passo {
    display: inline-grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 12px; font-weight: 700;
    background: var(--verde-claro);
    color: var(--verde-escuro);
    flex: 0 0 auto;
}

/* ===========================================================================
   Botoes
   =========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--raio-sm);
    border: 1px solid transparent;
    background: transparent;
    font: 600 14px/1 inherit;
    color: var(--texto);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primario { background: var(--marca-verde); color: #2C3208; }
.btn-primario:hover:not(:disabled) { background: var(--verde-escuro); color: #fff; }

.btn-turqueza { background: var(--marca-turqueza); color: #fff; }
.btn-turqueza:hover:not(:disabled) { background: var(--turqueza-escuro); }

.btn-terracota { background: var(--marca-terracota); color: #fff; }
.btn-terracota:hover:not(:disabled) { background: var(--terracota-escuro); }

.btn-contorno {
    border-color: var(--borda-forte);
    background: var(--superficie);
    color: var(--marca-turqueza);
}
.btn-contorno:hover:not(:disabled) { border-color: var(--turqueza-medio); background: var(--turqueza-vidro); }

.btn-largo { width: 100%; }
.btn-sm { height: 38px; padding: 0 14px; font-size: 13px; }

.btn-icone {
    width: 42px; height: 42px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    background: var(--superficie);
    color: var(--texto-suave);
    display: grid; place-items: center;
    cursor: pointer;
}
.btn-icone:hover { border-color: var(--turqueza-medio); color: var(--marca-turqueza); }

/* ===========================================================================
   Formulario
   =========================================================================== */

.campo { margin-bottom: 18px; }

.rotulo {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
}
.rotulo .obrigatorio { color: var(--marca-terracota); }
.rotulo .opcional { color: var(--texto-fraco); font-weight: 500; }

.entrada, .selecao, .area {
    width: 100%;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    background: var(--superficie);
    color: var(--texto);
    font: 400 14px/1.4 inherit;
    padding: 0 14px;
    height: 46px;
}
.area { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }

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

.entrada:focus, .selecao:focus, .area:focus {
    outline: none;
    border-color: var(--turqueza-medio);
    box-shadow: 0 0 0 4px var(--turqueza-claro);
}

.selecao {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B7379' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

.campo-com-botao { display: flex; gap: 10px; }
.campo-com-botao .entrada, .campo-com-botao .selecao { flex: 1 1 auto; }

.dica { margin-top: 6px; font-size: 12px; color: var(--texto-suave); }

/* alternador presencial / online */
/* auto-fit em vez de "1fr 1fr": a modalidade passou de duas para tres opcoes
   (presencial, online, externo) e as colunas se ajustam sozinhas — em coluna
   estreita elas quebram em duas linhas em vez de espremer o texto. */
.alternador {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.alternador label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    background: var(--superficie);
    color: var(--texto-suave);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.alternador input { position: absolute; opacity: 0; pointer-events: none; }
.alternador label:hover { border-color: var(--turqueza-medio); }
.alternador input:checked + span,
.alternador label:has(input:checked) {
    border-color: var(--marca-verde);
    background: var(--verde-vidro);
    color: var(--marca-turqueza);
}
.alternador label:has(input:focus-visible) { outline: 3px solid var(--verde-medio); outline-offset: 2px; }

/* caixa de marcar */
.marcador { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.marcador input {
    width: 19px; height: 19px;
    margin: 2px 0 0;
    accent-color: var(--marca-verde);
    flex: 0 0 auto;
    cursor: pointer;
}
.marcador strong { display: block; font-size: 14px; font-weight: 600; }
.marcador span   { display: block; font-size: 12.5px; color: var(--texto-suave); }

/* lista de sugestao do cliente */
.sugestoes {
    position: absolute;
    z-index: 30;
    left: 0; right: 0; top: calc(100% + 6px);
    max-height: 260px;
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra);
    padding: 6px;
}
.sugestoes[hidden] { display: none; }
.sugestoes button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    font: inherit;
    color: var(--texto);
    cursor: pointer;
}
.sugestoes button:hover, .sugestoes button.ativo { background: var(--verde-vidro); }
.sugestoes strong { display: block; font-size: 14px; font-weight: 600; }
.sugestoes small  { display: block; font-size: 12px; color: var(--texto-suave); }
.sugestoes .vazio { padding: 12px 10px; font-size: 13px; color: var(--texto-suave); }

.busca-cliente { position: relative; flex: 1 1 auto; }

/* ===========================================================================
   Abas
   =========================================================================== */

.abas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    margin-bottom: 20px;
}
.aba {
    display: grid;
    place-items: center;
    height: 40px;
    border-radius: var(--raio-sm);
    font-weight: 600;
    font-size: 14px;
    color: var(--texto-suave);
}
.aba:hover { color: var(--marca-turqueza); }
.aba.ativa {
    background: var(--terracota-vidro);
    color: var(--terracota-escuro);
    box-shadow: var(--sombra-sm);
}

/* ===========================================================================
   Calendario
   =========================================================================== */

.calendario-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.calendario-topo h3 { font-size: 16px; }
.calendario-nav { display: flex; gap: 6px; }
.calendario-nav a {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    color: var(--texto-suave);
}
.calendario-nav a:hover { border-color: var(--turqueza-medio); color: var(--marca-turqueza); }

.calendario-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.calendario-dia-nome {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--texto-fraco);
    padding: 6px 0 10px;
}

/* A altura e FIXA, nao `aspect-ratio: 1/1`. Com proporcao quadrada a celula
   crescia junto com a largura da coluna, e em tela larga o calendario sozinho
   passava de 400px de altura — era o que obrigava a secretaria a rolar a
   pagina. Aqui 6 semanas ocupam ~230px, previsiveis. */
.calendario-celula {
    position: relative;
    height: var(--cal-celula);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
    line-height: 1;
}
.calendario-celula:hover { background: var(--fundo); }
.calendario-celula.fora-mes { color: var(--texto-fraco); opacity: .55; }
.calendario-celula.passou   { color: var(--texto-fraco); cursor: default; }
.calendario-celula.passou:hover { background: transparent; }

.calendario-celula.hoje { box-shadow: inset 0 0 0 2px var(--marca-verde); }

.calendario-celula.selecionado {
    background: var(--marca-terracota);
    color: #fff;
}
.calendario-celula.selecionado:hover { background: var(--terracota-escuro); }
.calendario-celula.selecionado .marca-dia { background: #fff; }

.marca-dia {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: transparent;
}
.marca-dia.livre  { background: var(--marca-verde); }
.marca-dia.pouco  { background: var(--marca-terracota); }
.marca-dia.cheio  { background: var(--borda-forte); }
.marca-dia.leve   { background: var(--marca-verde); }
.marca-dia.medio  { background: var(--marca-terracota); }
.marca-dia.vazio, .marca-dia.passado { background: transparent; }

/* Fim de semana: sem bolinha e com o numero apagado. Nao e "lotou" — nao ha
   o que contar. Continua clicavel: sabado excepcional acontece. */
.marca-dia.sem-atendimento { background: transparent; }
.calendario-celula:has(.marca-dia.sem-atendimento) { color: var(--texto-fraco); }

.marca-dupla { display: flex; gap: 3px; }

/* ===========================================================================
   Grade de horarios
   =========================================================================== */

.horarios-titulo { font-size: 15px; margin: 22px 0 12px; }

.horarios-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.horario {
    display: grid;
    place-items: center;
    height: 44px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    background: var(--superficie);
    color: var(--texto);
    font-weight: 600;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.horario:hover { border-color: var(--marca-verde); background: var(--verde-vidro); }

.horario.selecionado {
    background: var(--marca-terracota);
    border-color: var(--marca-terracota);
    color: #fff;
}
.horario.selecionado:hover { background: var(--terracota-escuro); }

.horario.ocupado {
    background: var(--fundo);
    border-color: var(--borda);
    color: var(--texto-fraco);
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.horario.ocupado:hover { border-color: var(--borda); background: var(--fundo); }

.legenda { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; }
.legenda-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--texto-suave); }
.legenda-bola { width: 9px; height: 9px; border-radius: 50%; }
.legenda-bola.disponivel  { background: var(--marca-verde); }
.legenda-bola.selecionado { background: var(--marca-terracota); }
.legenda-bola.indisponivel{ background: var(--borda-forte); }

/* proximos horarios livres */
.proximos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.proximo-slot {
    padding: 12px 14px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    background: var(--superficie);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--texto);
}
.proximo-slot:hover { border-color: var(--marca-verde); background: var(--verde-vidro); }
.proximo-slot strong { display: block; font-size: 16px; color: var(--marca-turqueza); font-variant-numeric: tabular-nums; }
.proximo-slot span   { display: block; font-size: 12.5px; color: var(--texto-suave); text-transform: capitalize; }

/* ===========================================================================
   Resumo lateral (coluna 3 da secretaria)
   =========================================================================== */

.resumo { position: sticky; top: calc(var(--topo-altura) + 20px); }

.resumo-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    background: var(--marca-turqueza);
    color: #fff;
    border-radius: var(--raio) var(--raio) 0 0;
}
.resumo-cabecalho h2 { color: #fff; font-size: 16px; }
.resumo-cabecalho .passo { background: rgba(255,255,255,.16); color: #fff; }

.resumo-corpo { padding: 8px 22px 22px; }

.resumo-linha {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid var(--borda);
}
.resumo-linha:last-child { border-bottom: 0; }

.resumo-icone {
    width: 38px; height: 38px;
    border-radius: var(--raio-sm);
    display: grid; place-items: center;
    flex: 0 0 auto;
}
.resumo-icone.verde     { background: var(--verde-claro);     color: var(--verde-escuro); }
.resumo-icone.terracota { background: var(--terracota-claro); color: var(--terracota-escuro); }
.resumo-icone.turqueza  { background: var(--turqueza-claro);  color: var(--marca-turqueza); }

.resumo-texto { min-width: 0; }
.resumo-texto .titulo { display: block; font-size: 12px; color: var(--texto-suave); }
.resumo-texto .valor  { display: block; font-size: 15px; font-weight: 700; color: var(--marca-turqueza); }
.resumo-texto .extra  { display: block; font-size: 12.5px; color: var(--texto-suave); }
.resumo-texto .vazio  { display: block; font-size: 14px; color: var(--texto-fraco); font-style: italic; }

.resumo-acoes { display: grid; gap: 10px; padding: 4px 22px 22px; }

/* ===========================================================================
   Cartoes de numero (painel do visualizador)
   =========================================================================== */

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 26px; }

.numero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-sm);
    border-left: 4px solid var(--borda-forte);
}
.numero.verde     { border-left-color: var(--marca-verde); }
.numero.terracota { border-left-color: var(--marca-terracota); }
.numero.turqueza  { border-left-color: var(--marca-turqueza); }

.numero-icone {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid; place-items: center;
    flex: 0 0 auto;
}
.numero.verde     .numero-icone { background: var(--verde-claro);     color: var(--verde-escuro); }
.numero.terracota .numero-icone { background: var(--terracota-claro); color: var(--terracota-escuro); }
.numero.turqueza  .numero-icone { background: var(--turqueza-claro);  color: var(--marca-turqueza); }

.numero-texto .rotulo { display: block; font-size: 13px; color: var(--texto-suave); }
.numero-texto .valor  { display: block; font-size: 30px; font-weight: 800; color: var(--marca-turqueza); line-height: 1.15; font-variant-numeric: tabular-nums; }
.numero-texto .nota   { display: block; font-size: 12.5px; font-weight: 600; }
.numero.verde     .nota { color: var(--verde-escuro); }
.numero.terracota .nota { color: var(--terracota-escuro); }
.numero.turqueza  .nota { color: var(--turqueza-medio); }

/* ===========================================================================
   Linha do tempo
   =========================================================================== */

.tempo-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tempo-topo h2 { font-size: 18px; }
.tempo-nav { display: flex; align-items: center; gap: 8px; }

.tempo { position: relative; padding-left: 84px; }

/* fio vertical que costura os horarios */
.tempo::before {
    content: "";
    position: absolute;
    left: 63px; top: 14px; bottom: 14px;
    width: 2px;
    border-left: 2px dashed var(--borda-forte);
}

.tempo-item { position: relative; margin-bottom: 14px; }

.tempo-hora {
    position: absolute;
    left: -84px; top: 20px;
    width: 46px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
}

.tempo-bola {
    position: absolute;
    left: -25px; top: 25px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--marca-verde);
    border: 2px solid var(--superficie);
    box-shadow: 0 0 0 2px var(--verde-claro);
}
.tempo-item.pendente .tempo-bola { background: var(--marca-terracota); box-shadow: 0 0 0 2px var(--terracota-claro); }
.tempo-item.cancelado .tempo-bola { background: var(--borda-forte); box-shadow: 0 0 0 2px var(--borda); }

.compromisso {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-sm);
}
.compromisso:hover { border-color: var(--borda-forte); }
.tempo-item.cancelado .compromisso { opacity: .6; }
.tempo-item.cancelado .compromisso-nome { text-decoration: line-through; }

.compromisso-corpo { flex: 1 1 auto; min-width: 0; }
.compromisso-nome { display: block; font-size: 15.5px; font-weight: 700; color: var(--marca-turqueza); }
.compromisso-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.compromisso-meta span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); }

/* Observacoes do compromisso: um bloco a parte, nao mais um item da linha de
   meta. Sao frases ("trazer o exame do mes passado"), nao rotulos curtos, e no
   flex da meta quebrariam o alinhamento de todo o resto. */
.compromisso-obs {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 8px 0 0;
    padding: 8px 10px;
    background: var(--fundo);
    border-left: 3px solid var(--marca-turqueza);
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--texto);
    /* Texto digitado por gente: uma palavra gigante sem espaco nao pode
       esticar o cartao. */
    overflow-wrap: anywhere;
    white-space: pre-line;   /* respeita a quebra de linha que a pessoa digitou */
}
.compromisso-obs svg { flex: 0 0 auto; margin-top: 2px; color: var(--marca-turqueza); }

.compromisso-acoes { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    border-radius: var(--raio-pill);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.selo.confirmado { background: var(--verde-claro);     color: var(--verde-escuro); }
.selo.pendente   { background: var(--terracota-claro); color: var(--terracota-escuro); }
.selo.cancelado  { background: var(--fundo);           color: var(--texto-suave); }

.fim-da-lista {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    color: var(--texto-fraco);
    font-size: 13px;
}
.fim-da-lista::before, .fim-da-lista::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px dashed var(--borda-forte);
}

/* ===========================================================================
   Calendario lateral (gaveta)
   =========================================================================== */

.gaveta {
    width: 380px;
    flex: 0 0 auto;
    background: var(--superficie);
    border-left: 1px solid var(--borda);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gaveta-topo h2 { font-size: 18px; }

.gaveta-legenda { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo); }
.gaveta-legenda-item { display: flex; align-items: flex-start; gap: 11px; }
.gaveta-legenda-item .bola { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.gaveta-legenda-item .bola.leve  { background: var(--marca-verde); }
.gaveta-legenda-item .bola.medio { background: var(--marca-terracota); }
.gaveta-legenda-item .bola.cheio { background: var(--marca-turqueza); }
.gaveta-legenda-item strong { display: block; font-size: 14px; color: var(--marca-turqueza); }
.gaveta-legenda-item span   { display: block; font-size: 13px; color: var(--texto-suave); }

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

.tabela-envolve { overflow-x: auto; }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.tabela th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--texto-suave);
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}
.tabela td { padding: 14px 16px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--fundo); }

.celula-pessoa { display: flex; align-items: center; gap: 11px; }
.celula-pessoa strong { display: block; font-size: 14px; font-weight: 600; color: var(--texto); }
.celula-pessoa small  { display: block; font-size: 12px; color: var(--texto-suave); }

.celula-sub { display: block; font-size: 12.5px; color: var(--texto-suave); }

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

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    border-radius: var(--raio-sm);
    font-size: 14px;
    margin-bottom: 18px;
    border: 1px solid transparent;
}
.aviso .icone { flex: 0 0 auto; margin-top: 1px; }
.aviso-ok   { background: var(--verde-vidro);     border-color: var(--verde-medio);     color: #3F4A10; }
.aviso-erro { background: var(--terracota-vidro); border-color: var(--marca-terracota); color: var(--terracota-escuro); }

/* ===========================================================================
   Vazios
   =========================================================================== */

.vazio-estado { text-align: center; padding: 56px 20px; color: var(--texto-suave); }
.vazio-estado .icone { color: var(--borda-forte); margin-bottom: 14px; }
.vazio-estado h3 { font-size: 17px; margin-bottom: 6px; }
.vazio-estado p  { font-size: 14px; margin-bottom: 18px; }

/* ===========================================================================
   Login
   =========================================================================== */

.login-tela {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(1000px 520px at 12% -8%, var(--verde-vidro), transparent 62%),
        radial-gradient(920px 480px at 108% 108%, var(--turqueza-vidro), transparent 58%),
        var(--fundo);
}
.login-caixa { width: 100%; max-width: 420px; }
.login-marca { text-align: center; margin-bottom: 26px; }
.login-marca .marca { justify-content: center; }
.login-marca p { margin-top: 10px; color: var(--texto-suave); font-size: 14px; }
/* ===========================================================================
   Grades das telas
   =========================================================================== */

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

.grade-conta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 560px; margin: 0 auto; }

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

@media (max-width: 1400px) {
    .grade-agendamento { grid-template-columns: minmax(0, 350px) minmax(0, 1fr); }
    .grade-agendamento .coluna-resumo { grid-column: 1 / -1; }
    .resumo { position: static; }
    .resumo-acoes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1180px) {
    .gaveta { display: none; }
    .gaveta.aberta {
        display: flex;
        position: fixed;
        z-index: 50;
        top: var(--topo-altura); right: 0; bottom: 0;
        width: min(380px, 90vw);
        box-shadow: -12px 0 40px rgba(2, 82, 94, .14);
        overflow-y: auto;
    }
}

@media (max-width: 980px) {
    .grade-agendamento { grid-template-columns: minmax(0, 1fr); }
    .topo-busca { display: none; }
    .topo-saudacao { display: none; }
    .lateral {
        position: fixed;
        z-index: 45;
        top: var(--topo-altura); left: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
        box-shadow: 12px 0 40px rgba(2, 82, 94, .14);
    }
    .lateral.aberta { transform: none; }
    .conteudo { padding: 20px 16px 36px; }
}

@media (max-width: 720px) {
    .pagina { padding: 20px 16px 36px; }
    .topo { padding: 0 14px; gap: 12px; }
    .marca-texto span { display: none; }
    .usuario-info { display: none; }
    .tempo { padding-left: 0; }
    .tempo::before { display: none; }
    .tempo-hora { position: static; width: auto; text-align: left; margin-bottom: 6px; }
    .tempo-bola { display: none; }
    .compromisso { flex-wrap: wrap; }
    .resumo-acoes { grid-template-columns: 1fr; }
    .numero-texto .valor { font-size: 26px; }
}

/* Quem prefere menos movimento nao ganha transicao nenhuma. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   AJUSTES v2 — tela sem rolagem, listas multiplas
   =========================================================================== */

:root {
    --cal-celula: 34px;      /* 6 semanas ~= 230px, previsivel */
}

/* ---------------------------------------------------------------------------
   Tela de novo agendamento: cabe na altura da janela, sem rolar a pagina.
   Cada coluna rola por dentro se precisar; a pagina em si nao.
   --------------------------------------------------------------------------- */

.pagina-compacta {
    padding: 16px 20px 18px;
    max-width: 1560px;
    margin: 0 auto;
}

.pagina-cabecalho-fino { margin-bottom: 14px; align-items: center; }
.pagina-cabecalho-fino h1 { font-size: 23px; }
.pagina-cabecalho-fino p  { font-size: 13px; margin-top: 2px; }

.grade-agendamento {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, 330px);
    gap: 16px;
    align-items: stretch;
}

/* A coluna 1 tem muito campo; ela rola por dentro em vez de esticar a pagina. */
.cartao-corpo-rolavel {
    max-height: calc(100vh - var(--topo-altura) - 190px);
    overflow-y: auto;
    padding: 16px 18px;
}
.cartao-corpo-rolavel::-webkit-scrollbar { width: 8px; }
.cartao-corpo-rolavel::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 4px; }

.grade-agendamento .cartao { align-self: start; }
.grade-agendamento .cartao-corpo { padding: 16px 18px; }
.grade-agendamento .campo { margin-bottom: 13px; }
.grade-agendamento .rotulo { margin-bottom: 5px; font-size: 12.5px; }
.grade-agendamento .entrada,
.grade-agendamento .selecao { height: 40px; font-size: 13.5px; }
.grade-agendamento .area { min-height: 62px; font-size: 13.5px; }
.grade-agendamento .dica { font-size: 11.5px; margin-top: 4px; }
.grade-agendamento .cartao-cabecalho { padding: 13px 18px; }
.grade-agendamento .cartao-cabecalho h2 { font-size: 15px; }
.grade-agendamento .abas { margin-bottom: 14px; }
.grade-agendamento .aba { height: 34px; font-size: 13px; }
.grade-agendamento .alternador label { height: 40px; font-size: 13px; }

.passo-terracota { background: var(--terracota-claro); color: var(--terracota-escuro); }

/* ---------------------------------------------------------------------------
   Calendario compacto
   --------------------------------------------------------------------------- */

.calendario-compacto { gap: 1px; }

.calendario-topo { margin-bottom: 8px; }
.calendario-topo h3 { font-size: 14.5px; }
.calendario-nav a { width: 30px; height: 30px; }
.calendario-hoje {
    width: auto !important;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--marca-turqueza);
}

.calendario-dia-nome { font-size: 10.5px; padding: 2px 0 5px; }

/* A bolinha vira uma barra fina embaixo do numero: ocupa menos altura que um
   ponto centralizado e continua legivel. */
.calendario-celula .marca-dia {
    width: 12px;
    height: 3px;
    border-radius: 2px;
}

.horarios-titulo { font-size: 13.5px; margin: 14px 0 9px; text-transform: capitalize; }

.horarios-grade { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 7px; }
.horario { height: 36px; font-size: 13px; border-radius: 8px; }

.legenda { gap: 14px; margin-top: 12px; }
.legenda-item { font-size: 12px; }

.proximos-grade { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.proximo-slot { padding: 9px 11px; }
.proximo-slot strong { font-size: 14.5px; }
.proximo-slot span { font-size: 11.5px; }

/* ---------------------------------------------------------------------------
   Excecao de horario (fora do expediente)
   --------------------------------------------------------------------------- */

.excecao {
    margin-top: 14px;
    border-top: 1px dashed var(--borda-forte);
    padding-top: 12px;
}
.excecao-corpo {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--terracota-vidro);
    border: 1px solid var(--terracota-claro);
    border-radius: var(--raio-sm);
}
/* "Outro horario" vive FORA da caixa de excecao: digitar 11:30 nao e excecao
   nenhuma, e enquanto o campo morava la dentro todo horario digitado nascia
   etiquetado como fora do expediente. */
.outro-horario { margin-top: 14px; max-width: 200px; }
.outro-horario .entrada { height: 38px; }
.outro-horario .dica { margin-top: 6px; }

.dica-link {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--marca-turqueza);
    list-style: none;
}
.dica-link::-webkit-details-marker { display: none; }
.dica-link::before { content: "＋ "; color: var(--verde-escuro); font-weight: 700; }
details[open] > .dica-link::before { content: "－ "; }
.dica-link:hover { text-decoration: underline; }

.bloco-novo { display: grid; gap: 8px; margin-top: 10px; }

/* ---------------------------------------------------------------------------
   Fichas (clientes escolhidos) e grade de pessoas (profissionais)
   --------------------------------------------------------------------------- */

.fichas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fichas:empty { display: none; }

.ficha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 4px;
    background: var(--turqueza-claro);
    color: var(--marca-turqueza);
    border-radius: var(--raio-pill);
    font-size: 12.5px;
    font-weight: 600;
}
.ficha-x {
    border: 0;
    background: transparent;
    color: var(--turqueza-medio);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.ficha-x:hover { color: var(--marca-terracota); }

.pessoas-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
    gap: 5px;
    max-height: 168px;
    overflow-y: auto;
    padding: 3px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    background: var(--fundo);
}

.pessoa-check {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 7px;
    cursor: pointer;
    background: var(--superficie);
    border: 1px solid transparent;
}
.pessoa-check:hover { border-color: var(--borda-forte); }
.pessoa-check input { accent-color: var(--marca-verde); width: 15px; height: 15px; flex: 0 0 auto; }
.pessoa-check:has(input:checked) {
    border-color: var(--marca-verde);
    background: var(--verde-vidro);
}
.pessoa-nome {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avatar-xs { width: 22px; height: 22px; font-size: 10px; }

/* ---------------------------------------------------------------------------
   Resumo mais enxuto
   --------------------------------------------------------------------------- */

.resumo { position: sticky; top: calc(var(--topo-altura) + 14px); }
.resumo-cabecalho { padding: 13px 18px; }
.resumo-cabecalho h2 { font-size: 15px; }
.resumo-corpo { padding: 4px 18px 14px; }
.resumo-linha { padding: 11px 0; gap: 11px; }
.resumo-icone { width: 33px; height: 33px; }
.resumo-texto .titulo { font-size: 11px; }
.resumo-texto .valor  { font-size: 14px; }
.resumo-texto .extra  { font-size: 12px; }
.resumo-acoes { padding: 0 18px 18px; }

/* ---------------------------------------------------------------------------
   Recentes vira bloco recolhivel — fora do caminho por padrao
   --------------------------------------------------------------------------- */

.recentes-bloco { margin-top: 16px; }
.recentes-resumo {
    cursor: pointer;
    list-style: none;
    justify-content: space-between;
    border-bottom: 0;
}
.recentes-resumo::-webkit-details-marker { display: none; }
.recentes-bloco[open] .recentes-resumo { border-bottom: 1px solid var(--borda); }
.recentes-resumo h2 { font-size: 15px; }
.celula-acoes { text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Link da reuniao na agenda de quem so visualiza
   --------------------------------------------------------------------------- */

.link-reuniao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--raio-pill);
    background: var(--marca-turqueza);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.link-reuniao:hover { background: var(--turqueza-escuro); }

.sem-link { font-size: 12px; color: var(--texto-fraco); font-style: italic; }

.etiqueta-excecao {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--raio-pill);
    background: var(--terracota-claro);
    color: var(--terracota-escuro);
    font-size: 11px;
    font-weight: 700;
}


/* ---------------------------------------------------------------------------
   Responsivo da tela de agendamento
   --------------------------------------------------------------------------- */

@media (max-width: 1380px) {
    .grade-agendamento { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
    .grade-agendamento .coluna-resumo { grid-column: 1 / -1; }
    .resumo { position: static; }
    .resumo-corpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 18px; }
    .cartao-corpo-rolavel { max-height: none; overflow: visible; }
}

@media (max-width: 900px) {
    .grade-agendamento { grid-template-columns: minmax(0, 1fr); }
    .pagina-compacta { padding: 14px 14px 24px; }
}


/* ===========================================================================
   Altura da tela de agendamento
   ---------------------------------------------------------------------------
   A tentativa anterior prendia a GRADE inteira com `max-height` e mandava as
   colunas rolarem por dentro. Nao funcionou: `max-height: 100%` num item de
   grid resolve contra a altura da FAIXA (que era automatica e maior que o
   container), entao a coluna nao encolhia — o conteudo vazava para fora do
   cartao e o bloco "Agendamentos recentes" era desenhado por cima do
   formulario.

   A correcao troca esperteza por algo que nao tem como sobrepor: o limite vai
   direto no elemento que ROLA. Um elemento com `max-height` + `overflow-y:auto`
   e o proprio container de rolagem — o conteudo fica dentro dele por definicao,
   e o fluxo normal continua empurrando o que vem depois.
   =========================================================================== */

@media (min-width: 901px) {
    /* Os dois cartoes altos rolam por dentro; a pagina segue o fluxo normal. */
    .coluna-dados > .cartao-corpo,
    .coluna-data  > .cartao-corpo {
        max-height: calc(100vh - var(--topo-altura) - 250px);
        overflow-y: auto;
        overscroll-behavior: contain;   /* rolar a coluna nao arrasta a pagina */
    }

    .coluna-dados > .cartao-corpo::-webkit-scrollbar,
    .coluna-data  > .cartao-corpo::-webkit-scrollbar { width: 8px; }
    .coluna-dados > .cartao-corpo::-webkit-scrollbar-thumb,
    .coluna-data  > .cartao-corpo::-webkit-scrollbar-thumb {
        background: var(--borda-forte);
        border-radius: 4px;
    }
}

/* Tela baixa (notebook 1366x768 e afins): o calendario encolhe em vez de mandar
   a pagina rolar. */
@media (min-width: 901px) and (max-height: 880px) {
    :root { --cal-celula: 30px; }
    .horario { height: 33px; }
    .horarios-grade { gap: 6px; }
    .horarios-titulo { margin: 11px 0 8px; }
    .grade-agendamento .campo { margin-bottom: 11px; }
}

@media (min-width: 901px) and (max-height: 760px) {
    :root { --cal-celula: 27px; }
    .legenda { display: none; }     /* as cores ja se explicam na propria grade */
    .pagina-cabecalho-fino h1 { font-size: 20px; }
}

/* ===========================================================================
   Classes que substituiram os `style=` inline
   ---------------------------------------------------------------------------
   Nao e questao de estilo, e de CSP: enquanto existisse UM `style=` na tela, o
   Content-Security-Policy precisava de `style-src 'unsafe-inline'` — e essa
   brecha vale para a pagina inteira, inclusive para um `<style>` que um atacante
   conseguisse injetar. Com tudo em classe, a politica fecha em `style-src 'self'`.

   Se voltar a precisar de estilo dinamico, crie uma classe aqui em vez de um
   atributo `style` — senao a politica precisa ser afrouxada de novo.
   =========================================================================== */

/* --- cores dos avatares (espelham CORES_PROFISSIONAL em database.bexa
       e classeDaCor() em visoes.bexa) --- */
.cor-0 { background: #5B7379; }
.cor-1 { background: #02525E; }
.cor-2 { background: #B6612D; }
.cor-3 { background: #B7BF48; }
.cor-4 { background: #0E7185; }
.cor-5 { background: #934E23; }
.cor-6 { background: #9AA23A; }

/* O verde da marca e claro demais para texto branco em cima. */
.cor-3, .cor-6 { color: #2C3208; }

/* --- utilitarios de espacamento --- */
.esp-abaixo-10 { margin-bottom: 10px; }
.esp-abaixo-20 { margin-bottom: 20px; }
.esp-acima-6   { margin-top: 6px; }
.empurra-baixo { margin-top: auto; }
.texto-centro  { text-align: center; }
.avatar-centro { margin: 0 auto 14px; }

/* --- tela de compromissos --- */
.forma-filtro { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.filtro-campo { flex: 1 1 180px; }

.grupo-dia { margin-bottom: 26px; }
.grupo-dia-titulo { font-size: 16px; margin-bottom: 12px; text-transform: capitalize; }
.grupo-dia-contagem { font-weight: 600; color: var(--texto-suave); font-size: 13px; }

/* Na lista agrupada nao ha regua de horario, entao o fio vertical sai. */
.tempo-sem-fio { padding-left: 0; }
.tempo-sem-fio::before { display: none; }

/* --- minha conta --- */
.conta-nome    { font-size: 20px; }
.conta-email   { color: var(--texto-suave); font-size: 14px; margin-top: 4px; }
.conta-selo    { margin-top: 12px; }
.conta-vinculo { color: var(--texto-suave); font-size: 13px; margin-top: 10px; }

/* --- form em linha no cabecalho (botao de sair) --- */
.forma-em-linha { display: inline-flex; margin: 0; }

/* --- detalhes que usavam style inline no formulario --- */
.dica-link { cursor: pointer; }

/* ===========================================================================
   Area de tarefas
   ---------------------------------------------------------------------------
   Sem nenhum `style=` inline aqui tambem: o CSP fecha em `style-src 'self'`, e
   um unico atributo style obrigaria a reabrir 'unsafe-inline' para a pagina
   inteira. Cor de prioridade vira classe, como as cores dos avatares.
   =========================================================================== */

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

.tarefa {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--borda-forte);
    border-radius: var(--raio);
    box-shadow: var(--sombra-sm);
}
.tarefa:hover { border-color: var(--borda-forte); }

/* A faixa lateral e a prioridade — leitura periferica, sem precisar ler o selo. */
.tarefa.prio-alta   { border-left-color: var(--marca-terracota); }
.tarefa.prio-normal { border-left-color: var(--turqueza-medio); }
.tarefa.prio-baixa  { border-left-color: var(--borda-forte); }

.tarefa.atrasada { background: var(--terracota-vidro); border-color: var(--terracota-claro); }

.tarefa.feita { opacity: .62; border-left-color: var(--marca-verde); }
.tarefa.feita .tarefa-titulo { text-decoration: line-through; }

/* --- caixa de marcar (e um botao de submit, nao um checkbox: precisa de POST
       com token para mudar estado no servidor) --- */
.tarefa-marcar { margin: 0; flex: 0 0 auto; }

.caixa {
    width: 22px; height: 22px;
    margin-top: 1px;
    display: grid; place-items: center;
    border: 2px solid var(--borda-forte);
    border-radius: 6px;
    background: var(--superficie);
    color: transparent;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.caixa:hover { border-color: var(--marca-verde); background: var(--verde-vidro); }
.caixa.marcada {
    border-color: var(--verde-escuro);
    background: var(--marca-verde);
    color: #2C3208;
}
.caixa.marcada:hover { background: var(--verde-escuro); color: #fff; }

/* --- corpo --- */
.tarefa-corpo { flex: 1 1 auto; min-width: 0; }

.tarefa-titulo {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--marca-turqueza);
    overflow-wrap: anywhere;
}

.tarefa-descricao {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--texto-suave);
    overflow-wrap: anywhere;
}

.tarefa-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 7px;
}
.tarefa-meta > span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--texto-suave); }

.etiqueta-prio {
    padding: 2px 9px;
    border-radius: var(--raio-pill);
    font-size: 11.5px;
    font-weight: 700;
}
.etiqueta-prio.alta   { background: var(--terracota-claro); color: var(--terracota-escuro); }
.etiqueta-prio.normal { background: var(--turqueza-claro);  color: var(--marca-turqueza); }
.etiqueta-prio.baixa  { background: var(--fundo);           color: var(--texto-suave); }

.tarefa-prazo.vencido { color: var(--terracota-escuro); font-weight: 700; }
.tarefa-prazo.hoje    { color: var(--verde-escuro); font-weight: 700; }
.tarefa-prazo.sem     { color: var(--texto-fraco); font-style: italic; }

.tarefa-responsaveis { gap: 4px !important; }
.tarefa-responsaveis.sem { color: var(--texto-fraco); font-style: italic; }

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

.btn-icone-sm {
    width: 32px; height: 32px;
    flex: 0 0 auto;
    border-color: transparent;
    background: transparent;
}
.tarefa:hover .btn-icone-sm { border-color: var(--borda); }
.btn-icone-sm:hover { border-color: var(--marca-terracota) !important; color: var(--marca-terracota); }

/* --- contador no menu lateral --- */
.lateral-contador {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    background: var(--terracota-claro);
    color: var(--terracota-escuro);
    border-radius: var(--raio-pill);
    font-size: 11.5px;
    font-weight: 700;
}
.lateral-item.ativo .lateral-contador { background: var(--marca-terracota); color: #fff; }

/* --- bloco "nova tarefa" recolhivel --- */
.nova-tarefa > summary { cursor: pointer; list-style: none; }
.nova-tarefa > summary::-webkit-details-marker { display: none; }
.nova-tarefa[open] > summary { border-bottom: 1px solid var(--borda); }
.nova-tarefa .forma-filtro { margin-bottom: 13px; }

@media (max-width: 620px) {
    .tarefa { flex-wrap: wrap; }
    .tarefa-meta { gap: 5px 10px; }
}

/* ===========================================================================
   Link publico de agendamento

   A unica tela que gente de fora ve. Sem menu, sem topo com usuario, sem
   JavaScript: dia e horario sao LINKS, e o resto e um <form> comum.
   =========================================================================== */

.corpo-publico { background: var(--fundo); }

.publico-topo {
    display: flex;
    justify-content: center;
    padding: 22px 20px 6px;
}

.publico {
    max-width: 620px;
    margin: 0 auto;
    padding: 10px 16px 48px;
}

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

.publico-cabeca { display: flex; align-items: center; gap: 14px; }
.publico-cabeca h1 { font-size: 21px; }
.publico-cabeca p  { color: var(--texto-suave); font-size: 13.5px; }

.avatar-g {
    width: 56px; height: 56px;
    font-size: 20px;
    flex: 0 0 auto;
}

.publico-intro { margin-top: 14px; color: var(--texto-suave); font-size: 14px; }

.publico-titulo {
    margin: 26px 0 12px;
    font-size: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--borda);
}

/* Tira de dias: rola na horizontal em vez de quebrar em varias linhas — assim a
   pagina inteira continua curta no celular. */
.publico-dias {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.publico-dia {
    flex: 0 0 auto;
    width: 62px;
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 9px 0;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    background: var(--superficie);
    text-decoration: none;
    color: var(--texto);
}
.publico-dia strong { font-size: 18px; line-height: 1.1; color: var(--marca-turqueza); }
.publico-dia .dia-semana,
.publico-dia .dia-mes { font-size: 11px; color: var(--texto-suave); text-transform: lowercase; }

.publico-dia:hover { border-color: var(--turqueza-medio); background: var(--turqueza-vidro); }

.publico-dia.escolhido {
    background: var(--marca-terracota);
    border-color: var(--marca-terracota);
}
.publico-dia.escolhido strong,
.publico-dia.escolhido .dia-semana,
.publico-dia.escolhido .dia-mes { color: #fff; }

/* Dia sem vaga fica visivel e apagado: sumir faria a pessoa achar que a agenda
   pula datas. */
.publico-dia.cheio { opacity: .4; cursor: not-allowed; }
.publico-dia.cheio:hover { border-color: var(--borda-forte); background: var(--superficie); }

.publico-horarios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}

.publico-vazio {
    padding: 18px;
    text-align: center;
    color: var(--texto-suave);
    font-size: 13.5px;
    background: var(--fundo);
    border-radius: var(--raio-sm);
}

.publico-forma .campo { margin-bottom: 14px; }

.publico-escolhido {
    margin: 0 0 16px;
    padding: 11px 13px;
    background: var(--verde-vidro);
    border-left: 3px solid var(--marca-verde);
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    font-size: 14px;
}
.publico-escolhido.pendente {
    background: var(--fundo);
    border-left-color: var(--borda-forte);
    color: var(--texto-suave);
}

.publico-nota { margin-top: 12px; text-align: center; }

/* --- tela de "pronto" e de link invalido --- */
.publico-pronto { text-align: center; }
.publico-pronto h1 { margin-top: 14px; }

.publico-selo {
    display: inline-grid;
    place-items: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--verde-vidro);
    color: var(--verde-escuro);
}

.publico-resumo {
    margin: 22px 0 0;
    text-align: left;
    display: grid;
    gap: 10px;
}
.publico-resumo div {
    padding: 11px 13px;
    background: var(--fundo);
    border-radius: var(--raio-sm);
}
.publico-resumo dt { font-size: 12px; color: var(--texto-suave); }
.publico-resumo dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--marca-turqueza); }

/* --- tela de dentro: Meu link --- */
.entrada-link { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }

.lista-passos { margin: 0 0 12px; padding-left: 20px; list-style: decimal; }
.lista-passos li { margin-bottom: 7px; font-size: 14px; }

.linha-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

@media (max-width: 560px) {
    .publico-cartao { padding: 18px 15px; }
    .publico-cabeca h1 { font-size: 19px; }
}

/* Select de duracao: largura de campo curto, nao da coluna inteira. */
.entrada-media { max-width: 260px; }

/* Aviso de dia sem atendimento (fim de semana) no lugar da grade de horarios. */
.aviso-dia {
    padding: 12px 14px;
    background: var(--terracota-vidro);
    border: 1px solid var(--terracota-claro);
    border-radius: var(--raio-sm);
    font-size: 13px;
    line-height: 1.45;
    color: var(--texto);
}

/* ===========================================================================
   WhatsApp
   =========================================================================== */

/* A .tabela tem min-width 720px: sem um container que role, o corpo da pagina
   rolaria de lado inteiro. */
.tabela-rolagem { overflow-x: auto; }

/* A tabela da equipe nao precisa do min-width de 720px da .tabela: sao poucos
   campos e a barra de rolagem so atrapalhava. */
.tabela-equipe { min-width: 0; }
.tabela-equipe .forma-linha { flex-wrap: wrap; }

.estado-linha {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin-bottom: 6px;
}

.qrcode-area {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    margin-top: 14px;
    padding: 16px;
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    background: var(--superficie);
}
/* Fundo branco fixo: o QR precisa de contraste real para a camera ler, e o
   cartao pode ter fundo levemente colorido. */
.qrcode-img {
    width: 240px;
    height: 240px;
    image-rendering: pixelated;
    background: #FFFFFF;
    padding: 8px;
    border-radius: var(--raio-sm);
}

.forma-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.forma-linha .rotulo { width: 100%; margin-bottom: 0; }
.forma-linha .entrada { flex: 1; min-width: 180px; }

.etiqueta {
    display: inline-block;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: var(--raio-pill);
    background: var(--verde-claro);
    color: var(--marca-turqueza);
}
.etiqueta-erro {
    background: #FBEDE4;
    color: var(--marca-terracota);
}
/* "sem acesso" e informacao, nao problema: quem so e escalado em compromissos
   nao PRECISA entrar no sistema. Por isso cinza, e nao a cor de erro. */
.etiqueta-neutra {
    background: var(--fundo);
    color: var(--texto-suave);
}

.qrcode-area { flex-direction: column; gap: 12px; }
.qrcode-aviso { text-align: center; max-width: 320px; margin: 0; }

.pareamento {
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    background: var(--verde-claro);
    text-align: center;
}
.pareamento-codigo {
    display: block;
    margin: 8px 0 10px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--marca-turqueza);
}

.entrada-hora { max-width: 110px; text-align: center; letter-spacing: .05em; }

.campo-alerta { border-left: 2px solid var(--marca-terracota); padding-left: 12px; }

/* ===========================================================================
   Equipe
   =========================================================================== */

.entrada-cor { max-width: 140px; }

.ponto-cor {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--marca-turqueza);
}

/* Cartao por pessoa, em vez da tabela com um formulario aberto em cada celula.
   A tela antiga mostrava TODOS os campos de TODAS as pessoas ao mesmo tempo —
   quatro caixas de texto por linha, treze linhas — e nao havia como saber o que
   era leitura e o que era edicao. Aqui o <details> fechado e leitura; abrir uma
   pessoa e que traz os campos.

   Sem JavaScript, como o resto do projeto: a CSP fecha script-src em 'self' e o
   <details> nativo abre e fecha sozinho (mesma razao do sino em topo.html). */
.lista-pessoas { list-style: none; margin: 0; padding: 0; }

.pessoa-cartao {
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    margin-bottom: 8px;
    background: var(--superficie);
}

.pessoa-resumo {
    cursor: pointer;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* O marcador padrao some pelos DOIS caminhos: so um nao cobre todos os
   navegadores. */
.pessoa-resumo::-webkit-details-marker { display: none; }
.pessoa-resumo { list-style: none; }
.pessoa-cartao details[open] .pessoa-resumo { border-bottom: 1px solid var(--borda-suave); }

/* Ocupa a sobra para empurrar as marcas e o "Editar" para a direita. */
.pessoa-info { flex: 1 1 auto; min-width: 0; }
.pessoa-info strong { display: block; font-size: 14px; font-weight: 600; color: var(--texto); }
.pessoa-detalhe {
    display: block;
    font-size: 12.5px;
    color: var(--texto-suave);
}

.pessoa-marcas { display: flex; gap: 6px; flex: 0 0 auto; }

.pessoa-abrir {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--marca-turqueza);
}
.pessoa-cartao details[open] .pessoa-abrir { color: var(--texto-suave); }

.pessoa-corpo { padding: 14px; display: grid; gap: 14px; }

/* O que nao e "mudar os dados": o acesso e a saida da equipe. Separado por
   linha para nao parecer mais um campo do formulario de cima. */
.pessoa-rodape {
    border-top: 1px solid var(--borda-suave);
    padding-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.pessoa-rodape .dica { flex: 1 1 200px; margin: 0; }

.pessoa-inativa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

/* O "Adicionar" tambem comeca fechado: o formulario aberto no fim da lista era
   metade da altura da tela para uma acao ocasional. */
.bloco-novo-abrir {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--marca-turqueza);
    padding: 8px 0;
}
.bloco-novo-abrir::-webkit-details-marker { display: none; }
.bloco-novo-abrir { list-style: none; }

/* O texto do marcador precisa do proprio bloco para que o <strong> e a dica
   fiquem um sobre o outro, e nao lado a lado com a caixa. */
.marcador-texto { display: block; }

/* ===========================================================================
   Agenda fechada (ausencias)
   =========================================================================== */

.ausencia-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

/* Os compromissos que ficaram marcados dentro da ausencia. Recuado e com
   contorno proprio: nao sao a ausencia, sao a consequencia dela. */
.ausencia-marcados {
    border-top: 1px solid var(--borda-suave);
    padding: 12px 14px;
    background: var(--fundo);
}
.ausencia-marcados .dica { margin: 0 0 8px; }

/* Os dois horarios lado a lado, empilhando no celular. */
.faixa-horas { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.faixa-horas .campo { flex: 1 1 120px; margin: 0; }
.faixa-horas .dica { flex: 1 1 100%; margin: 0; }

/* ===========================================================================
   Mensagens enviadas
   =========================================================================== */

.abas-filtro { display: flex; flex-wrap: wrap; gap: 8px; }
.aba-filtro {
    padding: 6px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pill);
    font-size: 13px;
    color: var(--texto-suave);
    text-decoration: none;
}
.aba-filtro:hover { border-color: var(--borda-forte); }
.aba-filtro.ativo {
    background: var(--marca-turqueza);
    border-color: var(--marca-turqueza);
    color: var(--marca-branco);
}

.lista-mensagens { list-style: none; margin: 0; padding: 0; }
.mensagem-item {
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    margin-bottom: 8px;
    background: var(--superficie);
}
.mensagem-item summary {
    cursor: pointer;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* O marcador padrao some pelos DOIS caminhos: so um nao cobre todos os
   navegadores (mesma razao do sino em topo.html). */
.mensagem-item summary::-webkit-details-marker { display: none; }
.mensagem-item summary { list-style: none; }

.mensagem-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mensagem-resumo { font-size: 14px; color: var(--texto); }
.mensagem-quando {
    font-size: 12px;
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
}

.mensagem-corpo { padding: 0 14px 14px; border-top: 1px solid var(--borda-suave); }
/* O texto do WhatsApp tem quebra de linha propria, e ela precisa sobreviver. */
.mensagem-texto {
    white-space: pre-line;
    font-size: 14px;
    margin: 12px 0;
    color: var(--texto);
}

.paginacao { display: flex; gap: 8px; }

/* ===========================================================================
   Pendencias
   =========================================================================== */

/* Nome a esquerda, campo a direita: a lista fica escaneavel e o alvo de
   digitacao sempre no mesmo lugar. */
.campo-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borda-suave);
}
.campo-linha:last-child { border-bottom: 0; }
.campo-linha .rotulo { flex: 1; margin-bottom: 0; }
.campo-linha .entrada { max-width: 200px; }

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: 8px 0; border-bottom: 1px solid var(--borda-suave); }
.lista-simples li:last-child { border-bottom: 0; }

@media (max-width: 560px) {
    .campo-linha { flex-direction: column; align-items: stretch; gap: 4px; }
    .campo-linha .entrada { max-width: none; }
}

/* O alerta de pendencia fica ao lado do sino e se parece com ele, mas e um
   LINK simples: nao abre painel, leva direto para a tela de conserto. */
.alerta-pendencia {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--raio-sm);
    color: var(--marca-terracota);
    text-decoration: none;
}
.alerta-pendencia:hover { background: var(--superficie-2); }

.logo-empresa {
    max-width: 90px;
    max-height: 40px;
    object-fit: contain;
    border-radius: var(--raio-sm);
}
.entrada-arquivo { max-width: 200px; font-size: 13px; }

/* Na pagina publica a logo e a identidade de quem atende: maior e centrada. */
.publico-logo {
    max-width: 180px;
    max-height: 72px;
    object-fit: contain;
    margin: 0 auto 12px;
    display: block;
}