/* ====== GlowFly — estilos próprios sobre o Pico.css ======
   Paleta da marca (sistema-glowfly.md, seção 11). A cor principal é white label: o base.html redefine --marca e as
   variações a partir da cor escolhida pelo studio (core/cores.py). Celular na vertical é a base; tablet e computador,
   o apoio. Animações curtas (até ~200 ms), só onde explicam algo, e nenhuma com "reduzir movimento" ligado. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/poppins/poppins-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/poppins/poppins-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/poppins/poppins-latin-700.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --marca: #C2347A; --marca-forte: #A72D69; --marca-claro: #FCE4EF; --marca-suave: #FDF1F6; --marca-texto-botao: #FFFFFF;
  --marca-escuro: #E06AA4; --marca-escuro-forte: #E684B3; --marca-escuro-claro: #4A2034; --marca-texto-botao-escuro: #3A2330;
  --ouro: #C9956B;
  --fonte-titulo: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --raio: 14px; --raio-pequeno: 10px; --raio-pilula: 999px;
  --altura-menu-inferior: 68px;
  --facil: cubic-bezier(.23, 1, .32, 1);        /* ease-out forte: entrada e resposta ao toque */
  --gaveta: cubic-bezier(.32, .72, 0, 1);       /* gaveta lateral */
  --toque: 48px;                                 /* alvo mínimo de toque no celular */
  --pico-font-size: 100%;
  --pico-font-family: var(--fonte-texto);
  --pico-border-radius: var(--raio-pequeno);
  --pico-spacing: 1rem;
  --pico-form-element-spacing-vertical: .7rem;
  --pico-form-element-spacing-horizontal: .9rem;
  --pico-transition: .16s var(--facil);
}

/* Tema claro */
:root:not([data-theme="dark"]), [data-theme="light"] {
  --fundo: #FFF8FB; --superficie: #FFFFFF; --superficie-2: #FDF3F7; --texto: #3A2330; --texto-suave: #7A6470;
  --linha: #F1DCE6; --linha-forte: #E6C6D5; --sombra: 0 1px 2px rgba(58, 35, 48, .05), 0 4px 16px rgba(194, 52, 122, .06);
  --cor-ok: #2F8A5B; --cor-ok-fundo: #E7F5EE; --cor-aviso: #B26A00; --cor-aviso-fundo: #FFF3E0;
  --cor-erro: #C62F45; --cor-erro-fundo: #FDECEF; --cor-info: #6A4C93; --cor-info-fundo: #F1ECF8;
  --cor-marca: var(--marca); --cor-marca-texto: var(--marca-forte);
  --pico-background-color: var(--fundo);
  --pico-color: var(--texto);
  --pico-muted-color: var(--texto-suave);
  --pico-muted-border-color: var(--linha);
  --pico-card-background-color: var(--superficie);
  --pico-card-sectioning-background-color: var(--superficie-2);
  --pico-card-box-shadow: var(--sombra);
  --pico-h1-color: var(--texto); --pico-h2-color: var(--texto); --pico-h3-color: var(--texto); --pico-h4-color: var(--texto);
  --pico-primary: var(--marca-forte);
  --pico-primary-background: var(--marca);
  --pico-primary-border: var(--marca);
  --pico-primary-underline: color-mix(in srgb, var(--marca) 45%, transparent);
  --pico-primary-hover: var(--marca);
  --pico-primary-hover-background: var(--marca-forte);
  --pico-primary-hover-border: var(--marca-forte);
  --pico-primary-focus: color-mix(in srgb, var(--marca) 16%, transparent);
  --pico-primary-inverse: var(--marca-texto-botao);
  --pico-secondary: #7A6470; --pico-secondary-background: #7A6470; --pico-secondary-border: #7A6470;
  --pico-secondary-hover-background: #634F5A; --pico-secondary-hover-border: #634F5A; --pico-secondary-inverse: #fff;
  --pico-form-element-background-color: var(--superficie);
  --pico-form-element-border-color: var(--linha-forte);
  --pico-form-element-focus-color: var(--marca);
  --pico-form-element-active-border-color: var(--marca);
  --pico-switch-checked-background-color: var(--marca);
  --pico-table-border-color: var(--linha);
  --pico-table-row-stripped-background-color: var(--marca-suave);
  --pico-dropdown-background-color: var(--superficie);
  --pico-dropdown-border-color: var(--linha);
  --pico-dropdown-hover-background-color: var(--marca-suave);
  --pico-code-background-color: var(--superficie-2);
  color-scheme: light;
}

