@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url('fontes/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url('fontes/cormorant-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url('fontes/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url('fontes/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url('fontes/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url('fontes/dm-sans-latin-700-normal.woff2') format('woff2'); }

:root {
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --tinta: #442a21; --tinta-suave: #66463a; --texto-mudo: #82746d;
  --argila: #b87a66; --argila-escura: #9e624f; --rubor: #f4e4dc; --papel: #fcf8f4; --cartao: #fffdfb;
  --linha: #eaded6; --verde: #4f7a5a; --verde-fundo: #e6efe6; --ambar: #94661f; --ambar-fundo: #f8eedb;
  --vermelho: #a54646; --vermelho-fundo: #f7e3e1;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* o atributo hidden vence o display dos componentes */
body { margin: 0; background: var(--papel); color: var(--tinta); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--argila-escura); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: 36px; } h2 { font-size: 26px; } h3 { font-size: 20px; }
p { margin: 0 0 1em; }
small, .mudo { color: var(--texto-mudo); }

/* estrutura */
.casca { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--cartao); border-right: 1px solid var(--linha); padding: 24px 18px; display: flex; flex-direction: column; gap: 28px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca img { width: 40px; height: 40px; }
.marca span { font: 500 28px/1 var(--serif); }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a, .menu span { padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--tinta-suave); font-size: 14px; }
.menu a:hover { background: var(--rubor); }
.menu a.ativo { background: var(--rubor); color: var(--tinta); font-weight: 500; }
.menu span { color: #b9aaa2; }
.menu small { font-size: 10px; margin-left: 4px; }
.menu-titulo { margin: 14px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--texto-mudo); }
.lateral__pe { margin-top: auto; font-size: 13px; }
.lateral__pe form { margin-top: 8px; }
.conteudo { padding: 36px clamp(16px, 4vw, 48px) 64px; max-width: 1060px; width: 100%; }
.olho { display: block; margin-bottom: 6px; color: var(--argila-escura); font-size: 11px; font-weight: 700; letter-spacing: .16em; }

/* componentes */
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 24px; margin-bottom: 20px; box-shadow: 0 6px 20px #67452e0a; }
.cartao--destaque { border-color: #d8b2a3; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; background: var(--argila); color: #fffaf7; font: 700 13px var(--sans); text-decoration: none; cursor: pointer; }
.botao:hover { background: var(--argila-escura); }
.botao--contorno { background: transparent; border-color: #d8beb1; color: var(--tinta); }
.botao--contorno:hover { background: #fcf2ec; }
.botao--perigo { background: transparent; border-color: #e0b9b5; color: var(--vermelho); }
.botao--perigo:hover { background: var(--vermelho-fundo); }
.botao--link { background: none; border: 0; padding: 0; min-height: 0; color: var(--argila-escura); text-decoration: underline; font-weight: 500; }
.botao--link:hover { background: none; color: var(--tinta); }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 14px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date],
input[type=time], input[type=search], select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid #d8d0ca; border-radius: 10px;
  background: #fff; color: var(--tinta); font: 15px var(--sans); }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--argila); box-shadow: 0 0 0 3px #b87a6626; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 16px; }
.caixa-marcar { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.caixa-marcar input { margin-top: 4px; accent-color: var(--argila); width: 18px; height: 18px; flex: 0 0 auto; }
.ajuda { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--texto-mudo); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--argila-escura); outline-offset: 3px; }

.aviso { padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; }
.aviso--ok { background: var(--verde-fundo); color: #2f5a3b; }
.aviso--erro { background: var(--vermelho-fundo); color: #7e2f2f; }
.aviso--atencao { background: var(--ambar-fundo); color: #6d4a12; }
.aviso--demonstracao { background: #f6e4da; color: #5f4136; }
.aviso--demonstracao a { color: inherit; font-weight: 600; text-decoration: underline; }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo--open { background: var(--verde-fundo); color: var(--verde); }
.selo--connecting { background: var(--ambar-fundo); color: var(--ambar); }
.selo--close { background: var(--vermelho-fundo); color: var(--vermelho); }
.etiqueta { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.etiqueta--gratis { background: var(--rubor); color: var(--argila-escura); }
.etiqueta--oficial { background: var(--verde-fundo); color: var(--verde); }
.riscos { margin: 12px 0 0; padding-left: 20px; color: var(--tinta-suave); font-size: 14px; }
.riscos li { margin-bottom: 6px; }
.qr { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-top: 8px; }
.qr > div:last-child { flex: 1 1 220px; }
.qr__imagem { flex: 0 0 auto; width: 220px; height: 220px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.qr__imagem img { width: 100%; height: 100%; object-fit: contain; }
.qr ol { margin: 0; padding-left: 20px; font-size: 14px; }
.qr ol li { margin-bottom: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { color: var(--texto-mudo); font-weight: 500; font-size: 12px; }
.tabela-rolagem { overflow-x: auto; }

/* termo */
.termo { max-width: 760px; }
.termo ol { padding-left: 22px; }
.termo li { margin-bottom: 18px; }
.termo li strong { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.termo__assinatura { border-top: 1px solid var(--linha); margin-top: 24px; padding-top: 20px; }

/* login */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(circle at 85% 0%, #f2dfd6 0, transparent 40%), radial-gradient(circle at 0% 100%, #f2dfd6 0, transparent 35%), var(--papel); }
.entrada__caixa { width: 100%; max-width: 420px; }
.entrada__caixa .marca { justify-content: center; margin-bottom: 28px; }
.entrada__caixa .marca img { width: 56px; height: 56px; }
.entrada__caixa .marca span { font-size: 40px; }
.entrada__caixa .botao { width: 100%; margin-top: 6px; }

@media (max-width: 820px) {
  .casca { grid-template-columns: minmax(0, 1fr); }
  .lateral { border-right: 0; border-bottom: 1px solid var(--linha); padding: 14px 16px; gap: 12px; }
  .menu { flex-direction: row; flex-wrap: wrap; }
  .menu-titulo { display: none; }
  .lateral__pe { margin-top: 0; display: flex; justify-content: space-between; align-items: center; }
  .lateral__pe form { margin-top: 0; }
  .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .qr__imagem { margin: 0 auto; }
  h1 { font-size: 30px; }
}
.entrada__rodape { text-align: center; font-size: 13px; }

/* ── agenda ───────────────────────────────────────────────────────────────────────────────────────── */
.botao--pequeno { min-height: 36px; padding: 0 14px; }
.agenda-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.agenda-topo .acoes { margin-top: 0; }
.agenda-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.agenda-filtros input, .agenda-filtros select { width: auto; margin-top: 0; padding: 7px 10px; }
.agenda-filtros input[type=search] { flex: 1 1 220px; }
.alternar { display: inline-flex; margin-left: auto; border: 1px solid #d8beb1; border-radius: 999px; overflow: hidden; }
.alternar a { padding: 7px 16px; text-decoration: none; color: var(--tinta-suave); font-size: 13px; }
.alternar a.ativo { background: var(--argila); color: #fffaf7; font-weight: 700; }
.cartao--grade { padding: 0; overflow: hidden; }
.grade-rolagem { overflow-x: auto; }
.grade-dia { display: grid; grid-template-rows: auto; grid-auto-rows: 19px; position: relative; padding: 0 12px 12px 0; min-width: 100%; }
.grade-dia__canto, .grade-dia__titulo { grid-row: 1; position: sticky; top: 0; z-index: 4; background: var(--cartao); border-bottom: 1px solid var(--linha); padding: 12px 8px; }
.grade-dia__titulo { font-weight: 700; font-size: 13px; text-align: center; }
.grade-dia__hora { grid-column: 1; grid-row-end: span 4; font-size: 11px; color: var(--texto-mudo); text-align: right; padding: 0 8px; transform: translateY(-7px); }
.grade-dia__linha { grid-column: 2 / -1; grid-row-end: span 1; border-top: 1px solid var(--linha); z-index: 0; }
.vaga { z-index: 1; margin: 1px 3px; border-radius: 8px; text-decoration: none; display: flex; align-items: center; padding: 0 8px; font-size: 11px; color: transparent; }
.vaga:hover, .vaga:focus-visible { background: var(--rubor); color: var(--argila-escura); }
.cartao-ag { z-index: 3; margin: 1px 3px; padding: 4px 8px; border-radius: 9px; border-left: 4px solid var(--argila); background: #f6e7df; color: var(--tinta); text-decoration: none; font-size: 12px; line-height: 1.3; overflow: hidden; display: flex; flex-direction: column; }
.cartao-ag:hover { filter: brightness(.97); }
.cartao-ag b { font-size: 11px; }
.cartao-ag__nome { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-ag small { color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.situacao--confirmado { border-left-color: var(--verde); background: var(--verde-fundo); }
.situacao--concluido { border-left-color: #8b7d76; background: #efebe8; }
.situacao--cancelado, .situacao--faltou { border-left-color: #c9b9b2; background: #f7f3f1; color: #9a8b84; text-decoration: line-through; }
.etiqueta.situacao--marcado { background: var(--rubor); color: var(--argila-escura); }
.etiqueta.situacao--confirmado { color: var(--verde); }
.etiqueta.situacao--concluido { color: #6b5f59; }
.etiqueta.situacao--cancelado, .etiqueta.situacao--faltou { color: var(--vermelho); text-decoration: none; }
.bloco-bloqueio { z-index: 2; margin: 1px 3px; padding: 4px 8px; border-radius: 8px; font-size: 12px; color: #6d5d56;
  background: repeating-linear-gradient(135deg, #f1ebe7 0 8px, #e9e1dc 8px 16px); }
.lista-dia { list-style: none; margin: 0; padding: 0; }
.lista-dia li { border-bottom: 1px solid var(--linha); }
.lista-dia a { display: block; padding: 10px 2px; text-decoration: none; color: var(--tinta); }
.lista-dia a:hover { background: #fcf2ec; }
.lista-dia b { display: inline-block; min-width: 52px; color: var(--argila-escura); }
.situacao-texto--cancelado a, .situacao-texto--faltou a { color: #a3958f; text-decoration: line-through; }
.lista-simples { padding-left: 18px; font-size: 14px; }
.semana { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.semana__dia { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 160px; }
.semana__dia--fechado { background: #f6f1ee; }
.semana__dia--hoje { border-color: var(--argila); box-shadow: 0 0 0 2px #b87a6633; }
.semana__titulo { text-decoration: none; color: var(--tinta); font-size: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--linha); }
.cartao-ag--lista { margin: 0; }
.semana__vazio { font-size: 12px; margin: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; }
legend { font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.sub-bloco { padding: 12px 14px; border: 1px dashed #dcc6bb; border-radius: 12px; margin-bottom: 14px; }
.livres { margin: -4px 0 14px; }
.livres p { margin-bottom: 6px; font-size: 13px; }
.livres__lista { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid #d8beb1; background: #fff; color: var(--tinta); border-radius: 999px; padding: 5px 11px; font: 500 13px var(--sans); cursor: pointer; }
.chip:hover { background: #fcf2ec; }
.chip--ativo { background: var(--argila); border-color: var(--argila); color: #fffaf7; }
.acoes--coluna { flex-direction: column; align-items: stretch; }
.acoes--coluna .botao { width: 100%; }
.grade-2--larga { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.em-linha { display: inline; }
tr.inativo td { color: #a3958f; }
.dias { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.dias .caixa-marcar { margin-bottom: 6px; }
@media (max-width: 820px) {
  .grade-2--larga { grid-template-columns: minmax(0, 1fr); }
  .alternar { margin-left: 0; }
  .semana { grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .semana__dia { min-height: 0; }
  .semana__dia--fechado:not(:has(.cartao-ag)) { display: none; }
}
/* posições da grade do dia (geradas): colunas, linha inicial e altura em linhas de 15 min */
.grade-dia__canto, .grade-dia__hora { grid-column: 1; }
.c-todas { grid-column: 2 / -1; }
.cols-1 { grid-template-columns: 52px repeat(1, minmax(140px, 1fr)); }
.cols-2 { grid-template-columns: 52px repeat(2, minmax(140px, 1fr)); }
.cols-3 { grid-template-columns: 52px repeat(3, minmax(140px, 1fr)); }
.cols-4 { grid-template-columns: 52px repeat(4, minmax(140px, 1fr)); }
.cols-5 { grid-template-columns: 52px repeat(5, minmax(140px, 1fr)); }
.cols-6 { grid-template-columns: 52px repeat(6, minmax(140px, 1fr)); }
.cols-7 { grid-template-columns: 52px repeat(7, minmax(140px, 1fr)); }
.cols-8 { grid-template-columns: 52px repeat(8, minmax(140px, 1fr)); }
.cols-9 { grid-template-columns: 52px repeat(9, minmax(140px, 1fr)); }
.cols-10 { grid-template-columns: 52px repeat(10, minmax(140px, 1fr)); }
.cols-11 { grid-template-columns: 52px repeat(11, minmax(140px, 1fr)); }
.cols-12 { grid-template-columns: 52px repeat(12, minmax(140px, 1fr)); }
.c2 { grid-column: 2; }
.c3 { grid-column: 3; }
.c4 { grid-column: 4; }
.c5 { grid-column: 5; }
.c6 { grid-column: 6; }
.c7 { grid-column: 7; }
.c8 { grid-column: 8; }
.c9 { grid-column: 9; }
.c10 { grid-column: 10; }
.c11 { grid-column: 11; }
.c12 { grid-column: 12; }
.c13 { grid-column: 13; }
.l2 { grid-row-start: 2; }
.l3 { grid-row-start: 3; }
.l4 { grid-row-start: 4; }
.l5 { grid-row-start: 5; }
.l6 { grid-row-start: 6; }
.l7 { grid-row-start: 7; }
.l8 { grid-row-start: 8; }
.l9 { grid-row-start: 9; }
.l10 { grid-row-start: 10; }
.l11 { grid-row-start: 11; }
.l12 { grid-row-start: 12; }
.l13 { grid-row-start: 13; }
.l14 { grid-row-start: 14; }
.l15 { grid-row-start: 15; }
.l16 { grid-row-start: 16; }
.l17 { grid-row-start: 17; }
.l18 { grid-row-start: 18; }
.l19 { grid-row-start: 19; }
.l20 { grid-row-start: 20; }
.l21 { grid-row-start: 21; }
.l22 { grid-row-start: 22; }
.l23 { grid-row-start: 23; }
.l24 { grid-row-start: 24; }
.l25 { grid-row-start: 25; }
.l26 { grid-row-start: 26; }
.l27 { grid-row-start: 27; }
.l28 { grid-row-start: 28; }
.l29 { grid-row-start: 29; }
.l30 { grid-row-start: 30; }
.l31 { grid-row-start: 31; }
.l32 { grid-row-start: 32; }
.l33 { grid-row-start: 33; }
.l34 { grid-row-start: 34; }
.l35 { grid-row-start: 35; }
.l36 { grid-row-start: 36; }
.l37 { grid-row-start: 37; }
.l38 { grid-row-start: 38; }
.l39 { grid-row-start: 39; }
.l40 { grid-row-start: 40; }
.l41 { grid-row-start: 41; }
.l42 { grid-row-start: 42; }
.l43 { grid-row-start: 43; }
.l44 { grid-row-start: 44; }
.l45 { grid-row-start: 45; }
.l46 { grid-row-start: 46; }
.l47 { grid-row-start: 47; }
.l48 { grid-row-start: 48; }
.l49 { grid-row-start: 49; }
.l50 { grid-row-start: 50; }
.l51 { grid-row-start: 51; }
.l52 { grid-row-start: 52; }
.l53 { grid-row-start: 53; }
.l54 { grid-row-start: 54; }
.l55 { grid-row-start: 55; }
.l56 { grid-row-start: 56; }
.l57 { grid-row-start: 57; }
.l58 { grid-row-start: 58; }
.l59 { grid-row-start: 59; }
.l60 { grid-row-start: 60; }
.l61 { grid-row-start: 61; }
.l62 { grid-row-start: 62; }
.l63 { grid-row-start: 63; }
.l64 { grid-row-start: 64; }
.l65 { grid-row-start: 65; }
.l66 { grid-row-start: 66; }
.l67 { grid-row-start: 67; }
.l68 { grid-row-start: 68; }
.l69 { grid-row-start: 69; }
.l70 { grid-row-start: 70; }
.l71 { grid-row-start: 71; }
.l72 { grid-row-start: 72; }
.l73 { grid-row-start: 73; }
.l74 { grid-row-start: 74; }
.l75 { grid-row-start: 75; }
.l76 { grid-row-start: 76; }
.l77 { grid-row-start: 77; }
.l78 { grid-row-start: 78; }
.l79 { grid-row-start: 79; }
.l80 { grid-row-start: 80; }
.l81 { grid-row-start: 81; }
.l82 { grid-row-start: 82; }
.l83 { grid-row-start: 83; }
.l84 { grid-row-start: 84; }
.l85 { grid-row-start: 85; }
.l86 { grid-row-start: 86; }
.l87 { grid-row-start: 87; }
.l88 { grid-row-start: 88; }
.l89 { grid-row-start: 89; }
.l90 { grid-row-start: 90; }
.l91 { grid-row-start: 91; }
.l92 { grid-row-start: 92; }
.l93 { grid-row-start: 93; }
.l94 { grid-row-start: 94; }
.l95 { grid-row-start: 95; }
.l96 { grid-row-start: 96; }
.l97 { grid-row-start: 97; }
.l98 { grid-row-start: 98; }
.s1 { grid-row-end: span 1; }
.s2 { grid-row-end: span 2; }
.s3 { grid-row-end: span 3; }
.s4 { grid-row-end: span 4; }
.s5 { grid-row-end: span 5; }
.s6 { grid-row-end: span 6; }
.s7 { grid-row-end: span 7; }
.s8 { grid-row-end: span 8; }
.s9 { grid-row-end: span 9; }
.s10 { grid-row-end: span 10; }
.s11 { grid-row-end: span 11; }
.s12 { grid-row-end: span 12; }
.s13 { grid-row-end: span 13; }
.s14 { grid-row-end: span 14; }
.s15 { grid-row-end: span 15; }
.s16 { grid-row-end: span 16; }
.s17 { grid-row-end: span 17; }
.s18 { grid-row-end: span 18; }
.s19 { grid-row-end: span 19; }
.s20 { grid-row-end: span 20; }
.s21 { grid-row-end: span 21; }
.s22 { grid-row-end: span 22; }
.s23 { grid-row-end: span 23; }
.s24 { grid-row-end: span 24; }
.s25 { grid-row-end: span 25; }
.s26 { grid-row-end: span 26; }
.s27 { grid-row-end: span 27; }
.s28 { grid-row-end: span 28; }
.s29 { grid-row-end: span 29; }
.s30 { grid-row-end: span 30; }
.s31 { grid-row-end: span 31; }
.s32 { grid-row-end: span 32; }
.s33 { grid-row-end: span 33; }
.s34 { grid-row-end: span 34; }
.s35 { grid-row-end: span 35; }
.s36 { grid-row-end: span 36; }
.s37 { grid-row-end: span 37; }
.s38 { grid-row-end: span 38; }
.s39 { grid-row-end: span 39; }
.s40 { grid-row-end: span 40; }
.s41 { grid-row-end: span 41; }
.s42 { grid-row-end: span 42; }
.s43 { grid-row-end: span 43; }
.s44 { grid-row-end: span 44; }
.s45 { grid-row-end: span 45; }
.s46 { grid-row-end: span 46; }
.s47 { grid-row-end: span 47; }
.s48 { grid-row-end: span 48; }
.s49 { grid-row-end: span 49; }
.s50 { grid-row-end: span 50; }
.s51 { grid-row-end: span 51; }
.s52 { grid-row-end: span 52; }
.s53 { grid-row-end: span 53; }
.s54 { grid-row-end: span 54; }
.s55 { grid-row-end: span 55; }
.s56 { grid-row-end: span 56; }
.s57 { grid-row-end: span 57; }
.s58 { grid-row-end: span 58; }
.s59 { grid-row-end: span 59; }
.s60 { grid-row-end: span 60; }
.s61 { grid-row-end: span 61; }
.s62 { grid-row-end: span 62; }
.s63 { grid-row-end: span 63; }
.s64 { grid-row-end: span 64; }
.s65 { grid-row-end: span 65; }
.s66 { grid-row-end: span 66; }
.s67 { grid-row-end: span 67; }
.s68 { grid-row-end: span 68; }
.s69 { grid-row-end: span 69; }
.s70 { grid-row-end: span 70; }
.s71 { grid-row-end: span 71; }
.s72 { grid-row-end: span 72; }
.s73 { grid-row-end: span 73; }
.s74 { grid-row-end: span 74; }
.s75 { grid-row-end: span 75; }
.s76 { grid-row-end: span 76; }
.s77 { grid-row-end: span 77; }
.s78 { grid-row-end: span 78; }
.s79 { grid-row-end: span 79; }
.s80 { grid-row-end: span 80; }
.s81 { grid-row-end: span 81; }
.s82 { grid-row-end: span 82; }
.s83 { grid-row-end: span 83; }
.s84 { grid-row-end: span 84; }
.s85 { grid-row-end: span 85; }
.s86 { grid-row-end: span 86; }
.s87 { grid-row-end: span 87; }
.s88 { grid-row-end: span 88; }
.s89 { grid-row-end: span 89; }
.s90 { grid-row-end: span 90; }
.s91 { grid-row-end: span 91; }
.s92 { grid-row-end: span 92; }
.s93 { grid-row-end: span 93; }
.s94 { grid-row-end: span 94; }
.s95 { grid-row-end: span 95; }
.s96 { grid-row-end: span 96; }
/* atendimento curto (até 30 min): horário e nome na mesma linha */
.cartao-ag--curto { flex-direction: row; align-items: center; gap: 6px; padding-top: 2px; padding-bottom: 2px; }
.cartao-ag--curto small { display: none; }
.lateral__conta { color: var(--tinta); text-decoration: none; } .lateral__conta:hover, .lateral__conta.ativo { color: var(--argila-escura); text-decoration: underline; }

/* ── agendamento online (página pública da cliente) ───────────────────────────────────────────────── */
.publico { max-width: 560px; margin: 0 auto; padding: 28px 16px 40px; }
.publico__topo { text-align: center; margin-bottom: 18px; }
.publico__topo h1 { font-size: 38px; }
.opcoes { display: flex; flex-direction: column; gap: 8px; }
.opcao { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px solid #e3d3ca; border-radius: 12px; cursor: pointer; font-weight: 400; }
.opcao:hover { background: #fcf2ec; }
.opcao--ativa, .opcao:has(input:checked) { border-color: var(--argila); background: #fbefe9; }
.opcao input { margin-top: 4px; accent-color: var(--argila); }
.opcao span { display: flex; flex-direction: column; gap: 2px; }
.horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.horario { margin: 0; }
.horario input { position: absolute; opacity: 0; pointer-events: none; }
.horario span { display: block; text-align: center; padding: 10px 0; border: 1px solid #d8beb1; border-radius: 10px; font-weight: 700; cursor: pointer; background: #fff; }
.horario span:hover { background: #fcf2ec; }
.horario input:checked + span { background: var(--argila); border-color: var(--argila); color: #fffaf7; }
.horario input:focus-visible + span { outline: 2px solid var(--argila-escura); outline-offset: 2px; }
.botao--largo { width: 100%; min-height: 52px; font-size: 15px; }
.publico__privacidade { font-size: 12px; }
.publico__pronto { text-align: center; }
.publico__resumo { font-size: 18px; line-height: 1.6; }
.publico__pe { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; font-size: 12px; color: var(--texto-mudo); }
.publico__pe img { width: 16px; height: 16px; }
.copiar { display: flex; gap: 8px; flex-wrap: wrap; }
.copiar input { flex: 1 1 260px; margin-top: 0; font-size: 13px; }
.etiqueta--online { background: #e6eef7; color: #3c5f86; }

/* ── assinatura ───────────────────────────────────────────────────────────────────────────────────── */
.preco-assinatura { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.preco-assinatura strong { font: 600 40px/1 var(--serif); }
.pix { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin-top: 8px; }
.pix__qr { width: 200px; height: 200px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; padding: 6px; }
.pix__texto { flex: 1 1 240px; }
.faixa-assinatura { padding: 10px clamp(16px, 4vw, 48px); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.faixa-assinatura a { font-weight: 700; }
.faixa-assinatura--atencao { background: var(--ambar-fundo); color: #6d4a12; }
.faixa-assinatura--erro { background: var(--vermelho-fundo); color: #7e2f2f; }

/* ── cadastro pelo site ──────────────────────────────────────────────────────────────────────────── */
.marca--centro { justify-content: center; margin-bottom: 18px; }
.marca--centro img { width: 52px; height: 52px; }
.marca--centro span { font-size: 36px; }
.campo-robo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.resumo-preco { padding: 14px 16px; margin: 4px 0 14px; border-radius: 12px; background: #fbefe9; }
.resumo-preco p { margin: 6px 0 0; }
.resumo-preco strong { font: 600 24px var(--serif); color: var(--argila-escura); }
.acoes--centro { justify-content: center; }
.grade-dia__hora.l2 { transform: none; }  /* o primeiro horário não sobe para baixo do cabeçalho das colunas */

/* zona de perigo (excluir cliente) */
.zona-perigo { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha, #eaded6); }
.zona-perigo summary { cursor: pointer; color: var(--vermelho); font-weight: 600; }
.zona-perigo form { margin-top: 10px; }

/* horário do salão: um dia por linha (no celular, um embaixo do outro) */
.expediente { display: grid; gap: 10px; }
.expediente__dia { display: grid; grid-template-columns: 130px 1fr; gap: 6px 16px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--linha); }
.expediente__nome { margin: 0; font-weight: 600; }
.expediente__horas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.expediente__horas label { margin: 0; font-size: 13px; }
.expediente__fechado { display: none; }
.expediente__dia--fechado .expediente__horas { display: none; }
.expediente__dia--fechado .expediente__fechado { display: block; }
.expediente__intervalo { max-width: 360px; margin-top: 18px; }
.lista-fechados li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (max-width: 720px) {
  .expediente__dia { grid-template-columns: 1fr; }
  .expediente__horas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* chave de liga/desliga com título e explicação (telas de configuração) */
.chave { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--linha);
  font-weight: 400; cursor: pointer; }
.chave input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--argila); }
.chave span { display: grid; gap: 2px; }
.chave small { color: var(--texto-mudo); font-size: 13px; line-height: 1.45; }

/* "Restaurar o padrão": escondido até abrir, para ninguém clicar sem querer */
.restaurar { margin-top: 14px; }
.restaurar summary { cursor: pointer; color: var(--texto-mudo); font-size: 14px; font-weight: 600; }
.restaurar summary:hover { color: var(--argila-escura); }
.restaurar p { margin: 10px 0; }
details.restaurar.cartao { padding-top: 16px; padding-bottom: 16px; }

/* "Hoje" na agenda: quando já está em hoje, aparece marcado e não é clicável */
.agenda-hoje { cursor: default; pointer-events: none; }

/* endereço do salão: "lummie.com.br/" grudado no campo */
.endereco-campo { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.endereco-campo .mudo { white-space: nowrap; font-weight: 600; }
.endereco-campo input { margin-top: 0; flex: 1; min-width: 0; }
.endereco-form { max-width: 560px; }

/* abas (loja no painel e no endereço do salão) */
.abas { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 18px; }
.abas a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linha); color: var(--tinta-suave);
  text-decoration: none; font-size: 14px; font-weight: 600; background: var(--cartao); }
.abas a.ativo { background: var(--argila); border-color: var(--argila); color: #fff; }
.abas--publico { justify-content: center; margin-top: 12px; }
.contador { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #fff;
  color: var(--argila-escura); font-size: 12px; text-align: center; }
.abas a:not(.ativo) .contador { background: var(--argila); color: #fff; }
.filtros-simples { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.filtros-simples a.ativo { font-weight: 700; color: var(--tinta); text-decoration: none; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.etiqueta--alerta { background: var(--ambar-fundo); color: var(--ambar); }

/* painel: produtos e pedidos */
.produto-miniatura { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; display: block; }
.produto-foto-atual { display: flex; gap: 12px; align-items: center; }
.produto-foto-atual img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.pedidos { display: grid; gap: 12px; }
.pedido { border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; background: var(--cartao); }
.pedido header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.pedido--novo { border-color: var(--argila); box-shadow: 0 0 0 2px #b87a6622; }
.pedido--cancelado, .pedido--retirado { opacity: .75; }
.situacao-pedido--novo { background: var(--rubor); color: var(--argila-escura); }
.situacao-pedido--separado { background: var(--verde-fundo); color: var(--verde); }
.situacao-pedido--cancelado { background: var(--vermelho-fundo); color: var(--vermelho); }

/* loja pública */
.publico--largo { max-width: 920px; }
.loja-categoria { font-size: 22px; margin: 22px 0 10px; }
.vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.produto { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 12px;
  display: flex; flex-direction: column; gap: 6px; }
.produto img, .produto__sem-foto { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.produto__sem-foto { background: var(--rubor); }
.produto h3 { font-family: var(--sans); font-size: 16px; margin: 4px 0 0; }
.produto p { margin: 0; }
.produto__preco { font-weight: 700; font-size: 18px; color: var(--tinta); margin-top: auto !important; }
.produto form { margin-top: 6px; }
.loja-adulto-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; }
.aviso18 { text-align: center; }
.aviso18__selo { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--tinta); color: #fff; font-weight: 800; font-size: 20px; margin-bottom: 8px; }
.aviso18 .acoes { justify-content: center; }
.carrinho { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.carrinho li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.carrinho__qtd { display: flex; gap: 6px; align-items: center; }
.carrinho__qtd input { width: 64px; margin: 0; }
.carrinho__total { display: flex; justify-content: space-between; font-size: 18px; margin: 14px 0 4px; }
.chave-pix { font-family: ui-monospace, monospace; word-break: break-all; }
@media (max-width: 520px) {
  .carrinho li { grid-template-columns: 1fr auto; }
  .carrinho li > strong { grid-column: 2; }
  .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* produtos no celular: cada um vira um cartão (foto, nome, preço e estoque; ações embaixo) */
@media (max-width: 600px) {
  .tabela-produtos thead { display: none; }
  .tabela-produtos tr { display: grid; grid-template-columns: 52px 1fr auto; gap: 4px 12px; padding: 12px 0;
    border-bottom: 1px solid var(--linha); }
  .tabela-produtos td { padding: 0; border: 0; }
  .tabela-produtos td:nth-child(1) { grid-row: span 2; }
  .tabela-produtos td:nth-child(3) { text-align: right; font-weight: 600; }
  .tabela-produtos td:nth-child(4) { grid-column: 2 / 4; font-size: 13px; }
  .tabela-produtos td:nth-child(4)::before { content: "Estoque: "; color: var(--texto-mudo); }
  .tabela-produtos td:nth-child(5) { grid-column: 1 / 4; display: flex; gap: 14px; }
}

/* Central da Lummie */
.central { min-height: 100vh; background: var(--papel); }
.central__topo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 24px;
  border-bottom: 1px solid var(--linha); background: var(--cartao); }
.central__topo .abas { margin: 0; }
.central__sair { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.central__conteudo { max-width: 1180px; margin: 0 auto; padding: 24px 20px 48px; }
.central__acesso { max-width: 420px; margin: 40px auto; }
.central__qr { text-align: center; }
.central__qr img { background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--linha); }
.passos { padding-left: 20px; }
.passos li { margin: 6px 0; }
.central__numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 10px 0 20px; }
.numero { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 14px; }
.numero strong { display: block; font-size: 24px; color: var(--tinta); }
.numero span { color: var(--texto-mudo); font-size: 13px; }
.numero--alerta { border-color: var(--vermelho); background: var(--vermelho-fundo); }
.central__busca { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.central__busca input { flex: 1 1 260px; margin: 0; }
.central__busca select { flex: 0 1 200px; margin: 0; }
.central__acoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cartao--plano { box-shadow: none; margin: 0; }
.central-sit--teste { background: #e6eef7; color: #3c5f86; }
.central-sit--em_dia, .central-wa--conectado, .central-wa--oficial { background: var(--verde-fundo); color: var(--verde); }
.central-sit--vence_logo { background: var(--ambar-fundo); color: var(--ambar); }
.central-sit--atrasada, .central-sit--suspensa, .central-wa--caiu { background: var(--vermelho-fundo); color: var(--vermelho); }
.central-sit--cancelada, .central-wa--desligado { background: #eee; color: #666; }
.texto-alerta { color: var(--vermelho); font-weight: 700; }

/* datas especiais (Horário do salão) */
.especial__bloco { margin: 14px 0; padding: 12px 14px 4px; border: 1px solid #eadbd2; border-radius: 12px; }
.especial__bloco legend { padding: 0 6px; font-weight: 600; }
.especial__reajuste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.especial__reajuste input { width: 80px; }
#fechado .opcao, #especiais .opcao { margin-top: 10px; }

/* aparência da página do salão: cor escolhida na paleta (aparencia.CORES) */
.cor-vinho { --argila: #8e3b4f; --argila-escura: #702c3d; --rubor: #f6e3e8; }
.cor-rosa { --argila: #b24a6c; --argila-escura: #923a57; --rubor: #fae6ed; }
.cor-lilas { --argila: #7e5aa6; --argila-escura: #654488; --rubor: #eee7f6; }
.cor-azul { --argila: #3f6c9e; --argila-escura: #2f5480; --rubor: #e5edf6; }
.cor-verde { --argila: #4f7d5c; --argila-escura: #3c6348; --rubor: #e5f0e8; }
.cor-dourado { --argila: #8a6a22; --argila-escura: #6e541a; --rubor: #f6eedc; }
.cor-grafite { --argila: #4a4a4f; --argila-escura: #333337; --rubor: #ececee; }
.paleta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.paleta legend { margin-bottom: 8px; font-weight: 600; }
.paleta__cor { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e3d3ca; border-radius: 999px; cursor: pointer; font-weight: 400; }
.paleta__cor:has(input:checked) { border-color: var(--argila-escura); box-shadow: 0 0 0 2px #b87a6633; }
.paleta__cor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.paleta__cor:has(input:focus-visible) { outline: 2px solid var(--argila-escura); outline-offset: 2px; }
.paleta__amostra { width: 20px; height: 20px; border-radius: 50%; }
.paleta__amostra--argila { background: #b87a66; }
.paleta__amostra--vinho { background: #8e3b4f; }
.paleta__amostra--rosa { background: #b24a6c; }
.paleta__amostra--lilas { background: #7e5aa6; }
.paleta__amostra--azul { background: #3f6c9e; }
.paleta__amostra--verde { background: #4f7d5c; }
.paleta__amostra--dourado { background: #8a6a22; }
.paleta__amostra--grafite { background: #4a4a4f; }
.aparencia__logo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 8px; }
.publico__logo { display: block; width: auto; max-width: 160px; max-height: 96px; margin: 0 auto 10px; object-fit: contain; }
.aparencia__logo .publico__logo { margin: 0; max-height: 72px; }

/* financeiro */
.fin-navegar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 12px; }
.fin-navegar strong { font-size: 16px; }
.fin-data { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.fin-data input { width: auto; }
.numero--entrada strong { color: #2f6b45; }
.numero--saida strong { color: #9b3b2f; }
.fin-lista { list-style: none; margin: 0; padding: 0; }
.fin-item { padding: 10px 0; border-bottom: 1px solid var(--linha); }
.fin-item:last-child { border-bottom: 0; }
.fin-item__linha { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.fin-item--estornado .fin-item__linha, .fin-item--estornado > span { opacity: .55; text-decoration: line-through; }
.fin-valor { white-space: nowrap; font-weight: 700; }
.fin-valor--entrada { color: #2f6b45; }
.fin-valor--saida { color: #9b3b2f; }
.fin-total { margin: 12px 0 0; text-align: right; }
.fin-novo summary, .estorno summary { cursor: pointer; font-weight: 600; color: var(--argila-escura); }
.estorno { margin-top: 6px; font-size: 13px; }
.estorno form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 6px; }
.estorno label { flex: 1 1 200px; }
.fin-tabela td:last-child { text-align: right; }
.pagamento--pago { background: #e5f0e8; color: #2f5a3b; }
.pagamento--parcial { background: var(--ambar-fundo); color: #6d4a12; }
.pagamento--pendente { background: #f3ebe4; color: #7a6458; }
#t-pagamento { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.receber .caixa-marcar { margin: 6px 0 12px; }
.retirada { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.retirada label { flex: 0 1 180px; }
@media (max-width: 640px) { .fin-data { margin-left: 0; } .fin-item__linha { flex-direction: column; gap: 2px; } }
/* celular: pagamento e situação antes do formulário; a receber em cartões */
@media (max-width: 760px) {
  .atendimento-grade > aside { order: -1; }
  .fin-tabela--cartoes thead { display: none; }
  .fin-tabela--cartoes, .fin-tabela--cartoes tbody, .fin-tabela--cartoes tr, .fin-tabela--cartoes td { display: block; width: 100%; }
  .fin-tabela--cartoes tr { padding: 10px 0; border-bottom: 1px solid var(--linha); }
  .fin-tabela--cartoes td { padding: 2px 0; border: 0; text-align: left; }
  .fin-tabela--cartoes td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--texto-mudo); font-size: 12px; }
  .fin-tabela--cartoes td:last-child { text-align: left; padding-top: 8px; }
}

/* comissões */
.comissao__topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; }
.comissao__topo h2 { margin: 0; }
.comissao__numeros { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.comissao__numeros strong { font-size: 18px; color: var(--argila-escura); }
.comissao__pct, .comissao__pagar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 12px 0; }
.comissao__pct label, .comissao__pagar label { flex: 0 1 220px; }
.comissao__campo { display: flex; align-items: center; gap: 6px; }
.comissao__campo input { width: 80px; }
.comissao__excecoes, .comissao__detalhe { margin: 10px 0; }
.comissao__excecoes summary, .comissao__detalhe summary { cursor: pointer; font-weight: 600; color: var(--argila-escura); }
.comissao__excecoes li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.comissao__pct label, .comissao__pagar label { margin-bottom: 0; }

/* ── painel do financeiro (Resumo do mês) ── */
.g0 { --cor: #9e624f; } .g1 { --cor: #d9a77e; } .g2 { --cor: #6f8f74; } .g3 { --cor: #c27a88; }
.g4 { --cor: #7c6a97; } .g5 { --cor: #4f7287; } .g6 { --cor: #c9b28f; } .g7 { --cor: #8c8279; }
.g-entrada { --cor: #4f8a5b; } .g-saida { --cor: #c0634f; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 6px 0 18px; }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border: 1px solid var(--linha); border-radius: 16px; background: var(--cartao); box-shadow: 0 10px 26px #583a2c0d; }
.kpi__rotulo { color: var(--texto-mudo); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.kpi__valor { font: 600 30px/1.1 var(--serif); color: var(--tinta); }
.kpi--entrada .kpi__valor { color: #2f6b45; } .kpi--saida .kpi__valor { color: #9b3b2f; }
.kpi--negativo { border-color: #e7c1b9; background: #fbefec; } .kpi--negativo .kpi__valor { color: #9b3b2f; }
.kpi__delta { align-self: flex-start; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.kpi__delta small { font-weight: 500; opacity: .8; }
.kpi__delta--bom { background: #e5f0e8; color: #2f5a3b; } .kpi__delta--ruim { background: #f8e3de; color: #8a3427; }
.kpi__delta--igual { background: #f3ebe4; color: #7a6458; font-weight: 500; }
.painel { margin-bottom: 16px; }
.painel h2 { margin: 0; font-size: 22px; }
.painel__cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.painel__nota { color: var(--texto-mudo); font-size: 13px; }
.painel-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.painel-vazio { text-align: center; padding: 40px 20px; }
.grafico { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.grafico-rolagem { overflow-x: auto; }
.grafico-rolagem .grafico { min-width: 640px; }
.grafico__grade { stroke: #eee3dc; stroke-width: 1; }
.grafico__zero { stroke: #b9a69b; stroke-width: 1.2; stroke-dasharray: 4 3; }
.grafico__eixo { fill: #9a8a82; font-size: 11px; text-anchor: middle; }
.grafico__eixo--y { text-anchor: end; }
.grafico__barra { fill: var(--cor); transition: opacity .15s; cursor: pointer; }
.grafico__hoje { fill: #f6ece6; }
.grafico__linha { fill: none; stroke: var(--cor); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.grafico__area { fill: var(--cor); opacity: .12; }
.grafico__ponto { fill: #fff; stroke: var(--cor); stroke-width: 3; }
.grafico__alvo { fill: transparent; cursor: pointer; }
.grafico__alvo.grafico-ativo { fill: var(--argila-escura); opacity: .25; }
.grafico:hover .grafico__barra:not(.grafico-ativo) { opacity: .55; }
.rosca__fundo { fill: none; stroke: #f3ebe4; stroke-width: 26; }
.rosca__fatia { fill: none; stroke: var(--cor); stroke-width: 26; cursor: pointer; transition: stroke-width .15s, opacity .15s; }
.grafico--rosca:hover .rosca__fatia:not(.grafico-ativo) { opacity: .5; }
.rosca__fatia.grafico-ativo { stroke-width: 32; }
.rosca__titulo { fill: #9a8a82; font-size: 12px; text-anchor: middle; }
.rosca__valor { fill: var(--tinta); font: 600 21px var(--serif); text-anchor: middle; }
.rosca-bloco { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr); align-items: center; gap: 18px; }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.legenda li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 40px; align-items: center; gap: 8px; }
.legenda__cor { width: 12px; height: 12px; border-radius: 4px; background: var(--cor); }
.legenda__nome { overflow-wrap: break-word; hyphens: auto; line-height: 1.3; }
.legenda__valor { font-weight: 700; } .legenda__pct { color: var(--texto-mudo); text-align: right; }
.legenda--linha { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--texto-mudo); }
.legenda--linha li { display: flex; gap: 6px; }
.barras__nome { fill: var(--tinta); font-size: 13px; font-weight: 600; }
.barras__valor { fill: var(--tinta); font-size: 13px; font-weight: 700; text-anchor: end; }
.barras__fundo { fill: #f3ebe4; }
.grafico-dica { position: absolute; z-index: 50; max-width: 260px; padding: 7px 11px; border-radius: 10px; background: #2f2622; color: #fff; font-size: 12.5px; font-weight: 600; pointer-events: none; box-shadow: 0 8px 20px #0003; }
@media (max-width: 1000px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .painel-grade { grid-template-columns: minmax(0, 1fr); }
  .kpi__valor { font-size: 24px; }
  .rosca-bloco { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rosca-bloco .grafico { max-width: 210px; }
  .rosca-bloco .legenda { width: 100%; }
}
@media (max-width: 420px) { .kpis { gap: 10px; } .kpi { padding: 14px; } }
.rosca__titulo, .rosca__valor, .grafico__eixo, .barras__nome, .barras__valor { pointer-events: none; }
.so-celular { display: none; }
@media (max-width: 700px) { .so-celular { display: block; } }
.barras__vazio { fill: #9a8a82; font-size: 13px; text-anchor: middle; }

/* fechamento de caixa, contas a pagar e taxas */
.caixa-fechado { margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: #e5f0e8; color: #2f5a3b; line-height: 1.6; }
.caixa-fechado--diferenca { background: var(--ambar-fundo); color: #6d4a12; }
.caixa-fechado__ok { font-weight: 700; }
.fechar__esperado { margin: -4px 0 14px; padding: 10px 12px; border-radius: 10px; background: #fbefe9; }
.fechar__esperado strong { font-size: 18px; color: var(--argila-escura); }
.conta { display: grid; gap: 8px; }
.conta__pagar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.conta__pagar label { flex: 0 1 150px; margin-bottom: 0; }
.conta--vencida { background: var(--vermelho-fundo); color: var(--vermelho); }
.conta--hoje { background: var(--ambar-fundo); color: #6d4a12; }
.conta--semana { background: #fbefe9; color: var(--argila-escura); }
.conta--futura { background: #f3ebe4; color: #7a6458; }
.taxas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.taxas .ajuda { grid-column: 1 / -1; margin-top: -6px; }
@media (max-width: 760px) { .taxas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* equipe: agenda da profissional */
.servicos-pro__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 14px; margin-top: 8px; }
#agenda .expediente { margin-bottom: 14px; }
.equipe-nova { max-width: 560px; }
/* página do horário da cliente (remarcar e cancelar pelo link) */
.horario-cliente { text-align: center; }
.horario-cliente__dia { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 18px; }
.horario-cliente__dia label { flex: 1 1 200px; margin-bottom: 0; }
.horario-cliente__cancelar summary { cursor: pointer; font-weight: 600; color: var(--vermelho); }
.horario-cliente__cancelar form { margin-top: 12px; }
/* clientes que voltam (WhatsApp) e convite de retorno (Serviços) */
.voltar__texto { margin: -4px 0 14px 54px; }
.voltar__texto summary { cursor: pointer; color: var(--argila-escura); font-size: 13px; font-weight: 600; }
.voltar__texto textarea { margin-top: 8px; min-height: 90px; }
.servico-retorno .comissao__campo { margin: 6px 0; }
@media (max-width: 560px) { .voltar__texto { margin-left: 0; } }