:root{
    --bg:#F3EEE7;
    --offwhite:#FBF8F3;
    --cafe:#4B372E;
    --cafe-fundo:#29221F;
    --nude:#C9B5A4;
    --nude-escuro:#9C8574;
    --champagne:#B59A70;
    --borda:#E5DACD;
    --verde:#5E7A55;
    --vermelho:#9B3B2E;
    --ambar:#B07A2A;

    --serif:"Fraunces","Iowan Old Style",Georgia,serif;
    --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{ background:var(--bg); }
body{
    margin:0; background:var(--bg); color:var(--cafe-fundo);
    font-family:var(--sans); font-size:15px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
    min-height:100vh; display:flex; flex-direction:column;
}
[hidden]{ display:none !important; }

.painel{
    width:100%; max-width:1120px; margin:0 auto; padding:30px 24px 40px;
    display:flex; flex-direction:column; gap:26px; flex:1;
}

/* Cabeçalho */
.cabecalho{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
}
.kicker{
    font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--champagne); font-weight:500;
}
.cabecalho-acoes{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.usuario-logado{ font-size:12px; color:var(--nude-escuro); letter-spacing:.04em; }
.link-sair, .link-voltar{
    font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cafe);
    text-decoration:none; border-bottom:1px solid var(--nude); padding-bottom:1px;
}
.link-sair:hover, .link-voltar:hover{ color:var(--champagne); border-color:var(--champagne); }

h1{ font-family:var(--serif); font-weight:400; margin:0; font-size:30px; }
h2{ font-family:var(--serif); font-weight:400; margin:0; font-size:21px; }
h3{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--nude-escuro); font-weight:500; margin:0; }

.faixa-admin{
    background:var(--cafe-fundo); color:var(--offwhite); font-size:12px; letter-spacing:.06em;
    padding:9px 24px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.faixa-admin a{ color:var(--champagne); }

/* Sininho */
.sino{ position:relative; }
.sino-botao{
    position:relative; background:var(--offwhite); border:1px solid var(--borda); border-radius:50%;
    width:42px; height:42px; display:grid; place-items:center; cursor:pointer; color:var(--cafe);
}
.sino-botao:hover{ border-color:var(--champagne); }
.sino-botao svg{ width:20px; height:20px; }
.sino-botao.ativo{ color:var(--ambar); border-color:var(--ambar); animation:balanco 2.2s ease-in-out infinite; }
@keyframes balanco{ 0%,80%,100%{transform:rotate(0)} 85%{transform:rotate(12deg)} 90%{transform:rotate(-10deg)} 95%{transform:rotate(6deg)} }
.sino-contador{
    position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px;
    border-radius:10px; background:var(--vermelho); color:#fff; font-size:11px; font-weight:600;
    display:grid; place-items:center;
}
.sino-lista{
    position:absolute; right:0; top:50px; z-index:30; width:min(360px, calc(100vw - 32px));
    background:#fff; border:1px solid var(--borda); border-radius:6px;
    box-shadow:0 12px 30px rgba(41,34,31,.14); max-height:420px; overflow:auto;
}
.sino-lista-titulo{ padding:12px 14px; border-bottom:1px solid var(--borda); font-size:12px; color:var(--nude-escuro); }
.sino-item{
    display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--borda);
    padding:11px 14px; cursor:pointer; font:inherit; font-size:13.5px; color:var(--cafe-fundo);
}
.sino-item:last-child{ border-bottom:0; }
.sino-item:hover{ background:var(--offwhite); }
.sino-item small{ display:block; font-size:11.5px; color:var(--nude-escuro); }
.sino-item small.atrasada{ color:var(--vermelho); }
.sino-vazio{ padding:18px 14px; color:var(--nude-escuro); font-size:13px; text-align:center; }

/* Abas */
.abas{ display:flex; gap:4px; border-bottom:1px solid var(--borda); overflow-x:auto; }
.aba{
    background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap;
    font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--nude-escuro); padding:12px 16px; margin-bottom:-1px;
}
.aba:hover{ color:var(--cafe); }
.aba.ativa{ color:var(--cafe-fundo); border-bottom-color:var(--champagne); font-weight:500; }