/* Tema escuro: o rosa clareia para não sumir no fundo */
[data-theme="dark"] {
  --fundo: #1E1419; --superficie: #2A1D24; --superficie-2: #33232C; --texto: #F6E9EF; --texto-suave: #BFA9B4;
  --linha: #3F2C36; --linha-forte: #523A47; --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .3);
  --cor-ok: #6BCB97; --cor-ok-fundo: rgba(107, 203, 151, .14); --cor-aviso: #FFB84D; --cor-aviso-fundo: rgba(255, 184, 77, .14);
  --cor-erro: #FF7A8C; --cor-erro-fundo: rgba(255, 122, 140, .14); --cor-info: #C3A8EC; --cor-info-fundo: rgba(195, 168, 236, .14);
  --cor-marca: var(--marca-escuro); --cor-marca-texto: var(--marca-escuro);
  --marca-claro: var(--marca-escuro-claro); --marca-suave: color-mix(in srgb, var(--marca-escuro) 9%, var(--superficie));
  --pico-background-color: var(--fundo);
  --pico-color: var(--texto);
  --pico-muted-color: var(--texto-suave);
  --pico-muted-border-color: var(--linha);
  --pico-card-background-color: var(--superficie);
  --pico-card-sectioning-background-color: var(--superficie-2);
  --pico-card-box-shadow: var(--sombra);
  --pico-h1-color: var(--texto); --pico-h2-color: var(--texto); --pico-h3-color: var(--texto); --pico-h4-color: var(--texto);
  --pico-primary: var(--marca-escuro);
  --pico-primary-background: var(--marca-escuro);
  --pico-primary-border: var(--marca-escuro);
  --pico-primary-underline: color-mix(in srgb, var(--marca-escuro) 50%, transparent);
  --pico-primary-hover: var(--marca-escuro-forte);
  --pico-primary-hover-background: var(--marca-escuro-forte);
  --pico-primary-hover-border: var(--marca-escuro-forte);
  --pico-primary-focus: color-mix(in srgb, var(--marca-escuro) 22%, transparent);
  --pico-primary-inverse: var(--marca-texto-botao-escuro);
  --pico-secondary: #BFA9B4; --pico-secondary-background: #5A4651; --pico-secondary-border: #5A4651;
  --pico-secondary-hover-background: #6A5561; --pico-secondary-hover-border: #6A5561; --pico-secondary-inverse: #fff;
  --pico-form-element-background-color: #24181F;
  --pico-form-element-border-color: var(--linha-forte);
  --pico-form-element-focus-color: var(--marca-escuro);
  --pico-form-element-active-border-color: var(--marca-escuro);
  --pico-switch-checked-background-color: var(--marca-escuro);
  --pico-table-border-color: var(--linha);
  --pico-table-row-stripped-background-color: rgba(255, 255, 255, .025);
  --pico-dropdown-background-color: var(--superficie);
  --pico-dropdown-border-color: var(--linha);
  --pico-dropdown-hover-background-color: var(--superficie-2);
  --pico-code-background-color: var(--superficie-2);
  color-scheme: dark;
}

/* ---------- Base ---------- */
html { -webkit-tap-highlight-color: transparent; }
body { background: var(--fundo); color: var(--texto); }
body.com-menu { padding-bottom: calc(var(--altura-menu-inferior) + env(safe-area-inset-bottom) + 16px); }
main.container { padding-top: 1rem; }
h1, h2, h3, h4, .marca, .valor, legend, .pub-destaque { font-family: var(--fonte-titulo); letter-spacing: -.01em; }
h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: .75rem; }
h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: .6rem; }
h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .5rem; }
a { text-underline-offset: .18em; }
small.muted, .muted { color: var(--texto-suave); }
.nowrap { white-space: nowrap; }
.direita { text-align: right; }
.centro { text-align: center; }
.oculto { display: none !important; }
.mt { margin-top: 1rem; }
.sem-margem { margin: 0; }
small.d-block { display: block; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 2px; }

/* ---------- Botões ---------- */
button, [role="button"], input[type="submit"], input[type="button"] {
  font-family: var(--fonte-titulo); font-weight: 500; border-radius: var(--raio-pequeno);
  transition: background-color .16s var(--facil), border-color .16s var(--facil), color .16s var(--facil), transform .12s var(--facil);
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
}
button:active:not(:disabled), [role="button"]:active { transform: scale(.97); }
a[role="button"], button { white-space: nowrap; }
.btn-pequeno { padding: .3rem .7rem !important; font-size: .85rem; min-height: 0; }
button.perigo, a.perigo[role="button"] { --pico-background-color: var(--cor-erro); --pico-border-color: var(--cor-erro); --pico-color: #fff; }
a.outline.perigo[role="button"], button.outline.perigo { --pico-background-color: transparent; --pico-color: var(--cor-erro);
  --pico-border-color: var(--cor-erro); background: transparent; color: var(--cor-erro); }
a.outline.perigo[role="button"]:hover, button.outline.perigo:hover { background: var(--cor-erro-fundo); }
.btn-whatsapp, .acao-rapida.whatsapp { --pico-background-color: #1FA855; --pico-border-color: #1FA855; --pico-color: #fff; }
.voltar { display: inline-flex; align-items: center; gap: .2rem; margin-bottom: .6rem; text-decoration: none; color: var(--texto-suave); font-size: .92rem; }
.voltar:hover { color: var(--cor-marca-texto); }
@media (max-width: 1023px) {
  .acoes a[role="button"], .acoes button, .barra-salvar button, .barra-salvar a[role="button"] { min-height: var(--toque); padding: .65rem 1.1rem; }
}

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--fundo) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--linha); }
.topo .barra { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; min-height: 56px; }
.topo .marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-weight: 600; color: var(--texto); white-space: nowrap; min-width: 0; }
.topo .marca img { height: 32px; width: 32px; object-fit: contain; border-radius: 8px; }
.topo .marca span { overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.topo form.busca-global { flex: 1; min-width: 0; margin: 0; position: relative; }
.topo .barra > * { flex-shrink: 0; }
.topo .barra > form.busca-global { flex-shrink: 1; }
.topo form.busca-global .ico { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--texto-suave); pointer-events: none; }
.topo form.busca-global input { margin: 0; height: 2.6rem; padding: .3rem .9rem .3rem 2.4rem; border-radius: var(--raio-pilula);
  background: var(--superficie); border-color: var(--linha); }
.topo details.dropdown { margin: 0; }
.topo details.dropdown summary { height: 2.6rem; width: 2.6rem; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--marca-claro); color: var(--cor-marca-texto); border: 0; font-family: var(--fonte-titulo); font-weight: 600; }
.topo details.dropdown summary::after { display: none; }
.topo .abre-menu { width: 2.6rem; height: 2.6rem; margin: 0; padding: 0; background: transparent; color: var(--texto); border: 0; border-radius: 50%; }
.topo .abre-menu .ico { width: 1.5rem; height: 1.5rem; }
@media (max-width: 600px) {
  .topo form.busca-global input { padding-left: 2.3rem; font-size: 16px; } /* 16px: o iPhone não dá zoom ao tocar */
  .topo .marca span { display: none; }
}

