/* Casa Offices tokens, casca, componentes comuns */
:root {
  --vermelho: #b91c1c; --vermelho-escuro: #8f1414; --vermelho-claro: #fde8e6;
  --grafite: #2a2a2c; --grafite-2: #3c3c3f; --tinta: #151516; --creme: #f6f3ee; --branco: #fff; --papel: #fff;
  --linha: rgba(21, 21, 22, .12); --suave: #5e5e63; --verde: #1f8f55; --verde-claro: #e2f4ea; --ambar: #b7791f; --ambar-claro: #fdf0d5;
  --titulo: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; --corpo: 'Inter', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--corpo); color: var(--tinta); background: var(--creme); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--titulo); letter-spacing: -.02em; margin: 0; line-height: 1.1; font-weight: 800; }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
.ico { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 2px; border-radius: 8px; }


/* Casca */
.barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 68px; padding: 0 clamp(16px, 3vw, 32px) 0 0; background: rgba(246, 243, 238, .94); backdrop-filter: blur(12px); border-bottom: 1.5px solid var(--linha); }
.barra-logo { width: 264px; flex: none; height: 100%; display: flex; align-items: center; padding: 0 24px; border-right: 1.5px solid var(--linha); }
.barra-logo img { height: 42px; width: auto; display: block; }
.barra h1 { font-size: 1.5rem; margin: 0 auto 0 8px; }
.busca { display: flex; align-items: center; gap: 8px; background: var(--papel); border: 1.5px solid var(--linha); border-radius: 999px; padding: 8px 14px; color: var(--suave); min-width: 240px; }
.busca input { border: 0; outline: 0; background: transparent; font: inherit; width: 100%; color: var(--tinta); }
.sino { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--linha); background: var(--papel); display: grid; place-content: center; cursor: pointer; color: var(--grafite); text-decoration: none; flex: none; }
.sino b { position: absolute; top: -4px; right: -4px; background: var(--vermelho); color: #fff; border-radius: 999px; font: 700 .68rem var(--corpo); padding: 1px 6px; }
.perfil { position: relative; flex: none; }
.perfil-botao { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1.5px solid var(--linha); background: var(--papel); cursor: pointer; text-align: left; color: var(--tinta); }
.perfil-botao .nome b { display: block; font-size: .85rem; line-height: 1.15; }
.perfil-botao .nome small { color: var(--suave); font-size: .72rem; }
.perfil-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; background: var(--papel); border: 1.5px solid var(--linha); border-radius: 16px; padding: 6px; box-shadow: 0 24px 50px -16px rgba(21, 21, 22, .35); z-index: 40; }
.perfil.aberto .perfil-menu { display: block; }
.perfil-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; font: 600 .9rem var(--corpo); color: var(--tinta); }
.perfil-menu a:hover { background: var(--creme); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--vermelho); color: #fff; display: grid; place-content: center; font: 800 .95rem var(--titulo); flex: none; }
.usuario { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.casca { display: grid; grid-template-columns: 264px 1fr; min-height: calc(100vh - 68px); }
.lateral { position: sticky; top: 68px; height: calc(100vh - 68px); background: var(--grafite); color: #e9e6e1; padding: 20px 16px; display: flex; flex-direction: column; gap: 22px; }
.nav { display: grid; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: #c9c6c0; text-decoration: none; font-weight: 500; position: relative; transition: background .2s, color .2s; }
.nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav a.ativo { background: var(--vermelho); color: #fff; }
.nav .contagem { margin-left: auto; background: var(--papel); color: var(--vermelho); border-radius: 999px; font: 700 .72rem var(--corpo); padding: 2px 8px; }
.principal { min-width: 0; }
.titulo-movel { display: none; font-size: 1.5rem; padding: 18px 18px 0; }
.palco { padding: clamp(18px, 3vw, 36px); display: grid; gap: 22px; max-width: 1400px; }

/* Componentes */
.cartao { background: var(--papel); border: 1.5px solid var(--linha); border-radius: 20px; padding: 22px; }
.cartao h2 { font-size: 1.15rem; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cartao h2 a { font: 600 .85rem var(--corpo); color: var(--vermelho); text-decoration: none; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font: 600 .92rem var(--corpo); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s, background .2s; }
.botao:hover { transform: translateY(-1px); }
.botao-vermelho { background: var(--vermelho); color: #fff; } .botao-vermelho:hover { background: var(--vermelho-escuro); }
.botao-contorno { border-color: var(--grafite); background: transparent; color: var(--grafite); }
.botao-verde { background: var(--verde); color: #fff; }
.botao-pequeno { padding: 7px 14px; font-size: .82rem; }
.botao-fantasma { background: transparent; color: var(--suave); border-color: var(--linha); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 600 .75rem var(--corpo); background: #eee; color: var(--grafite); white-space: nowrap; }
.chip.novo, .chip.atrasado, .chip.recusado { background: var(--vermelho-claro); color: var(--vermelho); }
.chip.pago, .chip.confirmado, .chip.ativo { background: var(--verde-claro); color: var(--verde); }
.chip.pendente, .chip.avencer { background: var(--ambar-claro); color: var(--ambar); }
.chip.visita { background: #e7e7ea; color: var(--grafite); }
.chip.reserva { background: #fbe0dd; color: var(--vermelho); }
.abas { display: inline-flex; gap: 4px; padding: 4px; background: var(--papel); border: 1.5px solid var(--linha); border-radius: 999px; flex-wrap: wrap; }
.abas button { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font: 600 .86rem var(--corpo); cursor: pointer; color: var(--suave); }
.abas button.ativo { background: var(--grafite); color: #fff; }
.cabeca-tela { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }

/* Formulários */
.campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.campos .cheio { grid-column: 1 / -1; }
.campo { display: grid; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--grafite); }
.campo input, .campo select, .campo textarea { font: 400 .95rem var(--corpo); padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--linha); background: var(--creme); width: 100%; color: var(--tinta); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--vermelho); background: var(--papel); }

/* Janela e aviso */
.janela { border: 0; border-radius: 22px; padding: 0; width: min(560px, 94vw); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .45); }
.janela::backdrop { background: rgba(21, 21, 22, .55); backdrop-filter: blur(3px); }
.janela header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 6px; }
.janela h3 { font-size: 1.35rem; }
.janela-corpo { padding: 14px 24px 24px; display: grid; gap: 16px; }
.fechar { border: 0; background: var(--creme); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-content: center; }
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: grid; gap: 8px; }
.toast { background: var(--grafite); color: #fff; padding: 12px 18px; border-radius: 14px; font-size: .9rem; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .5); animation: entra .35s; }
.toast.erro { background: var(--vermelho); }
.toast.sai { opacity: 0; transition: opacity .4s; }
@keyframes entra { from { transform: translateY(10px); opacity: 0; } }
.tela-entra { animation: entra .4s; }