.bloco{ display:flex; flex-direction:column; gap:14px; }
.bloco-titulo{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

/* Cartões e formulários */
.cartao{
    background:var(--offwhite); border:1px solid var(--borda); border-radius:4px; padding:20px;
}
.formulario-card{
    background:var(--offwhite); border:1px solid var(--borda); border-radius:4px;
    padding:20px; display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; align-items:end;
}
.campo-grupo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.campo-grupo label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--nude-escuro); font-weight:500; }
.campo-grupo input, .campo-grupo select, .campo-grupo textarea, .campo{
    font:inherit; padding:10px 12px; border:1px solid var(--borda); border-radius:3px;
    background:#fff; color:var(--cafe-fundo); font-size:13.5px; width:100%;
}
.campo-grupo textarea{ resize:vertical; min-height:90px; }
.campo-grupo input:focus, .campo-grupo select:focus, .campo-grupo textarea:focus, .campo:focus{
    outline:2px solid var(--champagne); outline-offset:1px;
}
.campo-ajuda{ font-size:11.5px; color:var(--nude-escuro); }
.campo-check{ display:flex; align-items:center; gap:8px; font-size:13.5px; }

.botao{
    border:0; cursor:pointer; background:var(--cafe-fundo); color:var(--offwhite);
    font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.2em;
    text-transform:uppercase; padding:11px 16px; border-radius:2px; min-height:43px;
    transition:background .2s ease; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.botao:hover{ background:var(--cafe); }
.botao:disabled{ opacity:.55; cursor:wait; }
.botao--claro{ background:transparent; color:var(--cafe); border:1px solid var(--nude); }
.botao--claro:hover{ background:#fff; }
.botao--mini{ min-height:0; padding:5px 10px; font-size:10.5px; letter-spacing:.1em; }
.botao--excluir{
    background:transparent; color:var(--vermelho); border:1px solid #D8B4A8; padding:5px 10px; font-size:10.5px; letter-spacing:.1em; min-height:0;
}
.botao--excluir:hover{ background:#FBEBE8; }
.botao--pdf{
    background:var(--champagne); color:#fff; min-height:0; padding:9px 14px; font-size:11px; letter-spacing:.15em; border-radius:3px;
}
.botao--pdf:hover{ background:var(--cafe); }
.botao--whats{
    background:#E7F1E4; color:#2F5D2A; border:1px solid #C5DCBF; min-height:0; padding:3px 8px;
    font-size:11px; letter-spacing:.04em; text-transform:none; border-radius:20px; font-weight:500;
}
.botao--whats:hover{ background:#D7E9D2; }
.acoes-linha{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }

/* Filtros */
.filtros{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.segmentado{ display:inline-flex; border:1px solid var(--borda); border-radius:3px; overflow:hidden; background:#fff; }
.segmentado button{
    background:none; border:0; border-right:1px solid var(--borda); cursor:pointer;
    padding:9px 14px; font-family:var(--sans); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--nude-escuro);
}
.segmentado button:last-child{ border-right:0; }
.segmentado button.ativo{ background:var(--cafe-fundo); color:var(--offwhite); }
.navegador-periodo{ display:inline-flex; align-items:center; gap:4px; }
.navegador-periodo button{
    width:36px; height:36px; border:1px solid var(--borda); background:#fff; border-radius:3px; cursor:pointer; color:var(--cafe); font-size:16px;
}
.navegador-periodo button:hover{ border-color:var(--champagne); }
.periodo-rotulo{ font-family:var(--serif); font-size:18px; padding:0 8px; }
.filtros .campo{ width:auto; padding:8px 10px; }

/* Tabela */
.rolagem{ overflow-x:auto; border:1px solid var(--borda); border-radius:3px; background:var(--offwhite); }
table{ border-collapse:collapse; width:100%; font-size:13.5px; }
th,td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--borda); vertical-align:middle; }
th{
    font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--nude-escuro);
    font-weight:500; background:rgba(201,181,164,.08); white-space:nowrap;
}
td{ white-space:nowrap; }
td.quebra, td.principal{ white-space:normal; }
td.quebra{ min-width:140px; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:#fff; }
tr.destaque-hoje{ background:#FFF7EA; }
td.numero, th.numero{ text-align:right; font-variant-numeric:tabular-nums; }
td.principal{ color:var(--cafe-fundo); font-weight:500; }
.sub{ display:block; font-size:11.5px; color:var(--nude-escuro); font-weight:400; }
.vazio{ padding:26px 16px; color:var(--nude-escuro); font-size:13.5px; text-align:center; white-space:normal; }

.status-badge{
    display:inline-block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
    border:1px solid var(--champagne); color:var(--champagne); padding:2px 8px; border-radius:20px;
}
.status-badge.agendada{ border-color:var(--ambar); color:var(--ambar); }
.status-badge.realizado{ border-color:var(--verde); color:var(--verde); background:#EEF3EB; }
.status-badge.nao_fechou{ border-color:var(--nude-escuro); color:var(--nude-escuro); }
.status-badge.nao_compareceu{ border-color:#D8B4A8; color:var(--vermelho); }
.status-badge.inativo{ border-color:#D8B4A8; color:var(--vermelho); }

.chips{ display:flex; flex-wrap:wrap; gap:4px; }
.chip{ background:#fff; border:1px solid var(--borda); border-radius:12px; padding:1px 8px; font-size:12px; }

/* Resumo */
.resumo-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; }
.cartao-resumo{
    background:var(--offwhite); border:1px solid var(--borda); border-radius:4px; padding:18px 20px;
    display:flex; flex-direction:column; gap:6px;
}
.cartao-resumo-titulo{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--nude-escuro); font-weight:500; }
.cartao-resumo-valor{ font-family:var(--serif); font-size:28px; color:var(--cafe-fundo); font-variant-numeric:tabular-nums; line-height:1.15; }
.cartao-resumo-detalhe{ font-size:12px; color:var(--nude-escuro); }
.cartao-resumo-destaque{ border-color:var(--champagne); background:#FAF5EE; }
.cartao-resumo-destaque .cartao-resumo-titulo, .cartao-resumo-destaque .cartao-resumo-valor{ color:var(--champagne); }
.metricas-secundarias{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.metrica{ border:1px dashed var(--borda); border-radius:4px; padding:12px 14px; background:#fff; }
.metrica span{ display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--nude-escuro); }
.metrica strong{ font-family:var(--serif); font-weight:400; font-size:21px; font-variant-numeric:tabular-nums; }

/* Feedbacks e observações */
.lista-feed{ display:flex; flex-direction:column; gap:10px; }
.feed-item{ background:#fff; border:1px solid var(--borda); border-left:3px solid var(--champagne); border-radius:3px; padding:12px 14px; }
.feed-item-topo{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:4px; }
.feed-data{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--champagne); font-weight:500; }
.feed-texto{ white-space:pre-wrap; font-size:14px; }
.feed-item.automatica{ border-left-color:var(--nude); background:var(--offwhite); }
.feed-item.automatica .feed-texto{ color:var(--nude-escuro); font-style:italic; font-size:13px; }

.cliente{ background:var(--offwhite); border:1px solid var(--borda); border-radius:4px; }
.cliente + .cliente{ margin-top:10px; }
.cliente-topo{
    display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; cursor:pointer;
}
.cliente-nome{ font-weight:500; }
.cliente-meta{ font-size:12px; color:var(--nude-escuro); display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.cliente-corpo{ border-top:1px solid var(--borda); padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.cliente-obs-form{ display:flex; gap:8px; align-items:flex-start; }
.cliente-obs-form textarea{ flex:1; min-height:60px; }
.contador-obs{ font-size:11px; background:var(--champagne); color:#fff; border-radius:10px; padding:1px 7px; }

/* Lista de Dras (admin) */
.dras-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; }
.dra-card{ background:var(--offwhite); border:1px solid var(--borda); border-radius:4px; padding:18px; display:flex; flex-direction:column; gap:12px; }
.dra-card.inativa{ opacity:.65; }
.dra-card-topo{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.dra-nome{ font-family:var(--serif); font-size:20px; }
.dra-num{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.dra-num div{ background:#fff; border:1px solid var(--borda); border-radius:3px; padding:8px 10px; }
.dra-num span{ display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--nude-escuro); }
.dra-num strong{ font-weight:500; font-variant-numeric:tabular-nums; }
.dra-num .alerta strong{ color:var(--vermelho); }

/* Modal */
.modal-fundo{
    position:fixed; inset:0; background:rgba(41,34,31,.45); z-index:50;
    display:grid; place-items:center; padding:16px;
}
.modal{
    background:var(--offwhite); border-radius:6px; width:min(520px, 100%); max-height:calc(100vh - 32px); overflow:auto;
    padding:22px; display:flex; flex-direction:column; gap:14px; box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.modal-topo{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.modal-fechar{ background:none; border:0; font-size:24px; line-height:1; cursor:pointer; color:var(--nude-escuro); }
.modal-acoes{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.grade-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal--confirmar{ width:min(420px, 100%); }
.confirmar-texto{ margin:0; color:var(--cafe); font-size:14px; line-height:1.55; }
.botao--perigo{ background:var(--vermelho); border-color:var(--vermelho); color:#fff; }
.botao--perigo:hover{ background:#7E2F24; }

/* Avisos */
.aviso{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:60;
    background:var(--cafe-fundo); color:var(--offwhite); padding:11px 18px; border-radius:4px; font-size:13.5px;
    box-shadow:0 8px 24px rgba(0,0,0,.2); max-width:calc(100vw - 32px); }
.aviso.erro{ background:var(--vermelho); }
.mensagem-erro{ background:#FBEBE8; color:var(--vermelho); border:1px solid #E8C6BD; padding:10px 12px; border-radius:3px; font-size:13.5px; }

/* Login */
.login-pagina{ flex:1; display:grid; place-items:center; padding:24px 16px; }
.login-cartao{
    width:min(400px, 100%); background:var(--offwhite); border:1px solid var(--borda); border-radius:6px;
    padding:34px 30px; display:flex; flex-direction:column; gap:18px;
}
.login-cartao form{ display:flex; flex-direction:column; gap:14px; }
.campo-senha{ position:relative; }
.campo-senha input{ width:100%; padding-right:44px; }
.ver-senha{
    position:absolute; top:0; right:0; bottom:0; width:42px; display:grid; place-items:center;
    background:none; border:0; cursor:pointer; color:var(--nude-escuro);
}
.ver-senha:hover, .ver-senha[aria-pressed="true"]{ color:var(--cafe); }
.ver-senha svg{ width:19px; height:19px; }
.manter-conectada{ color:var(--cafe); cursor:pointer; user-select:none; }
.manter-conectada input{ width:16px; height:16px; accent-color:var(--cafe); cursor:pointer; }
.login-saudacao{
    display:flex; flex-direction:column; gap:2px; padding:14px 0 4px; border-top:1px solid var(--borda);
}
.login-saudacao span{ font-size:13px; color:var(--nude-escuro); letter-spacing:.02em; }
.login-saudacao strong{ font-family:var(--serif); font-weight:400; font-size:24px; color:var(--cafe); line-height:1.2; }
.login-saudacao a{ font-size:11.5px; color:var(--nude-escuro); margin-top:4px; align-self:flex-start; }
.login-saudacao a:hover{ color:var(--cafe); }

/* Rodapé */
.rodape{
    text-align:center; padding:22px 16px 28px; font-size:11.5px; letter-spacing:.08em; color:var(--nude-escuro);
    border-top:1px solid var(--borda);
}
.rodape strong{ color:var(--cafe); font-weight:500; }
.rodape a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s, color .2s; }
.rodape a:hover{ color:var(--cafe); border-bottom-color:var(--champagne); }


@media (max-width:640px){
    .painel{ padding:22px 16px 32px; }
    h1{ font-size:25px; }
    .grade-2{ grid-template-columns:1fr; }
    .cartao-resumo-valor{ font-size:24px; }
    .cliente-obs-form{ flex-direction:column; align-items:stretch; }
    .segmentado{ display:flex; width:100%; }
    .segmentado button{ flex:1; padding:9px 4px; letter-spacing:.06em; }
    .aba{ white-space:nowrap; }
}
.abas{ overflow-y:hidden; }
td .acoes-linha{ flex-wrap:wrap; }

/* Tabelas largas: no computador cabem na tela; em telas menores viram cartões */
@media (min-width:1001px){
    .tabela-cartoes th, .tabela-cartoes td{ padding:11px 10px; }
    .tabela-cartoes th:first-child, .tabela-cartoes td:first-child{ padding-left:16px; }
    .tabela-cartoes th:last-child, .tabela-cartoes td:last-child{ padding-right:16px; }
    .tabela-cartoes td.c-acoes{ width:1%; }
    .tabela-cartoes td.c-acoes .acoes-linha{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; }
    .tabela-cartoes td.c-acoes .botao{ width:100%; }
}
@media (min-width:1100px){
    .tabela-cartoes td.c-acoes .acoes-linha{ flex-direction:row; }
    .tabela-cartoes td.c-acoes .botao{ width:auto; }
}
@media (max-width:1000px){
    .rolagem:has(.tabela-cartoes){ border:0; background:none; overflow:visible; }
    .tabela-cartoes, .tabela-cartoes tbody{ display:block; }
    .tabela-cartoes thead{ display:none; }
    .tabela-cartoes tr{
        display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; align-items:start;
        background:var(--offwhite); border:1px solid var(--borda); border-radius:4px;
        padding:14px 16px; margin-bottom:10px;
    }
    .tabela-cartoes tr.destaque-hoje{ background:#FFF7EA; border-color:#EBD3A8; }
    .tabela-cartoes tbody tr:hover{ background:var(--offwhite); }
    .tabela-cartoes tr.destaque-hoje:hover{ background:#FFF7EA; }
    .tabela-cartoes td{ display:block; padding:0; border:0; white-space:normal; text-align:left; min-width:0; }
    .tabela-cartoes td[data-label]::before{
        content:attr(data-label); display:block; margin-bottom:3px;
        font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--nude-escuro); font-weight:500;
    }
    .tabela-cartoes td.vazio{ grid-column:1 / -1; text-align:center; padding:12px 0; }
    .tabela-cartoes td.c-sem{ display:none; }

    /* Ordem e posição dentro do cartão */
    .tabela-cartoes .c-paciente{ order:1; font-size:15px; }
    .tabela-cartoes .c-status{ order:2; justify-self:end; }
    .tabela-cartoes .c-data{ order:3; }
    .tabela-cartoes .c-valor{ order:4; }
    .tabela-cartoes .c-whats, .tabela-cartoes .c-whats2{ order:5; }
    .tabela-cartoes .c-comissao{ order:6; }
    .tabela-cartoes .c-proc{ order:7; grid-column:1 / -1; }
    .tabela-cartoes .c-acoes{ order:8; grid-column:1 / -1; padding-top:12px; border-top:1px solid var(--borda); }
    .tabela-cartoes .c-cheia{ grid-column:1 / -1; font-size:15px; }
    .tabela-cartoes .c-whats .botao--whats{ margin-bottom:2px; }
    .tabela-cartoes .c-acoes .acoes-linha{ justify-content:stretch; flex-wrap:wrap; }
    .tabela-cartoes .c-acoes .botao{ flex:1 1 0; min-height:36px; justify-content:center; }
}