/* ---------- Menu lateral (recolhível no computador; gaveta no celular e tablet em pé) ---------- */
:root { --lateral: 260px; --lateral-recolhida: 68px; }
.lateral { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(84vw, 300px); display: flex; flex-direction: column;
  background: var(--superficie); border-right: 1px solid var(--linha); padding-top: env(safe-area-inset-top);
  transform: translateX(-102%); transition: transform .28s var(--gaveta); overflow-y: auto; overflow-x: hidden; }
body.menu-aberto .lateral { transform: none; box-shadow: 0 0 40px rgba(58, 35, 48, .25); }
.lateral-fundo { position: fixed; inset: 0; z-index: 45; background: rgba(30, 20, 25, .4); opacity: 0; pointer-events: none;
  transition: opacity .2s var(--facil); }
body.menu-aberto .lateral-fundo { opacity: 1; pointer-events: auto; }
.lateral-topo { display: flex; align-items: center; gap: .4rem; padding: .7rem .7rem .7rem .9rem; min-height: 3.6rem; }
.lateral .marca { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 600; color: var(--texto); }
.lateral .marca img { height: 34px; width: 34px; object-fit: contain; border-radius: 9px; flex: none; }
.lateral .marca .rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral button { width: 2.2rem; height: 2.2rem; margin: 0; padding: 0; background: transparent; color: var(--texto-suave); border: 0; border-radius: 50%; }
.lateral button:hover { background: var(--marca-suave); color: var(--cor-marca-texto); }
.lateral .lateral-alterna { display: none; }
.lateral nav { display: flex; flex-direction: column; gap: .15rem; padding: .4rem .6rem 1rem; }
.lateral .item { position: relative; display: flex; align-items: center; gap: .85rem; padding: .7rem .8rem; border-radius: 12px;
  text-decoration: none; color: var(--texto); white-space: nowrap; transition: background-color .15s var(--facil), color .15s var(--facil); }
.lateral .item:hover { background: var(--marca-suave); }
.lateral .item.ativo { background: var(--marca-claro); color: var(--cor-marca-texto); font-weight: 600; }
.lateral .item .ico { width: 1.35rem; height: 1.35rem; }
.lateral .grupo { margin: 1rem .8rem .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.lateral .seta-expandir { display: none; }
.lateral .assinatura-glowfly { margin-top: auto; padding: .9rem 1rem 1.1rem; display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; color: var(--texto-suave); }
.lateral .assinatura-glowfly img { height: 18px; width: auto; }

@media (min-width: 1024px) {
  body.com-menu { padding-bottom: 1rem; padding-left: var(--lateral); transition: padding-left .2s var(--facil); }
  html.menu-recolhido body.com-menu { padding-left: var(--lateral-recolhida); }
  .lateral { width: var(--lateral); transform: none; transition: width .2s var(--facil); box-shadow: none !important; }
  html.menu-recolhido .lateral { width: var(--lateral-recolhida); }
  .lateral-fundo { display: none; }
  .lateral .lateral-fechar, .topo .abre-menu, .topo .marca { display: none; }
  .lateral .lateral-alterna { display: grid; place-items: center; flex: none; }
  .menu-inferior { display: none !important; }
  body main.container, body .topo .container { max-width: 1280px; margin-inline: 0; padding-inline: 1.5rem; }
  html.menu-recolhido .lateral .rotulo, html.menu-recolhido .lateral .assinatura-glowfly span { display: none; }
  html.menu-recolhido .lateral .grupo { height: 1px; margin: .6rem .8rem; background: var(--linha); font-size: 0; }
  html.menu-recolhido .lateral-topo { flex-direction: column; padding: .6rem .3rem; gap: .4rem; }
  html.menu-recolhido .lateral .marca { flex: none; justify-content: center; }
  html.menu-recolhido .lateral .item { justify-content: center; padding-inline: 0; gap: 0; }
  html.menu-recolhido .lateral .seta-recolher { display: none; }
  html.menu-recolhido .lateral .seta-expandir { display: inline; }
}
@media (max-width: 1023px) { .lateral .lateral-fechar { display: grid; place-items: center; } }

/* ---------- Menu inferior (celular e tablet) ---------- */
.menu-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
  height: calc(var(--altura-menu-inferior) + env(safe-area-inset-bottom)); padding: 6px 4px env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--linha); }
.menu-inferior a, .menu-inferior button { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-width: 0; text-decoration: none; font-size: .7rem; font-weight: 500; color: var(--texto-suave);
  background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; width: auto; font-family: var(--fonte-titulo); }
.menu-inferior .ico { width: 1.45rem; height: 1.45rem; padding: 3px 14px; box-sizing: content-box; border-radius: var(--raio-pilula);
  transition: background-color .18s var(--facil), color .18s var(--facil); }
.menu-inferior a.ativo { color: var(--cor-marca-texto); font-weight: 600; }
.menu-inferior a.ativo .ico { background: var(--marca-claro); }

/* ---------- Mensagens ---------- */
.mensagens { display: grid; gap: .5rem; margin-bottom: 1rem; }
.msg { padding: .8rem 1rem; border-radius: var(--raio-pequeno); border-left: 4px solid var(--linha-forte); background: var(--superficie);
  box-shadow: var(--sombra); animation: aparecer .22s var(--facil); }
.msg.sucesso { border-color: var(--cor-ok); }
.msg.erro { border-color: var(--cor-erro); }
.msg.aviso { border-color: var(--cor-aviso); }
.msg.info { border-color: var(--cor-info); }
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Cabeçalho de página ---------- */
.cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.cabecalho h1 { margin: 0; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.acoes > *, .acoes form button { margin: 0; width: auto; }
.acoes form { margin: 0; }
.acoes > button, .acoes > button[type=submit], button.btn-pequeno, .acoes form > button { width: auto; }

/* ---------- Cartões / grade ---------- */
.grade { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }
.grade-2 { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
.grade-3 { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
.grade-4 { display: grid; gap: 0 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) {
  .grade { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
  .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
article { margin-bottom: 1rem; padding: 1rem 1.1rem; border-radius: var(--raio); border: 1px solid var(--linha); box-shadow: var(--sombra); }
article > header { padding: .7rem 1.1rem; margin: -1rem -1.1rem 1rem; border-radius: var(--raio) var(--raio) 0 0;
  background: var(--superficie-2); border-bottom: 1px solid var(--linha); }
article > header strong { font-family: var(--fonte-titulo); font-weight: 600; }
.cartao-resumo { margin: 0; padding: .9rem 1rem; }
.cartao-resumo .rotulo { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.cartao-resumo .valor { font-size: 1.3rem; font-weight: 600; margin: .15rem 0; }
.cartao-resumo.alerta { box-shadow: inset 4px 0 0 var(--cor-aviso), var(--sombra); }
.cartao-resumo.perigo { box-shadow: inset 4px 0 0 var(--cor-erro), var(--sombra); }
.cartao-resumo.ok { box-shadow: inset 4px 0 0 var(--cor-ok), var(--sombra); }
.atalhos { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 1.25rem; }
.atalhos a[role="button"] { padding: 1rem; font-size: 1rem; min-height: 56px; }
.destaque-whatsapp { box-shadow: inset 4px 0 0 #1FA855, var(--sombra); }
.destaque-alerta { box-shadow: inset 4px 0 0 var(--cor-aviso), var(--sombra); }

/* ---------- Etiquetas de status ---------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: var(--raio-pilula); font-size: .76rem;
  font-weight: 600; white-space: nowrap; background: var(--superficie-2); color: var(--texto-suave); text-decoration: none; }
.badge .ico { width: 1em; height: 1em; }
.badge.aberta, .badge.aprovado, .badge.ag-agendado { background: var(--cor-info-fundo); color: var(--cor-info); }
.badge.orcamento, .badge.online { background: var(--marca-claro); color: var(--cor-marca-texto); }
.badge.em_andamento, .badge.aviso, .badge.ag-nao_compareceu { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.badge.pronta, .badge.concluido, .badge.ag-confirmado { background: var(--cor-ok-fundo); color: var(--cor-ok); }
.badge.entregue, .badge.recusado, .badge.inativo, .badge.ag-atendido { background: var(--superficie-2); color: var(--texto-suave); }
.badge.cancelada, .badge.cancelado, .badge.ag-cancelado { background: var(--cor-erro-fundo); color: var(--cor-erro); text-decoration: line-through; }
.badge.atrasada { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.saldo-devedor { color: var(--cor-erro); font-weight: 700; }
.saldo-ok { color: var(--cor-ok); font-weight: 700; }
.atraso { color: var(--cor-erro); }

/* ---------- Tabelas ---------- */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { margin-bottom: .5rem; }
table td, table th { padding: .6rem .55rem; }
th { font-size: .8rem; font-weight: 600; color: var(--texto-suave); }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--marca-suave); }
/* Lista em cartões no celular */
@media (max-width: 700px) {
  table.responsiva thead { display: none; }
  table.responsiva, table.responsiva tbody, table.responsiva tr, table.responsiva td { display: block; width: 100%; }
  table.responsiva tr { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-pequeno);
    margin-bottom: .6rem; padding: .45rem .75rem; box-shadow: var(--sombra); }
  table.responsiva.striped tbody tr:nth-child(odd) td { background: transparent; }
  table.responsiva td { border: none; padding: .25rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  table.responsiva td::before { content: attr(data-label); font-weight: 600; color: var(--texto-suave); text-align: left; font-size: .85rem; }
  table.responsiva td[data-label=""]::before { content: none; }
  /* célula de ações (botões e formulários): quebra de linha em vez de empurrar o cartão para fora da tela */
  table.responsiva td[data-label=""] { flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; text-align: left; gap: .5rem 1rem; }
  table.responsiva td[data-label=""] > * { min-width: 0; max-width: 100%; }
}

/* ---------- Formulários ---------- */
input:not([type=checkbox], [type=radio], [type=range], [type=color]), select, textarea { border-radius: var(--raio-pequeno); }
@media (max-width: 1023px) { input, select, textarea { font-size: 16px; } } /* o iPhone não dá zoom ao tocar */
input[type=color] { height: 2.8rem; padding: .25rem; width: 5rem; border-radius: var(--raio-pequeno); }
form .erros-form { color: var(--cor-erro); }
label .obrigatorio { color: var(--cor-erro); }
.campo-erro { color: var(--cor-erro); display: block; margin-top: -.6rem; margin-bottom: .6rem; font-size: .85rem; }
fieldset.grupo { min-width: 0; min-inline-size: 0; border: 1px solid var(--linha); border-radius: var(--raio); padding: .9rem 1rem .1rem;
  margin-bottom: 1rem; background: var(--superficie); }
fieldset.grupo legend { padding: 0 .4rem; font-weight: 600; }
.cep-status { display: block; margin-top: -.6rem; margin-bottom: .6rem; font-size: .85rem; min-height: 1em; }
.cep-status .ok { color: var(--cor-ok); }
.cep-status .erro { color: var(--cor-aviso); }
.barra-salvar { position: sticky; bottom: calc(var(--altura-menu-inferior) + env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: .5rem;
  flex-wrap: wrap; padding: .75rem 0; background: color-mix(in srgb, var(--fundo) 92%, transparent); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--linha); }
.barra-salvar > * { margin: 0; width: auto; flex: 1 1 0; min-width: 0; }
.barra-salvar > .outline, .barra-salvar > .secondary { flex: .55 1 0; }
@media (max-width: 1023px) { .barra-salvar { flex-wrap: nowrap; } }
@media (min-width: 1024px) { .barra-salvar { bottom: 0; } .barra-salvar > * { flex: 0 0 auto; } }
.form-inline { display: grid; gap: 0 .6rem; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 700px) {
  .form-item { grid-template-columns: 2fr 2fr .7fr 1fr auto; }
  .form-pagamento { grid-template-columns: 1fr 1fr 1.2fr .7fr auto; }
  .form-desconto { grid-template-columns: 1fr 1fr auto; max-width: 480px; }
}
.form-inline button { margin-bottom: var(--pico-spacing); }
.form-acao-linha { display: inline; margin: 0; }
.grupo-opcoes.linha { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; border: 0; padding: 0; }
.grupo-opcoes.linha legend { width: 100%; }
.grupo-opcoes label { display: block; }
.grupo-opcoes.linha label { display: inline-flex; align-items: center; gap: .35rem; }
.amostra-cor { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; vertical-align: middle; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.campo-cor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.amostras-cor { display: flex; gap: .5rem; margin-bottom: var(--pico-spacing); }
.amostras-cor span { padding: .55rem 1rem; border-radius: var(--raio-pequeno); font-family: var(--fonte-titulo); font-size: .85rem; font-weight: 500; }
.amostras-cor .amostra-botao { background: var(--amostra, var(--marca)); color: #fff; }
.amostras-cor .amostra-fundo { background: color-mix(in srgb, var(--amostra, var(--marca)) 14%, #fff); color: color-mix(in srgb, var(--amostra, var(--marca)) 80%, #000); }

/* Controle segmentado (filtros curtos) */
.segmentado { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--raio-pilula); background: var(--superficie-2); border: 1px solid var(--linha);
  max-width: 100%; overflow-x: auto; }
.segmentado a, .segmentado button { padding: .4rem .9rem; border-radius: var(--raio-pilula); text-decoration: none; color: var(--texto-suave);
  font-size: .88rem; font-weight: 500; white-space: nowrap; background: transparent; border: 0; margin: 0; width: auto; }
.segmentado .ativo { background: var(--superficie); color: var(--cor-marca-texto); box-shadow: 0 1px 3px rgba(58, 35, 48, .12); }

/* ---------- Autocomplete ---------- */
.autocomplete { position: relative; }
.autocomplete-lista { position: absolute; left: 0; right: 0; top: calc(100% - var(--pico-spacing)); z-index: 15; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio-pequeno); box-shadow: var(--sombra); max-height: 260px; overflow-y: auto; }
.autocomplete-lista:empty { display: none; }
.autocomplete-lista button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--texto); padding: .7rem .9rem;
  border-radius: 0; margin: 0; font-family: var(--fonte-texto); font-weight: 400; }
.autocomplete-lista button:hover { background: var(--marca-suave); }
.selecionado { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--pico-spacing); }

/* ---------- Abas ---------- */
.abas { display: flex; gap: .25rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: none; border-bottom: 1px solid var(--linha); margin-bottom: 1rem; }
.abas::-webkit-scrollbar { display: none; }
.abas button { flex: none; background: none; border: none; color: var(--texto-suave); border-bottom: 2px solid transparent; border-radius: 0;
  margin: 0 0 -1px; padding: .7rem .9rem; min-height: var(--toque); }
/* Abas que cabem na tela (ficha da cliente: 5 abas): ficam fixas, sem arrastar para os lados */
@media (max-width: 767px) {
  .abas.fixas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; overflow: hidden; -webkit-mask-image: none; mask-image: none; touch-action: pan-y; }
  .abas.fixas button { padding: .65rem .1rem; font-size: .76rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; min-width: 0; }
}
@media (max-width: 600px) {
  .abas:not(.fixas) button { padding-inline: .65rem; font-size: .92rem; }
  /* esmaece a ponta direita: avisa que há mais abas para rolar */
  .abas:not(.fixas) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
}
.abas button.ativa { color: var(--cor-marca-texto); border-bottom-color: var(--cor-marca); font-weight: 600; }
.painel-aba { display: none; }
.painel-aba.ativa { display: block; animation: aparecer .2s var(--facil); }
@media (min-width: 1024px) {
  .abas.so-mobile { display: none; }
  .paineis-desktop .painel-aba { display: block; margin-bottom: 1.5rem; animation: none; }
}
.painel-aba > h2.titulo-desktop { display: none; }
@media (min-width: 1024px) { .paineis-desktop .painel-aba > h2.titulo-desktop { display: block; } }

/* ---------- Ficha da cliente ---------- */
.ficha-topo { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.ficha-identidade { min-width: 0; }
.ficha-identidade h1 { margin: 0 0 .15rem; font-size: 1.35rem; }
.ficha-identidade .badge { margin-top: .4rem; }
.foto-cliente { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--marca-claro), color-mix(in srgb, var(--marca) 30%, var(--marca-claro)));
  color: var(--cor-marca-texto); font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.6rem; }
.foto-cliente img { width: 100%; height: 100%; object-fit: cover; }
.foto-cliente.grande { width: 120px; height: 120px; font-size: 3rem; }
.cadastro-com-foto { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.foto-cliente-campo { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.foto-cliente-campo label[role="button"] { margin: 0; width: 100%; max-width: 160px; }
@media (min-width: 700px) { .cadastro-com-foto { grid-template-columns: 170px 1fr; } }
.cabecalho-cliente { display: flex; gap: .9rem; align-items: center; }
.acoes-rapidas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1rem; }
.acao-rapida { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 72px; padding: .6rem .3rem;
  border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra);
  text-decoration: none; color: var(--texto); font-size: .78rem; font-weight: 500; font-family: var(--fonte-titulo); text-align: center;
  transition: transform .12s var(--facil), background-color .15s var(--facil); }
.acao-rapida .ico { width: 1.5rem; height: 1.5rem; color: var(--cor-marca-texto); }
.acao-rapida:active { transform: scale(.97); }
.acao-rapida.whatsapp { background: #1FA855; border-color: #1FA855; color: #fff; }
.acao-rapida.whatsapp .ico { color: #fff; }
.dados-cliente { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0 0 1rem; }
.dados-cliente dt { color: var(--texto-suave); font-size: .88rem; }
.dados-cliente dd { margin: 0; }
.linha-agendamento { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .7rem .9rem; margin-bottom: .5rem; }

/* ---------- Início ---------- */
.saudacao { margin-bottom: 1rem; }
.saudacao h1 { margin: 0; }
.saudacao .muted { text-transform: lowercase; }
.saudacao .muted::first-letter { text-transform: uppercase; }
a.sem-sublinhado { text-decoration: none; color: inherit; }
article.hoje header .btn-pequeno { text-decoration: none; display: inline-flex; align-items: center; gap: .2rem; font-size: .85rem; }
article.hoje .badge { margin: 0 .25rem .3rem 0; }
.ag-item.proximo { border-color: var(--cor-marca); box-shadow: inset 4px 0 0 var(--cor-marca), var(--sombra); }

/* ---------- Configurações ---------- */
.subnav { display: flex; gap: .4rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 1rem; padding-bottom: 2px; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: .45rem .9rem; border-radius: var(--raio-pilula); border: 1px solid var(--linha); text-decoration: none;
  color: var(--texto); background: var(--superficie); font-size: .9rem; }
.subnav a.ativo { background: var(--cor-marca); color: var(--pico-primary-inverse); border-color: var(--cor-marca); }

/* ---------- Totais da comanda ---------- */
.totais { margin-left: auto; max-width: 360px; }
.totais div { display: flex; justify-content: space-between; padding: .25rem 0; }
.totais .total { font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 600; border-top: 1px solid var(--linha); padding-top: .45rem; }
.auditoria { font-size: .8rem; color: var(--texto-suave); margin-top: 1.5rem; }
.linha-tempo { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.linha-tempo li { padding: .35rem 0; border-bottom: 1px dashed var(--linha); list-style: none; }
.progresso-comanda { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; white-space: nowrap; }
.progresso-comanda progress { width: 110px; margin: 0; }
tr.item-executado td { color: var(--texto-suave); }

/* ---------- Entrada (login) ---------- */
.pagina-login { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem;
  background: radial-gradient(120% 60% at 50% 0%, var(--marca-claro) 0%, transparent 70%), var(--fundo); }
.pagina-login article { width: 100%; max-width: 400px; padding: 1.6rem 1.4rem; }
.pagina-login .logo-login { text-align: center; margin-bottom: 1.2rem; }
.pagina-login .logo-login img { max-height: 72px; max-width: 100%; }
.pagina-login .logo-login h1 { font-size: 1.25rem; margin: .6rem 0 0; }
.pagina-login button[type=submit] { width: 100%; min-height: var(--toque); }
.pagina-login .feito-com { text-align: center; font-size: .78rem; color: var(--texto-suave); margin-top: 1rem; }

/* ---------- Paginação ---------- */
.paginacao { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1rem; }

/* ---------- Agenda ---------- */
.nav-dia { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.nav-dia > * { margin: 0 !important; width: auto; }
.nav-dia input[type=date] { margin: 0; width: auto; }
.nav-dia select { margin: 0; width: auto; min-width: 12rem; }
.agenda-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .agenda-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.resumo-dia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.resumo-dia .rotulo { letter-spacing: 0; font-size: .68rem; overflow-wrap: normal; }
.resumo-dia article { padding: .6rem .6rem; }
.resumo-dia .valor { font-size: 1.15rem; }
.ag-livre { text-decoration: none; color: var(--cor-ok); font-weight: 600; }
.ag-item { display: flex; gap: .8rem; padding: .7rem .9rem; margin-bottom: .5rem; border-radius: var(--raio-pequeno); text-decoration: none;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.ag-item .ag-hora { font-family: var(--fonte-titulo); font-weight: 600; min-width: 3.2rem; }
.lista-lembretes { list-style: none; padding: 0; margin: 0; }
.lista-lembretes li { list-style: none; padding: .5rem 0; border-bottom: 1px dashed var(--linha); }
.lista-lembretes li button { margin-top: .3rem; }
.faixa-agendamento { background: var(--marca-suave); border: 1px solid var(--marca-claro); box-shadow: inset 4px 0 0 var(--cor-marca);
  padding: .85rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; }
.qr-bloco { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.qr-bloco img { border: 1px solid var(--linha); border-radius: var(--raio-pequeno); background: #fff; }
table.grade-semanal input { margin: 0; padding: .35rem; min-width: 6.5rem; }
table.grade-semanal input[type=checkbox] { min-width: 0; }
details.grupo { border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem 1rem; margin-bottom: 1rem; background: var(--superficie); }
.bolinha-cor { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: -1px; }

/* Grade da agenda (seção 7): uma coluna por profissional, posicionada em minutos (--min = altura de 1 minuto) */
.agenda-grade-caixa { overflow: auto; max-height: 75vh; margin-bottom: 1rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.agenda-grade { display: grid; grid-template-columns: 56px repeat(var(--colunas, 1), minmax(170px, 1fr)); min-width: min-content; }
.agenda-cab { position: sticky; top: 0; z-index: 4; background: var(--superficie-2); padding: .5rem .6rem; font-size: .9rem; font-family: var(--fonte-titulo);
  font-weight: 600; min-height: 3.1rem; border-bottom: 1px solid var(--linha); }
.agenda-cab small { display: block; font-weight: 400; color: var(--texto-suave); font-family: var(--fonte-texto); }
.agenda-eixo { position: sticky; left: 0; z-index: 5; background: var(--superficie-2); }
.agenda-eixo .agenda-cab { z-index: 6; }
.agenda-corpo { position: relative; }
.agenda-col + .agenda-col .agenda-corpo, .agenda-col + .agenda-col .agenda-cab { border-left: 1px solid var(--linha); }
.agenda-hora { position: absolute; right: 8px; transform: translateY(-50%); font-size: .75rem; color: var(--texto-suave); }
.agenda-eixo .agenda-hora:first-child { transform: none; }
.agenda-linha { position: absolute; left: 0; right: 0; border-top: 1px solid var(--linha); pointer-events: none; }
.faixa { position: absolute; left: 0; right: 0; font-size: .74rem; color: var(--texto-suave); padding: 2px 6px; overflow: hidden; }
.faixa.livre { padding: 0; cursor: pointer; transition: background .12s var(--facil); }
.faixa.livre:hover, .faixa.livre:focus-visible { background: var(--marca-suave); }
.faixa.passado { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(128, 128, 128, .06) 6px 12px); }
.faixa.fechado, .faixa.intervalo, .faixa.bloqueado, .faixa.feriado { background: var(--superficie-2); }
.ag-bloco { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 3px 7px; border-radius: 8px; text-decoration: none;
  overflow: visible; background: color-mix(in srgb, var(--cor) 18%, var(--superficie)); box-shadow: inset 4px 0 0 var(--cor); color: var(--texto);
  font-size: .8rem; line-height: 1.2; transition: box-shadow .12s var(--facil); }
.ag-bloco:hover { box-shadow: inset 4px 0 0 var(--cor), 0 2px 8px rgba(0, 0, 0, .15); z-index: 3; }
.ag-bloco small { color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-bloco strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ag-bloco.st-confirmado { box-shadow: inset 4px 0 0 var(--cor), inset 0 0 0 1px var(--cor-ok); }
.ag-bloco.st-aguardando_sinal { border: 1px dashed var(--cor-aviso); }
.ag-bloco.st-atendido { opacity: .65; }
.ag-bloco.st-nao_compareceu { opacity: .55; text-decoration: line-through; }
.ag-alerta { position: absolute; top: 3px; right: 4px; color: var(--cor-aviso); }
.ag-preparo { position: absolute; left: 0; right: 0; top: 100%; border-radius: 0 0 6px 6px; pointer-events: none;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cor) 28%, transparent) 0 4px, transparent 4px 8px); }
.agenda-mobile { display: none; }
@media (max-width: 767px) {
  .agenda-grade-caixa { display: none; }
  .agenda-mobile { display: block; }
}
.badge.ag-aguardando_sinal { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }

@media (max-width: 600px) {
  .acoes-agenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .acoes-agenda a[role="button"] { width: 100%; padding-inline: .5rem; font-size: .92rem; }
  .acoes-agenda a:first-child { grid-column: 1 / -1; }
}

/* Serviços do agendamento (balcão) e lista de espera */
.servicos-escolha { border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem 1rem; margin-bottom: 1rem; background: var(--superficie); }
.servicos-modulo { margin: .6rem 0 .2rem; font-weight: 600; font-family: var(--fonte-titulo); }
.servicos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .25rem .75rem; }
.servico-opcao { display: flex; gap: .5rem; align-items: center; margin: 0; padding: .35rem 0; }
.servico-opcao input { margin: 0; }
.servico-opcao input:disabled + span { opacity: .45; }
.item-espera { margin-bottom: .75rem; }

/* ---------- Seletor de tema ---------- */
.seletor-tema { display: flex; gap: .25rem; }
.seletor-tema button { flex: 1; margin: 0; padding: .4rem .5rem; font-size: .82rem; width: auto; background: transparent; color: var(--texto);
  border: 1px solid var(--linha); }
.seletor-tema button.ativo { background: var(--cor-marca); border-color: var(--cor-marca); color: var(--pico-primary-inverse); }
.topo details.dropdown ul li .seletor-tema { min-width: 15rem; }
.botao-tema { background: transparent; border: 1px solid var(--linha); color: inherit; width: auto; margin: 0; padding: .35rem .55rem;
  line-height: 1.2; border-radius: var(--raio-pilula); }
.tema-flutuante { position: fixed; top: calc(.6rem + env(safe-area-inset-top)); right: .6rem; z-index: 40; }

/* ---------- Faixas de aviso ---------- */
.faixa-alertas { background: var(--cor-erro-fundo); box-shadow: inset 4px 0 0 var(--cor-erro); color: var(--texto); padding: .7rem 1rem;
  border-radius: var(--raio-pequeno); margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: center; }
.faixa-alertas.discreta { background: var(--cor-aviso-fundo); box-shadow: inset 4px 0 0 var(--cor-aviso); }
.faixa-alertas .ico { color: var(--cor-erro); }
.faixa-alertas.discreta .ico { color: var(--cor-aviso); }

/* ---------- Bolinha de notificação (alertas do menu) ---------- */
.bolinha { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: var(--raio-pilula); background: var(--cor-erro); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--superficie); vertical-align: middle; font-family: var(--fonte-texto); }
.bolinha:empty { min-width: .65rem; width: .65rem; height: .65rem; padding: 0; }
.lateral .item .bolinha { margin-left: auto; }
.subnav a .bolinha { margin-left: .4rem; }
.menu-inferior .bolinha { position: absolute; top: 4px; left: calc(50% + .6rem); }
.topo .abre-menu { position: relative; }
.topo .abre-menu .bolinha { position: absolute; top: .1rem; right: .1rem; }
@media (min-width: 1024px) {
  html.menu-recolhido .lateral .item .bolinha { position: absolute; top: .35rem; right: .6rem; margin: 0; min-width: .65rem; width: .65rem;
    height: .65rem; padding: 0; font-size: 0; }
}

/* Aviso de sessão prestes a terminar por inatividade (js/inatividade.js) */
.aviso-inatividade { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1000;
  max-width: min(92vw, 520px); padding: 1rem 1.1rem; border-radius: var(--raio); background: var(--superficie);
  box-shadow: inset 4px 0 0 var(--cor-aviso), 0 10px 32px rgba(30, 20, 25, .28); }
.aviso-inatividade button { margin: .6rem 0 0; }

/* ---- Ajuda ---- */
.cartao-ajuda { border: 1px solid var(--linha); border-radius: var(--raio); padding: .9rem 1rem; margin-bottom: .7rem; background: var(--superficie); }
.cartao-ajuda.resposta-do-suporte { box-shadow: inset 4px 0 0 var(--cor-marca); }
.artigo-ajuda h2 { font-size: 1.12rem; margin-top: 1.4rem; }
.artigo-ajuda ol, .artigo-ajuda ul { padding-left: 1.3rem; }
.artigo-ajuda li { margin-bottom: .35rem; }
.artigo-ajuda .dica { background: var(--marca-suave); box-shadow: inset 4px 0 0 var(--cor-marca); border-radius: var(--raio-pequeno); padding: .7rem .9rem; margin: .8rem 0; }

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Catálogo ---------- */
.filtro-catalogo { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin: .8rem 0; }
.filtro-catalogo input, .filtro-catalogo select { margin: 0; }
.grupo-catalogo { margin: 1.1rem 0 .4rem; font-size: .95rem; }
.item-catalogo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem .95rem; margin-bottom: .45rem;
  border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra); text-decoration: none; color: var(--texto);
  min-height: var(--toque); transition: background-color .15s var(--facil), transform .12s var(--facil); }
.item-catalogo:hover { background: var(--marca-suave); }
.item-catalogo:active { transform: scale(.985); }
.item-catalogo.inativo { opacity: .6; }
.item-catalogo-nome { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.item-catalogo-preco { text-align: right; white-space: nowrap; font-family: var(--fonte-titulo); font-weight: 600; flex: none; }
.checks-modulos { display: grid; gap: .1rem; margin-bottom: .6rem; }

/* ---------- Cliente: cadastro rápido, ficha e lista ---------- */
.form-cliente .essencial { margin-bottom: .5rem; }
.aviso-repetida:empty { display: none; }
.aviso-whatsapp { display: flex; gap: .5rem; align-items: flex-start; margin: -.4rem 0 1rem; padding: .6rem .8rem; border-radius: var(--raio-pequeno);
  background: var(--cor-aviso-fundo); box-shadow: inset 4px 0 0 var(--cor-aviso); font-size: .9rem; animation: aparecer .2s var(--facil); }
.aviso-whatsapp .ico { color: var(--cor-aviso); margin-top: .1rem; }
details.mais-dados { margin-bottom: 1rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: 0 1rem; }
details.mais-dados > summary { padding: .9rem 0; min-height: var(--toque); font-family: var(--fonte-titulo); font-weight: 600; cursor: pointer; list-style: none; }
details.mais-dados > summary::-webkit-details-marker { display: none; }
details.mais-dados > summary::after { content: ""; float: right; width: .55rem; height: .55rem; margin-top: .45rem; border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave); transform: rotate(45deg); transition: transform .18s var(--facil); }
details.mais-dados[open] > summary::after { transform: rotate(-135deg); margin-top: .7rem; }
details.mais-dados[open] { padding-bottom: .4rem; }
.grupo-aniversario { border: 0; padding: 0; margin: 0 0 var(--pico-spacing); }
.grupo-aniversario legend { font-size: .9rem; margin-bottom: .3rem; }
.aniversario-campos { display: grid; grid-template-columns: 5rem 1fr 6.5rem; gap: .5rem; }
.aniversario-campos input, .aniversario-campos select { margin: 0; }
.foto-cliente.pequena { width: 44px; height: 44px; font-size: 1.1rem; }
.faixa-preferencias { display: flex; flex-direction: column; gap: .15rem; margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--raio);
  background: var(--cor-aviso-fundo); box-shadow: inset 4px 0 0 var(--cor-aviso); }
.faixa-preferencias-titulo { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--fonte-titulo); font-weight: 600; font-size: .85rem; color: var(--cor-aviso); }
.lista-clientes { display: grid; gap: .45rem; margin-top: .6rem; }
.item-cliente { display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha);
  box-shadow: var(--sombra); text-decoration: none; color: var(--texto); min-height: var(--toque); transition: background-color .15s var(--facil), transform .12s var(--facil); }
.item-cliente:hover { background: var(--marca-suave); }
.item-cliente:active { transform: scale(.985); }
.item-cliente.inativa { opacity: .6; }
.item-cliente-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: .05rem; }
.item-cliente-cuidado { display: flex; align-items: center; gap: .25rem; color: var(--cor-aviso); }
.item-cliente-acao { color: var(--cor-marca-texto); font-family: var(--fonte-titulo); font-weight: 500; font-size: .85rem; white-space: nowrap; flex: none; }