/* Identidade visual da Proposta Comercial levada pra dentro do sistema (2026-09-25): fonte Inter
   (arquivo próprio em /fonts, só o subconjunto latino — já cobre todos os acentos do português),
   azul-noite #000e34 no menu e o degradê ciano → azul → roxo da marca nos destaques. */
@font-face {
  font-family: "Inter"; src: url(/fonts/inter-latin.woff2) format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  --bg: #f4f6fb;
  --sidebar-bg: #000e34;
  --sidebar-bg-2: #06205a;
  --sidebar-text: #93a3c8;
  --sidebar-text-active: #ffffff;
  --sidebar-active: linear-gradient(90deg, rgba(18, 181, 165, 0.26), rgba(31, 107, 255, 0.10));
  --brand-gradient: linear-gradient(90deg, #00c2ff, #12b5a5 50%, #1f6bff);
  --btn-gradient: linear-gradient(90deg, #0a4fa8, #0b7fa0 55%, #0e9a96);
  --accent: #0b7a9c;
  --accent-hover: #09647f;
  --accent-light: #e6f5f8;
  --accent-ring: rgba(11, 122, 156, 0.16);
  --card-bg: #ffffff;
  --border: #e6e9f2;
  --border-strong: #d7dceb;
  --text: #0f1a2e;
  --text-muted: #667085;
  --text-faint: #98a2b3;
  --green: #059669;
  --green-bg: #e7f8f1;
  --red: #dc2626;
  --red-bg: #fdecec;
  --orange: #d97706;
  --orange-bg: #fef3e2;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 1px 2px rgba(12, 21, 65, 0.04), 0 6px 18px rgba(40, 70, 160, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; overflow: hidden; }
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01"; /* variantes mais limpas da Inter (a, 1, l) */
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
::selection { background: var(--accent-ring); }

.icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icon svg { width: 100%; height: 100%; }

.layout { display: flex; height: 100vh; height: 100dvh; position: relative; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 252px;
  background:
    linear-gradient(180deg, #00a8ff, #12b5a5 55%, #1d6bff) left top / 4px 100% no-repeat,
    radial-gradient(420px 260px at 0% 0%, rgba(31, 107, 255, 0.22), transparent 70%),
    linear-gradient(185deg, var(--sidebar-bg-2), var(--sidebar-bg) 45%);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.18s ease;
}
.layout.sidebar-oculta .sidebar { width: 0; }

.sidebar-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer;
}
.sidebar-toggle-btn:hover { background: var(--bg); color: var(--text); }
.sidebar-toggle-btn svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 40; box-shadow: var(--shadow-md);
    width: 252px; margin-left: 0; transition: transform 0.18s ease;
  }
  .layout.sidebar-oculta .sidebar { transform: translateX(-100%); }
  .layout:not(.sidebar-oculta) .sidebar-overlay { display: block; }
  .main { width: 100%; }
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.35); z-index: 30;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s;
}
.brand:hover { background: rgba(255, 255, 255, 0.03); }
.brand-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: #fff;
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 4px 14px rgba(0, 140, 255, 0.30);
}
.brand-logo .icon { width: 20px; height: 20px; }
.brand-name { color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: -0.02em; }
.brand-sub { color: var(--sidebar-text); font-size: 11.5px; margin-top: 1px; }

.modo-toggle {
  display: flex; gap: 4px; margin: 14px 16px 4px; padding: 3px;
  background: rgba(255, 255, 255, 0.05); border-radius: 999px;
}
.modo-toggle button {
  flex: 1; border: none; background: none; cursor: pointer;
  padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--sidebar-text); transition: background 0.12s, color 0.12s;
}
.modo-toggle button.active { background: var(--btn-gradient); color: #fff; }
.modo-toggle button:not(.active):hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.sidebar nav { display: flex; flex-direction: column; padding: 14px 12px; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 9px; font-size: 13.6px; font-weight: 500;
  color: var(--sidebar-text);
  position: relative;
  transition: background 0.12s, color 0.12s;
}
.sidebar nav a .icon { opacity: 0.85; transition: opacity 0.12s; }
.sidebar nav a:hover { background: rgba(255, 255, 255, 0.05); color: #e2e8f0; }
.sidebar nav a:hover .icon { opacity: 1; }
.sidebar nav a.active { background: var(--sidebar-active); color: var(--sidebar-text-active); font-weight: 600; }

.sidebar-suporte-link {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  margin-left: 12px; margin-right: 12px;
  padding: 14px 12px 10px; border-radius: 9px; font-size: 13.6px; font-weight: 500;
  color: var(--sidebar-text);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.12s, color 0.12s;
}
.sidebar-suporte-link .icon { opacity: 0.85; transition: opacity 0.12s; }
.sidebar-suporte-link:hover { background: rgba(255, 255, 255, 0.05); color: #e2e8f0; }
.sidebar-suporte-link:hover .icon { opacity: 1; }
.sidebar-suporte-link.active { background: var(--sidebar-active); color: var(--sidebar-text-active); font-weight: 600; }

.sidebar-usuario { padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sidebar-usuario-nome { font-size: 12.5px; color: var(--sidebar-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-sair { font-size: 12.5px; font-weight: 600; color: var(--sidebar-text); flex-shrink: 0; }
.sidebar-sair:hover { color: #fff; text-decoration: underline; }

/* Tela de login com a identidade da capa da Proposta Comercial (2026-09-25, a pedido do usuário:
   "algo mais marcante, como a proposta"). Mesma paleta (#000e34 + gradiente ciano → azul → roxo),
   a faixa vertical à esquerda, a foto dos óculos à direita e o slogan em 3 cores. O formulário
   fica num card branco flutuando sobre a foto. As 4 telas que usam .login-screen (login, esqueci
   senha, redefinir senha, bloqueio) dividem o mesmo visual. No mobile sobra o fundo azul-noite
   com a faixa e o card (o logo escuro dentro do card volta a aparecer, ver .login-brand). */
/* A própria tela rola (height 100% + overflow-y auto): html e body têm overflow hidden, então um card
   mais alto que a tela (o aceite do contrato no celular) ficava cortado sem jeito de chegar no botão.
   O fundo fica fixo atrás enquanto o card rola. */
.login-screen {
  height: 100%; display: flex; align-items: stretch; justify-content: center;
  position: relative; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #000e34; color: #fff;
}
.login-fundo { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.login-faixa {
  position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: linear-gradient(180deg, #00a8ff, #12b5a5 50%, #1d6bff 80%, #2c4cf0);
}
/* A foto some em degradê para o azul-noite (esquerda e embaixo), igual à capa. */
.login-foto {
  position: absolute; right: 0; top: 0; bottom: 0; width: 48%;
  background: url(/img/login-clinica.jpg) center 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  opacity: 0.9;
}
.login-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, #000e34 100%);
}
.login-visual {
  flex: 1 1 56%; position: relative; z-index: 1; display: flex; flex-direction: column;
  justify-content: space-between; gap: 40px; padding: 56px 40px 52px 88px;
  animation: login-sobe 0.7s ease-out both;
}
.login-visual-logo { width: 300px; max-width: 100%; height: auto; display: block; margin-left: -6px; }
.login-visual-headline { font-size: 44px; font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; max-width: 560px; }
.login-visual-headline span { color: #19c6f7; }
.login-visual-sub { font-size: 19px; line-height: 1.6; color: #d6defa; margin-top: 24px; max-width: 520px; }
.login-visual-sub b { color: #c3d6ff; font-weight: 600; }
.login-visual-slogan { font-size: 17px; font-weight: 600; letter-spacing: 6px; line-height: 1.6; }
.login-visual-slogan .a { color: #e7ecff; }
.login-visual-slogan .b { color: #25c4f5; }
.login-visual-slogan .c { color: #2dd4bf; }

.login-form-pane {
  flex: 1 1 44%; position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 48px;
}
/* margin auto centraliza quando cabe e, quando o card é mais alto que a tela, começa no topo (com
   align-items: center o topo do card ficava fora da área de rolagem). */
.login-form-pane > .login-card { margin: auto 0; }
/* No computador a coluna do card cresce junto com ele (senão o card vaza da coluna sem o respiro de baixo). */
.login-form-pane { min-height: max-content; }
.login-card {
  width: 100%; max-width: 400px; position: relative; overflow: hidden;
  background: #fff; color: var(--text); border-radius: 22px; padding: 38px 34px 30px;
  box-shadow: 0 30px 80px rgba(0, 6, 30, 0.55), 0 0 0 1px rgba(120, 160, 255, 0.18), 0 0 60px rgba(30, 140, 255, 0.18);
  animation: login-sobe 0.7s 0.12s ease-out both;
}
/* Filete em degradê no topo do card, o mesmo divisor da capa da proposta. */
.login-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, #00c2ff, #12b5a5 50%, #1f6bff);
}
.login-card-cabecalho { margin-bottom: 22px; }
.login-card-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #1767ff; }
.login-card-titulo { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #0c1541; margin: 6px 0 4px; }
.login-card-sub { font-size: 14px; color: #5a6485; margin: 0; }
.login-card .btn[type="submit"] {
  background: linear-gradient(90deg, #0a4fa8, #0b7fa0 50%, #0e9a96); border: none; justify-content: center;
  padding-top: 11px; padding-bottom: 11px; font-size: 15px; box-shadow: 0 8px 20px rgba(11, 122, 156, 0.35);
}
.login-card .btn[type="submit"]:hover { filter: brightness(1.08); }
.login-brand { display: none; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-logo-img { width: 190px; max-width: 100%; height: auto; }
@keyframes login-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .login-visual, .login-card { animation: none; } }
@media (max-width: 1180px) {
  .login-visual { padding-left: 64px; }
  .login-visual-headline { font-size: 36px; }
  .login-visual-sub { font-size: 17px; }
}
/* No celular: logo claro em cima, no azul-noite, e o card logo abaixo (sem foto nem textos). */
@media (max-width: 900px) {
  .login-screen { flex-direction: column; justify-content: flex-start; }
  .login-visual { margin-top: auto; }
  .login-form-pane { margin-bottom: auto; }
  .login-foto, .login-visual-texto, .login-visual-slogan { display: none; }
  .login-visual { flex: 0 0 auto; align-items: center; padding: 36px 20px 0 28px; }
  .login-visual-logo { width: 190px; margin-left: 0; }
  .login-faixa { width: 8px; }
  .login-form-pane { flex: 0 0 auto; padding: 24px 20px 36px 28px; }
  .login-card { padding: 30px 24px 24px; }
  .login-card-cabecalho { text-align: center; }
}
.login-titulo { font-weight: 700; font-size: 18px; color: var(--text); }
.login-erro { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; margin-bottom: 14px; }
.login-senha-wrap { position: relative; display: flex; }
.login-senha-wrap input { width: 100%; padding-right: 38px; }
.login-senha-toggle {
  position: absolute; right: 0; top: 0; bottom: 0; width: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 0;
}
.login-senha-toggle:hover { color: var(--text-muted); }
.login-senha-toggle svg { width: 18px; height: 18px; }
.login-senha-toggle.mostrando { color: var(--accent); }
.sidebar nav a.active .icon { opacity: 1; color: #19c6f7; }
.sidebar nav a.active::before {
  content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px;
  background: linear-gradient(180deg, #00c2ff, #12b5a5); border-radius: 0 4px 4px 0;
}

.pagamento-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pagamento-opcao { background: var(--bg-subtle, #f8fafc); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; text-align: center; }
@media (max-width: 480px) { .pagamento-opcoes { grid-template-columns: 1fr; } }

.aviso-cobranca-banner {
  display: flex; align-items: center; gap: 10px; padding: 10px 20px;
  background: #fffbeb; border-bottom: 1px solid #fde68a; color: #92400e; font-size: 13.5px;
}
.aviso-cobranca-banner .icon { color: #d97706; flex-shrink: 0; }
.aviso-cobranca-banner span { flex: 1; }
.aviso-cobranca-banner a { font-weight: 600; color: #92400e; text-decoration: underline; flex-shrink: 0; }
.aviso-cobranca-banner.atrasada { background: #fef2f2; border-bottom-color: #fecaca; color: #991b1b; }
.aviso-cobranca-banner.atrasada .icon { color: #dc2626; }
.aviso-cobranca-banner.atrasada a { color: #991b1b; }

/* Grupo da direita do topbar (balão de pagamento + seletor de loja + sino) — um único
   flex container com margin-left:auto, pra tudo ficar agrupado e alinhado à direita. */
.topbar-right { display: flex; align-items: center; gap: 12px; }

/* Balão de pagamento — pílula compacta dentro do próprio topbar (não mais um card flutuante
   sobreposto à tela). Fica sempre visível, em qualquer aba do sistema, sem interferir no uso.
   Refeito em 2026-09-25 (pedido do usuário): fundo claro, ícone num círculo, texto em 2 linhas
   e botão "Pagar agora" no degradê âmbar — mais leve que o laranja chapado de antes. */
.topbar-balao-pagamento {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, #fffaf0, #fff);
  border: 1px solid #fbe3b4; border-radius: 12px;
  padding: 5px 5px 5px 6px; font-size: 12.5px; line-height: 1.25; color: #7c4a03;
  box-shadow: 0 1px 2px rgba(180, 110, 0, 0.06);
}
.topbar-balao-pagamento .balao-icone {
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: #fdecc8; color: #c26a00; flex-shrink: 0;
}
.topbar-balao-pagamento .balao-icone .icon { width: 16px; height: 16px; }
.topbar-balao-pagamento .balao-textos { display: flex; flex-direction: column; }
.topbar-balao-pagamento strong { display: block; font-size: 12.5px; font-weight: 700; color: #6b3f00; }
.topbar-balao-pagamento .balao-sub { display: block; font-size: 11.5px; color: #a0620a; }
.topbar-balao-pagamento a.btn-balao {
  display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0;
  background: linear-gradient(90deg, #f59e0b, #e67e00); color: #fff; font-weight: 700; text-decoration: none;
  font-size: 12.5px; padding: 8px 14px; border-radius: 9px; box-shadow: 0 3px 8px rgba(230, 126, 0, 0.28);
  transition: filter 0.12s;
}
.topbar-balao-pagamento a.btn-balao:hover { filter: brightness(1.06); }
.topbar-balao-pagamento.atrasada { background: linear-gradient(90deg, #fff5f5, #fff); border-color: #fbcaca; color: #991b1b; }
.topbar-balao-pagamento.atrasada .balao-icone { background: #fde0e0; color: #dc2626; }
.topbar-balao-pagamento.atrasada strong { color: #8a1414; }
.topbar-balao-pagamento.atrasada .balao-sub { color: #b42323; }
.topbar-balao-pagamento.atrasada a.btn-balao { background: linear-gradient(90deg, #ef4444, #dc2626); box-shadow: 0 3px 8px rgba(220, 38, 38, 0.28); }
@media (max-width: 900px) {
  .topbar-balao-pagamento .balao-sub { display: none; }
}
@media (max-width: 640px) {
  .topbar-balao-pagamento .balao-textos, .topbar-balao-pagamento .balao-icone { display: none; }
  .topbar-balao-pagamento { padding: 4px; }
}

/* Seletor de loja — menu próprio (initLojaSwitcher), no lugar do <select> nativo. */
.loja-switcher { position: relative; }
.loja-switcher-btn {
  display: flex; align-items: center; gap: 10px; max-width: 250px;
  padding: 5px 10px 5px 5px; border: 1px solid var(--border-strong); border-radius: 12px;
  background: #fff; cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.loja-switcher-btn:hover { border-color: #b8c4e0; box-shadow: var(--shadow-xs); }
.loja-switcher.open .loja-switcher-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.loja-switcher-icone {
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--btn-gradient); color: #fff; flex-shrink: 0;
}
.loja-switcher-icone .icon { width: 16px; height: 16px; }
.loja-switcher-textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.loja-switcher-rotulo { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
.loja-switcher-nome { font-size: 13.5px; font-weight: 700; color: #0c1541; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loja-switcher-seta { width: 16px; height: 16px; color: var(--text-faint); transition: transform 0.15s; }
.loja-switcher.open .loja-switcher-seta { transform: rotate(180deg); }
.loja-switcher-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 300px; max-width: calc(100vw - 24px); max-height: 60vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 6px;
  box-shadow: 0 16px 40px rgba(12, 21, 65, 0.16);
}
.loja-switcher.open .loja-switcher-menu { display: block; animation: loja-menu-abre 0.14s ease-out; }
@keyframes loja-menu-abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.loja-switcher-menu-titulo { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding: 8px 10px 6px; }
.loja-switcher-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; border-radius: 10px;
  background: none; cursor: pointer; font-family: inherit; text-align: left; color: var(--text);
}
.loja-switcher-item:hover { background: #f4f6fb; }
.loja-switcher-item.ativa { background: var(--accent-light); }
.loja-switcher-item-inicial {
  width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: #eef1f8; color: #3a4566; font-weight: 800; font-size: 14px;
}
.loja-switcher-item.ativa .loja-switcher-item-inicial { background: var(--btn-gradient); color: #fff; }
.loja-switcher-item-textos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.loja-switcher-item-nome { font-size: 13.5px; font-weight: 600; color: #0c1541; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loja-switcher-item-sub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.loja-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 999px; }
.loja-tag.matriz { background: #e6f5f8; color: #0b7a9c; }
.loja-tag.filial { background: #e8efff; color: #1f5fd6; }
.loja-switcher-check { width: 16px; height: 16px; color: var(--accent); }
@media (max-width: 640px) {
  .loja-switcher-textos .loja-switcher-rotulo { display: none; }
  .loja-switcher-btn { max-width: 150px; }
}

/* ---------- Main ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.topbar {
  padding: 18px 32px; background: var(--card-bg); border-bottom: 1px solid var(--border);
  font-size: 18.5px; font-weight: 800; letter-spacing: -0.025em; color: #0c1541;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
#content { padding: 26px 32px; flex: 1; overflow-y: auto; }

.notif-bell-wrap { position: relative; margin-left: 6px; }
.notif-bell-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; position: relative;
  background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer;
}
.notif-bell-btn:hover { background: var(--bg); color: var(--text); }
.notif-bell-btn svg { width: 18px; height: 18px; }
.notif-bell-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--card-bg);
}
.notif-panel {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  width: 360px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.notif-bell-wrap.open .notif-panel { display: block; }
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card-bg);
}
.notif-panel-header strong { font-size: 13.6px; }
.notif-panel-header a { font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; }
.notif-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; position: relative; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #fafbff; }
.notif-item.unread { background: var(--accent-light); }
.notif-item.unread:hover { background: #e4edff; }
.notif-item-titulo { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.notif-item.unread .notif-item-titulo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.notif-item-msg { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
/* Nova loja assinante (verde) e acesso que não saiu (laranja) se destacam no sininho */
.notif-item--assinatura { box-shadow: inset 3px 0 0 var(--green); }
.notif-item--assinatura.unread { background: var(--green-bg); }
.notif-item--assinatura.unread .notif-item-titulo::before { background: var(--green); }
.notif-item--alerta { box-shadow: inset 3px 0 0 #d97706; }
.notif-item--alerta.unread { background: #fff7ed; }

/* Janela "Nova loja assinante" (verificarNovaAssinatura em app.js) */
.aviso-assinatura {
  position: fixed; right: 24px; bottom: 24px; z-index: 1200; width: min(400px, calc(100vw - 32px));
  display: flex; gap: 14px; padding: 18px 18px 16px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--border); overflow: hidden;
  box-shadow: 0 24px 60px -18px rgba(0, 14, 52, .45);
  animation: aviso-assinatura-entra .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.aviso-assinatura::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-gradient); }
.aviso-assinatura-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--green); }
.aviso-assinatura-ico svg { width: 22px; height: 22px; }
.aviso-assinatura-corpo { min-width: 0; }
.aviso-assinatura-rotulo { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.aviso-assinatura-corpo strong { display: block; font-size: 16px; margin: 2px 0 4px; color: var(--text); }
.aviso-assinatura-corpo p { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.aviso-assinatura-acoes { display: flex; gap: 8px; }
@keyframes aviso-assinatura-entra { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aviso-assinatura { animation: none; } }
@media (max-width: 640px) { .aviso-assinatura { right: 16px; bottom: 16px; } }
/* Mensagens longas (ex.: contato do site) ficam em 3 linhas no sino; o texto inteiro abre no clique. */
.notif-item-msg { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.contato-site-texto { white-space: pre-wrap; background: var(--bg, #f6f7fb); border: 1px solid var(--border, #e4e7ec); border-radius: 10px; padding: 14px 16px; font-size: 14px; line-height: 1.55; max-height: 55vh; overflow: auto; }
.notif-item-tempo { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.notif-panel-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

@media (max-width: 640px) {
  .notif-panel { position: fixed; top: 62px; right: 12px; left: 12px; width: auto; }
}


/* Barra de filtros (Etapa 3 do visual, 2026-09-25): Vendas, O.S., Orçamentos, Clientes e
   Processos/Serviços. Tudo numa faixa só, que quebra linha sozinha quando falta espaço, com os
   botões no fim. "Limpar" deixou de ser vermelho (vermelho é para apagar/perigo) e virou um botão
   discreto (.btn.ghost). Na O.S., os filtros menos usados ficam em "Mais filtros" (.filtro-extra). */
.filtros-barra {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.filtros-barra.sem-divisoria { margin-top: 0; padding-top: 0; border-top: none; }
/* O .panel tem overflow-x:auto (por causa das tabelas largas), e isso corta qualquer lista que abre
   por cima, como a de Status da O.S. e a de Exportar. Com os filtros numa barra baixa, a lista não
   cabia mais dentro do painel e ficava escondida. O painel dos filtros não tem tabela, então pode
   deixar o conteúdo "vazar". */
.panel:has(.filtros-barra) { overflow: visible; }
/* Mesmo problema nas listas de O.S., Orçamentos e Vendas (e no histórico da ficha do cliente):
   os menus "Mudar Status", "Imprimir" e "Enviar" de cada cartão ficavam cortados quando a lista
   era curta (1 ou 2 cartões), porque o .panel em volta recortava o que passava da borda dele.
   Relatado pelo usuário em 2026-09-25. Qualquer painel com esses menus (.dd-btn) deixa vazar. */
.panel:has(.dd-btn) { overflow: visible; }
.filtros-barra .form-row { flex: 1 1 140px; min-width: 0; margin-bottom: 0; }
.filtros-barra .form-row.filtro-data { flex: 0 1 150px; }
.filtros-barra .form-row > label, .filtros-barra .pill-field > label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint);
}
.filtros-barra .pill-field { margin-bottom: 0; }
.filtros-barra .dd-btn-toggle { border-radius: var(--radius-sm); padding: 9px 13px; width: 100%; justify-content: space-between; }
.filtros-barra .filtro-extra { display: none; }
.filtros-barra.extras-abertos .filtro-extra { display: flex; }
.filtros-acoes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.filtros-acoes .btn { white-space: nowrap; }
.filtros-mais[data-qtd]:not([data-qtd=""])::after {
  content: attr(data-qtd); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--btn-gradient); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center;
}
.filtros-barra.extras-abertos .filtros-mais { color: var(--accent); background: var(--accent-light); }

/* Botão discreto, sem fundo (ações secundárias como "Limpar" e "Mais filtros"). */
.btn.ghost { background: transparent; color: var(--text-muted); box-shadow: none; border: 1px solid transparent; }
.btn.ghost:hover { background: #f1f3f9; color: var(--text); filter: none; box-shadow: none; }

@media (max-width: 640px) {
  .filtros-barra .form-row, .filtros-barra .form-row.filtro-data { flex: 1 1 140px; }
  .filtros-acoes { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .filtros-acoes .btn:not(.ghost) { flex: 1; justify-content: center; }
}

/* Ações de linha de tabela (acoesLinhaHtml em app.js): ação principal como botão pequeno e as
   demais num menu "⋯". O menu usa position:fixed (posicionado pelo JS) pra não ser cortado pelo
   overflow do .panel. */
.acoes-linha { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.acoes-linha .acao-principal {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px;
  background: var(--accent-light); color: var(--accent); font-size: 12.5px; font-weight: 600; text-decoration: none;
  transition: background 0.12s;
}
.acoes-linha .acao-principal:hover { background: #dfe8ff; text-decoration: none; }
.acoes-linha .acao-principal .icon { width: 14px; height: 14px; }
.acoes-mais-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.acoes-mais-btn:hover, .acoes-mais.open .acoes-mais-btn { background: #f1f3f9; border-color: var(--border); color: var(--text); }
.acoes-mais-btn .icon { width: 18px; height: 18px; }
.acoes-mais-menu {
  display: none; position: fixed; z-index: 80; min-width: 200px; padding: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(12, 21, 65, 0.16);
}
.acoes-mais.open .acoes-mais-menu { display: block; }
.acoes-mais-menu a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
  color: var(--text); font-weight: 500; font-size: 13.5px; text-decoration: none;
}
.acoes-mais-menu a:hover { background: #f4f6fb; text-decoration: none; }
.acoes-mais-menu a .icon { width: 16px; height: 16px; color: var(--text-muted); }
.acoes-mais-menu a.perigo { color: var(--red); margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; padding-top: 10px; }
.acoes-mais-menu a.perigo .icon { color: var(--red); }
.acoes-mais-menu a.perigo:hover { background: var(--red-bg); }

/* Cartões do Painel: 3 por linha (6 cartões = 2 linhas cheias); com o 7º (Serviços a receber), 4 + 3. */
@media (min-width: 1100px) {
  .cards-grid.painel-cards { grid-template-columns: repeat(3, 1fr); }
  .cards-grid.painel-cards.com-7 { grid-template-columns: repeat(4, 1fr); }
}

/* Saudação no topo do Painel ("Bom dia, Filipe"). */
.painel-saudacao { margin: 0 0 20px; }
.painel-saudacao h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: #0c1541; }
.painel-saudacao h2 span { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.painel-saudacao p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }

/* ---------- Cards ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; margin-bottom: 22px; }
.card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); transition: box-shadow 0.15s, transform 0.15s;
  display: block; text-decoration: none; color: inherit; cursor: pointer;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card-icon-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card-icon .icon { width: 17px; height: 17px; }
.card-icon.red { background: var(--red-bg); color: var(--red); }
.card-icon.green { background: var(--green-bg); color: var(--green); }
.card-icon.orange { background: var(--orange-bg); color: var(--orange); }
.card-icon.blue { background: var(--accent-light); color: var(--accent); }
.card-icon.neutral { background: #f1f2f7; color: var(--text-muted); }
.card-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 0; }
.card-value { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.card-value.green { color: var(--green); }
.card-value.red { color: var(--red); }
.card-value.orange { color: var(--orange); }
.card-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.panel {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); margin-bottom: 20px; overflow-x: auto;
}
.panel-title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 16px; }

/* ---------- Toolbar / forms ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.toolbar-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.toolbar input[type="text"] { padding: 9px 12px 9px 34px; border: 1px solid var(--border); border-radius: 8px; width: 270px; font-size: 14px; background: #fbfcfe url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2398a2b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="11" cy="11" r="7"%3E%3C/circle%3E%3Cline x1="21" y1="21" x2="16.65" y2="16.65"%3E%3C/line%3E%3C/svg%3E') no-repeat 11px center; }
.toolbar input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background-color: #fff; }
/* Filtro por mês em Contas a Pagar/Receber (2026-10-01): ‹ mês › e "Todos os meses". */
.filtro-mes { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filtro-mes .btn.small { padding: 7px 9px; }
.filtro-mes #mes-todos.ativo { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.financeiro-mes-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: -4px 0 12px; font-size: 13.5px; color: var(--text-muted); }
.financeiro-mes-resumo .fmr-titulo { font-weight: 700; color: var(--text); }
.financeiro-mes-resumo strong { color: var(--text); }
.financeiro-mes-resumo .fmr-pago { color: var(--green); }
.financeiro-mes-resumo .fmr-aberto { color: var(--red); }
.financeiro-mes-resumo .fmr-atrasadas { display: inline-flex; align-items: center; gap: 4px; color: var(--red); font-weight: 600; }
.toolbar input[type="date"], .toolbar input[type="month"] {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; font-weight: 600; color: var(--text); background: #fff; cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.toolbar input[type="date"]:hover, .toolbar input[type="month"]:hover { border-color: var(--border-strong); }
.toolbar input[type="date"]:focus, .toolbar input[type="month"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.toolbar label:has(input[type="date"]), .toolbar label:has(input[type="month"]) {
  display: flex; align-items: center; gap: 8px; font-size: 13.6px; font-weight: 600; color: var(--text-muted);
}
.toolbar select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 9px 34px 9px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; font-weight: 600; color: var(--text); background-color: #fff;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2398a2b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E');
  background-repeat: no-repeat; background-position: right 12px center; cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.toolbar select:hover { border-color: var(--border-strong); }
.toolbar select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; background: var(--btn-gradient); color: #fff; border: none;
  padding: 9px 16px; border-radius: 9px; font-size: 13.8px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 6px rgba(11, 122, 156, 0.28); transition: filter 0.12s, box-shadow 0.12s, transform 0.05s;
}
.btn:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(11, 122, 156, 0.34); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--card-bg); color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; }
.btn.secondary:hover { background: #f8f9fc; border-color: var(--accent); color: var(--accent); filter: none; }
.btn.danger { background: var(--red); box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25); }
.btn.danger:hover { background: #b91c1c; filter: none; }
.btn.small { padding: 6px 11px; font-size: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 13.8px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); }
th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.035em; color: var(--text-muted); font-weight: 700; background: #fafbfd; }
th:first-child { border-top-left-radius: 8px; }
th:last-child { border-top-right-radius: 8px; }
tr:hover td { background: #fafbff; }
tbody tr { transition: background 0.1s; }

.badge { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; }
.badge.orcamento { background: #eef1f6; color: #4b5563; }
.badge.os_aberta { background: var(--orange-bg); color: #b7791f; }
.badge.em_producao { background: var(--accent-light); color: #3b5bdb; }
.badge.pronto_retirada { background: #fff4d6; color: #a16207; }
.badge.entregue { background: var(--green-bg); color: var(--green); }
.badge.cancelado { background: var(--red-bg); color: var(--red); }
.badge.aberto { background: var(--orange-bg); color: #b7791f; }
.badge.pago { background: var(--green-bg); color: var(--green); }
/* "A Pagar" em aberto, especificamente — vermelho, diferente do "Em Aberto" genérico (laranja)
   usado por "A Receber" e outras telas — a pedido do usuário, só pra despesas. */
.badge.a-pagar-aberto { background: var(--red-bg); color: var(--red); }
.badge.pendente { background: #eef1f6; color: #4b5563; }
.badge.processando { background: var(--orange-bg); color: #b7791f; }
.badge.autorizada { background: var(--green-bg); color: var(--green); }
.badge.rejeitada { background: var(--red-bg); color: var(--red); }
.badge.denegada { background: var(--red-bg); color: var(--red); }
.badge.cancelada { background: var(--red-bg); color: var(--red); }
.badge.inutilizada { background: #eef1f6; color: #4b5563; }
.badge.erro { background: var(--red-bg); color: var(--red); }
.badge.em_andamento { background: var(--accent-light); color: #3b5bdb; }
.badge.resolvido { background: var(--green-bg); color: var(--green); }
.badge.fechado { background: #eef1f6; color: #4b5563; }

.os-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dd-btn { position: relative; }
.dd-btn-toggle {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: #fff; font-size: 13px; font-weight: 500; color: var(--text);
  cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
}
.dd-btn-toggle:hover { border-color: var(--accent); background: var(--accent-light); color: var(--accent-hover); }
.dd-btn.open .dd-btn-toggle { border-color: var(--accent); background: var(--accent-light); color: var(--accent-hover); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.dd-btn-primary .dd-btn-toggle { border-radius: 8px; border: none; background: var(--accent); color: #fff; font-weight: 600; padding: 9px 14px 9px 16px; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25); }
.dd-btn-primary .dd-btn-toggle:hover { background: var(--accent-hover); color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35); }
.dd-btn-primary.open .dd-btn-toggle { background: var(--accent-hover); color: #fff; }
.dd-btn-toggle .dd-chevron { transition: transform 0.15s; margin-left: -1px; }
.dd-btn-toggle .dd-chevron svg { width: 14px; height: 14px; }
.dd-btn.open .dd-btn-toggle .dd-chevron { transform: rotate(180deg); }
.dd-btn-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  z-index: 70; padding: 6px; display: none;
}
.dd-btn.open .dd-btn-menu { display: block; animation: dd-pop 0.12s ease-out; }
@keyframes dd-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dd-btn-menu-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; white-space: nowrap; }
.dd-btn-menu-item:hover { background: var(--accent-light); color: var(--accent-hover); }
.dd-btn-menu-item.active { font-weight: 700; color: var(--accent-hover); background: #f5f6fb; }
/* Itens perigosos (Cancelar, Apagar) sempre em vermelho — antes só ficavam vermelhos ao passar o mouse — e
   separados das ações comuns por uma linha fina (2026-10-03). */
.dd-btn-menu-item.dd-danger { color: var(--red); position: relative; }
.dd-btn-menu-item:not(.dd-danger) + .dd-btn-menu-item.dd-danger { margin-top: 7px; }
.dd-btn-menu-item:not(.dd-danger) + .dd-btn-menu-item.dd-danger::before { content: ""; position: absolute; left: 4px; right: 4px; top: -4px; border-top: 1px solid var(--border); }
.dd-btn-menu-item.dd-danger:hover { background: var(--red-bg); color: var(--red); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.dot-orcamento { background: #4b5563; }
.status-dot.dot-os_aberta { background: #b7791f; }
.status-dot.dot-em_producao { background: #3b5bdb; }
.status-dot.dot-pronto_retirada { background: #a16207; }
.status-dot.dot-entregue { background: var(--green); }
.status-dot.dot-cancelado { background: var(--red); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(10, 15, 30, 0.5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: #fff; border-radius: var(--radius); padding: 26px; width: 480px; max-width: 92vw; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-md); }
.modal h3 { margin-top: 0; letter-spacing: -0.01em; }
/* Janela com tabelas (ex.: conta parceira na Administração: usuários e últimos acessos). Nos 480px
   padrão as tabelas passavam da borda e a janela inteira rolava para o lado. Se ainda assim uma
   tabela não couber (celular), só ela rola dentro do .modal-tabela, não a janela. */
.modal.modal-largo { width: 860px; }
.modal-tabela { overflow-x: auto; max-width: 100%; }
/* Tabela larga dentro de uma tela (ex.: Relatórios → Financeiro): no celular só ela rola para o lado. */
.tabela-rolagem { overflow-x: auto; max-width: 100%; }
.tabela-rolagem > table { min-width: 100%; }
.modal-tabela td { overflow-wrap: anywhere; }

/* A pré-visualização em iframe (.print-preview-*) foi removida em 2026-09-24 — todo documento
   (O.S., Caixa, Relatórios, comprovantes) agora abre o PDF de verdade numa nova guia, no mesmo
   padrão já usado e comprovado pela DANFE/DANFCe (`abrirPdfNovaAba` em app.js, mesma ideia de
   `imprimirDanfce`/`imprimirDanfe`: abre a aba em branco ainda dentro do clique do usuário, pra
   não ser bloqueada como pop-up, e só depois aponta ela pro PDF pronto). Motivo da troca: a prévia
   em HTML reflui em largura diferente da largura real do PDF (794px/210mm), e o `window.print()`
   nela podia estourar pra uma 2ª página por causa dessa divergência — imprimir a partir do PDF
   real, já gerado, não tem esse problema. */
.form-row { margin-bottom: 13px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-row label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.form-row input, .form-row select, .form-row textarea,
.pr-mod-campos input, .pr-mod-campos select, .pr-mod-campos textarea {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
  transition: border-color 0.12s, box-shadow 0.12s; background: #fff; color: var(--text);
}
.form-row select, .pr-mod-campos select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  padding-right: 34px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2398a2b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E');
  background-repeat: no-repeat; background-position: right 12px center;
}
.form-row select:hover { border-color: var(--border-strong); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus,
.pr-mod-campos input:focus, .pr-mod-campos select:focus, .pr-mod-campos textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; } /* minmax(0,…): um select de texto longo não estica a coluna além da tela */
/* Cadastro rápido de Produto (Grupo/Tipo de Material/Formato): 3 campos numa linha só, dentro do
   modal de 480px, precisam ser mais estreitos que o padrão de 2 colunas do .form-grid — senão o
   select+botão "+" de cada um não cabe e a linha estoura a largura da página. */
.produto-quick-atributos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
.produto-quick-atributos select { padding: 8px 24px 8px 8px; font-size: 12.5px; background-position: right 8px center; }
.produto-quick-atributos button[data-atributo-add] { padding: 6px 9px; }
/* Par de campos que deve continuar lado a lado mesmo quando o .form-grid ao redor empilha em 1
   coluna no mobile (ex: "Data Registro de" + "até" em Abrir O.S.) — não usa a classe .form-grid
   de propósito, senão cairia na mesma regra de colapso do breakpoint abaixo. */
.form-row-par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.item-row { display: grid; grid-template-columns: 2fr 80px 100px 30px; gap: 8px; align-items: center; margin-bottom: 8px; }
.empty-state { text-align: center; padding: 44px 20px; color: var(--text-faint); font-size: 13.5px; }
/* Estado vazio completo (estadoVazioHtml em app.js): ícone num círculo com o degradê suave da marca,
   título, explicação e o botão de ação da própria tela. */
.empty-state.rico { padding: 48px 20px 44px; display: flex; flex-direction: column; align-items: center; }
.empty-state-icone {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--accent); margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(0, 194, 255, 0.14), rgba(18, 181, 165, 0.14));
  box-shadow: 0 0 0 8px rgba(31, 107, 255, 0.05);
}
.empty-state-icone .icon { width: 28px; height: 28px; }
.empty-state-titulo { font-size: 16.5px; font-weight: 700; color: #0c1541; letter-spacing: -0.01em; }
.empty-state-texto { font-size: 13.8px; color: var(--text-muted); margin-top: 4px; max-width: 380px; }
.empty-state.rico .btn { margin-top: 18px; }

/* Caixa do dia ainda fechado (Financeiro). */
.panel.caixa-fechado { text-align: center; padding: 44px 24px 40px; display: flex; flex-direction: column; align-items: center; }
.caixa-fechado-icone {
  width: 68px; height: 68px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: var(--btn-gradient); color: #fff; box-shadow: 0 10px 24px rgba(11, 122, 156, 0.30); margin-bottom: 18px;
}
.caixa-fechado-icone .icon { width: 30px; height: 30px; }
.panel.caixa-fechado h3 { margin: 0; font-size: 18px; font-weight: 800; color: #0c1541; letter-spacing: -0.02em; }
.panel.caixa-fechado p { margin: 6px 0 20px; color: var(--text-muted); font-size: 14px; max-width: 420px; }
.caixa-fechado-saldo { width: 220px; text-align: left; }
.chart-wrap { overflow: hidden; }
.chart-wrap svg { display: block; max-width: 100%; }
#vendas-acum-svg.chart-wrap { overflow: visible; }
#vendas-acum-svg svg { cursor: crosshair; }
.muted { color: var(--text-muted); }
.text-right { text-align: right; }
.link { color: var(--accent); cursor: pointer; font-weight: 600; }
.link:hover { text-decoration: underline; }

.vendas-acum-grid { display: grid; grid-template-columns: 260px 1fr; gap: 28px; }
.vendas-acum-comparativo { display: flex; flex-direction: column; gap: 18px; }
.vap-bloco { display: flex; flex-direction: column; gap: 6px; }
.vap-label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.vap-valor { font-size: 22px; font-weight: 700; color: var(--text); }
.vap-bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.vap-bar-fill { height: 100%; border-radius: 999px; }
.vap-bar-fill.atual { background: var(--accent); }
.vap-bar-fill.anterior { background: var(--text-faint); }
.vap-variacao { font-size: 13px; font-weight: 700; }
.vap-variacao.green { color: var(--green); }
.vap-variacao.red { color: var(--red); }
.vap-total { font-size: 12.5px; padding-top: 8px; border-top: 1px solid var(--border); }
.vendas-acum-chart { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vac-botoes { display: flex; gap: 8px; }
.vac-btn {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--card-bg); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.vac-btn:hover { border-color: var(--accent); color: var(--accent); }
.vac-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.vac-legend-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--card-bg); color: var(--text-muted); font-size: 13px; font-weight: 600;
}
.vac-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.vac-tooltip {
  position: absolute; z-index: 10; background: #1f2937; color: #fff; border-radius: 8px;
  padding: 9px 12px; font-size: 12.5px; box-shadow: var(--shadow-md); pointer-events: none;
  white-space: nowrap;
}
.vac-tt-dia { font-weight: 700; margin-bottom: 4px; }
.vac-tt-row { display: flex; align-items: center; gap: 6px; }
.vac-tt-row .vac-dot { width: 7px; height: 7px; }
@media (max-width: 480px) {
  .vac-tooltip { white-space: normal; max-width: 200px; }
}
.vac-legend-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--card-bg); color: var(--text); font-size: 13px; font-weight: 600;
}
.vac-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; display: inline-block; }
.vac-tooltip {
  position: absolute; z-index: 5; background: #1a2332; color: #fff; border-radius: 8px;
  padding: 8px 12px; font-size: 12px; box-shadow: var(--shadow-md); pointer-events: none;
  min-width: 170px; line-height: 1.6;
}
.vac-tt-dia { font-weight: 700; margin-bottom: 3px; }
.vac-tt-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.vac-tt-row strong { margin-left: auto; }
@media (max-width: 720px) {
  .vendas-acum-grid { grid-template-columns: 1fr; }
}

.codigo-identificacao-panel { margin-top: 16px; }
.codigo-identificacao-row { display: flex; align-items: center; gap: 12px; }
.codigo-identificacao-row code {
  font-size: 18px; font-weight: 700; letter-spacing: 0.06em; background: var(--accent-light);
  color: var(--accent); padding: 8px 14px; border-radius: var(--radius-sm);
}

/* ---------- Empresa / Minhas Empresas ---------- */
.empresa-header { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 22px; }
.empresa-logo-wrap { position: relative; width: 92px; height: 92px; cursor: pointer; border-radius: 14px; }
.empresa-logo {
  width: 92px; height: 92px; border-radius: 14px;
  background: linear-gradient(135deg, #1d4ed8, #0c1524);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; flex-shrink: 0;
  box-shadow: var(--shadow-md); overflow: hidden;
}
.empresa-logo img { width: 100%; height: 100%; object-fit: cover; }
.empresa-logo-overlay {
  position: absolute; inset: 0; border-radius: 14px; background: rgba(12, 21, 36, 0.72); color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; font-weight: 600;
  padding: 8px; opacity: 0; transition: opacity 0.15s;
}
.empresa-logo-wrap:hover .empresa-logo-overlay { opacity: 1; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: #d5dae3; border-radius: 22px; transition: 0.15s; }
.switch .slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }

.license-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 22px; }
.license-card {
  background: linear-gradient(135deg, #059669, #047857); color: #fff; border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow);
}
.license-card .lc-label { font-size: 11.5px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.03em; }
.license-card .lc-value { font-size: 18px; font-weight: 700; }

.settings-layout { display: grid; grid-template-columns: 226px 1fr; gap: 0; }
.settings-tabs { display: flex; flex-direction: column; border-right: 1px solid var(--border); padding-right: 6px; }
.settings-tabs button { text-align: left; background: none; border: none; padding: 10px 14px; font-size: 13.6px; color: var(--text-muted); cursor: pointer; border-radius: 8px; transition: background 0.12s, color 0.12s; }
.settings-tabs button:hover { background: #f5f6fb; color: var(--text); }
.settings-tabs button.active { color: var(--accent); font-weight: 700; background: var(--accent-light); }
.settings-tabs-grupo-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); padding: 14px 14px 4px; }
.settings-tabs-grupo-titulo:first-child { padding-top: 4px; }
.settings-content { padding: 4px 26px; }
.subnav-tabs { display: inline-flex; gap: 2px; background: var(--border); border-radius: var(--radius); padding: 4px; margin-bottom: 20px; max-width: 100%; overflow-x: auto; }
.subnav-tabs a { padding: 9px 18px; font-size: 13.6px; font-weight: 600; color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap; transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; }
.subnav-tabs a:hover { color: var(--text); }
.subnav-tabs a.active { color: var(--accent); background: var(--card-bg); box-shadow: var(--shadow-xs); }
.checkbox-row { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; font-size: 14px; }
.checkbox-row input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }

.produto-imagens-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.produto-imagem-slot {
  position: relative; width: 92px; height: 92px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  color: var(--text-faint); font-size: 11px; overflow: hidden; transition: border-color 0.12s, color 0.12s; background: #fbfcfe;
}
.produto-imagem-slot:hover { border-color: var(--accent); color: var(--accent); }
.produto-imagem-slot img { width: 100%; height: 100%; object-fit: cover; }
.produto-imagem-slot .icon { width: 20px; height: 20px; }
.produto-imagem-remover {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.produto-imagem-remover .icon { width: 14px; height: 14px; }
.produto-imagem-remover:hover { background: var(--red); }

.settings-section { margin-bottom: 24px; }
.settings-section-title { background: #f5f6fb; padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); border-radius: var(--radius-sm); margin-bottom: 14px; letter-spacing: 0.01em; }
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
.info-banner { background: var(--accent-light); color: var(--accent-hover); padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 12px; }
.info-note { color: var(--text-muted); font-size: 13px; }

/* Cartão de destaque do LyrosZap — conexão via WhatsApp QR Code */
.zap-promo-card {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 30px 28px; margin-bottom: 4px;
  background: linear-gradient(135deg, #1fa895 0%, #0f7a68 55%, #0a5b4d 100%); color: #fff;
  box-shadow: 0 8px 24px rgba(10, 91, 77, 0.28);
}
.zap-promo-card::after {
  content: ''; position: absolute; right: -50px; top: -60px; width: 220px; height: 220px;
  background: rgba(255, 255, 255, 0.08); border-radius: 50%;
}
.zap-promo-card::before {
  content: ''; position: absolute; left: -30px; bottom: -60px; width: 160px; height: 160px;
  background: rgba(255, 255, 255, 0.06); border-radius: 50%;
}
.zap-promo-badge {
  position: relative; display: inline-block; background: rgba(255, 255, 255, 0.18); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.zap-promo-badge--ok { background: rgba(255, 255, 255, 0.26); }
.zap-promo-card h3 { position: relative; margin: 0 0 8px; font-size: 20px; letter-spacing: -0.01em; line-height: 1.3; }
.zap-promo-card p { position: relative; margin: 0 0 18px; font-size: 13.5px; opacity: 0.94; max-width: 520px; line-height: 1.5; }
.zap-promo-features { position: relative; list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; }
.zap-promo-features li { font-size: 13.5px; display: flex; align-items: center; gap: 9px; }
.zap-promo-features li .zap-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.2);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.zap-promo-cta {
  position: relative; background: #fff; color: #0a5b4d; font-weight: 700; border: none;
  padding: 12px 24px; font-size: 14.5px; border-radius: var(--radius-sm); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: transform 0.12s, box-shadow 0.12s;
}
.zap-promo-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); }
.zap-promo-numero { position: relative; font-size: 14px; margin: -6px 0 16px; opacity: 0.95; }
.zap-promo-numero strong { font-weight: 700; }

.zap-qr-modal-qr { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0 4px; text-align: center; }
.zap-qr-modal-qr img { width: 240px; height: 240px; border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: #fff; }
.zap-qr-success { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0 10px; text-align: center; }
.zap-qr-success-icon {
  width: 62px; height: 62px; border-radius: 50%; background: var(--green-bg); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700;
  animation: zapQrPop 0.35s ease;
}
@keyframes zapQrPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; overflow-y: hidden; }
.subtabs button { flex-shrink: 0; }
.subtabs button { padding: 9px 16px; border: none; background: none; font-size: 13px; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; transition: color 0.12s, border-color 0.12s; }
.subtabs button:hover { color: var(--text); }
.subtabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.warn-banner { background: var(--orange-bg); border: 1px solid #f3d8a0; border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px; font-size: 13px; }
.warn-banner strong { color: var(--orange); }
.check-list { list-style: none; padding: 0; margin: 10px 0; font-size: 13px; }
.check-list li { padding: 3px 0; color: var(--text-muted); }
.check-list li.ok::before { content: "✓ "; color: var(--green); font-weight: 700; }

.contato-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 12px; background: #fbfbfe; }
.contato-row .checkbox-row { margin-bottom: 0; }
.contato-row .checkbox-row span { display: flex; align-items: center; gap: 6px; }

.cliente-layout { display: flex; gap: 18px; align-items: flex-start; }
.cliente-main { flex: 1; min-width: 0; }
.cliente-sidebar { width: 210px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.cliente-sidebar .empresa-logo-wrap { width: 100%; height: 150px; margin-bottom: 4px; }
.cliente-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 14px; }
.cliente-info-grid .ci-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.cliente-info-grid .ci-value { font-size: 14px; margin-top: 2px; }
/* Cartões de resumo (Vendas, O.S., Orçamentos, Financeiro, Fiscal, Caixa...). Etapa 2 do visual
   (2026-09-25): viraram cartões brancos com sombra, no mesmo estilo dos cartões do Painel, com um
   ícone opcional à esquerda (.sc-icon). O "accent" ganha o filete em degradê da marca no topo, em vez
   do fundo azul chapado. */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card {
  position: relative; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.stat-card:has(.sc-icon) { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.stat-card .sc-icon {
  grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-light); color: var(--accent);
}
.stat-card .sc-icon .icon { width: 20px; height: 20px; }
.stat-card .sc-icon.green { background: var(--green-bg); color: var(--green); }
.stat-card .sc-icon.red { background: var(--red-bg); color: var(--red); }
.stat-card .sc-icon.orange { background: var(--orange-bg); color: var(--orange); }
.stat-card .sc-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-card .sc-value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; color: #0c1541; font-variant-numeric: tabular-nums; }
.stat-card.accent::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-gradient);
}
.stat-card.accent .sc-icon:not(.green):not(.red):not(.orange) { background: var(--btn-gradient); color: #fff; }
.stat-card.warn { background: #fffaf2; border-color: #f6dfb8; }
.stat-card.warn .sc-value { color: #b7791f; }
.suporte-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.suporte-msg { max-width: 80%; padding: 10px 14px; border-radius: 12px; background: #f5f6fb; }
.suporte-msg.admin { align-self: flex-end; background: var(--accent-light); }
.suporte-msg-meta { font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 3px; display: flex; gap: 6px; align-items: center; }
.suporte-msg.admin .suporte-msg-meta { color: #3b5bdb; }
.suporte-msg-texto { font-size: 13.6px; white-space: pre-wrap; word-break: break-word; }
.suporte-msg-anexo { display: inline-block; margin-top: 8px; }
.suporte-msg-anexo img { max-width: 220px; max-height: 220px; border-radius: 8px; display: block; border: 1px solid var(--border-strong); }
.suporte-reply-row { display: flex; gap: 8px; align-items: flex-end; }
.suporte-reply-row textarea { flex: 1; }

.historico-card { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; }
.historico-card.open { overflow: visible; }
.historico-card-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; background: #fbfbfe; }
.historico-card-header:hover { background: #f5f6fb; }
.historico-card-body { padding: 14px 16px; border-top: 1px solid var(--border); display: none; }
.historico-card.open .historico-card-body { display: block; }
.historico-card.open .chevron { transform: rotate(180deg); }
.chevron { margin-left: auto; transition: transform 0.15s; color: var(--text-muted); }
.arquivo-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; }
/* Mesmo padrão "cartão moderno" (borda + cantos arredondados, sem sombra extra) já usado nas
   tabelas de itens — deixa o quadro de totais visualmente no mesmo nível dos outros blocos. */
.totais-os { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; max-width: 480px; margin-left: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: #fff; }
.totais-os-row { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: 13.5px; }
.totais-os-row input {
  padding: 6px 8px; text-align: right; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13.5px; font-family: inherit; background: #fff; color: var(--text); transition: border-color 0.12s, box-shadow 0.12s;
}
.totais-os-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.totais-os-row span:first-child { margin-right: auto; color: var(--text-muted); }
.totais-os-liquido { font-size: 16px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.totais-os-liquido span:first-child { color: var(--text); font-weight: 600; }
.adiantamento-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; }
/* Val. Unit. editável na tabela de itens (Nova Venda/Abrir O.S.) — estava sem nenhum estilo
   (fora de .form-row, então nem herdava a borda/raio padrão dos outros campos do sistema). */
.item-preco-input {
  width: 100px; padding: 7px 9px; text-align: right; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13.5px; font-family: inherit; background: #fff; color: var(--text); transition: border-color 0.12s, box-shadow 0.12s;
}
.item-preco-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.cliente-preview-box { background: var(--accent-light); border-radius: var(--radius-sm); padding: 14px 18px; margin-top: 12px; }
.cliente-preview-box .cpb-name { font-size: 15px; font-weight: 700; color: var(--accent-hover); margin-bottom: 10px; }
.cliente-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.cliente-preview-grid .cpb-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: #5b7fc7; }
.cliente-preview-grid .cpb-value { font-size: 13.5px; color: var(--accent-hover); margin-top: 2px; }
.arquivo-row .link { flex: 1; }
@media (max-width: 900px) {
  .cliente-layout { flex-direction: column; align-items: stretch; }
  .cliente-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .cliente-sidebar .btn { flex: 1; min-width: 160px; }
}
.check-list li.pending::before { content: "○ "; color: var(--text-faint); }
.cert-current { display: flex; align-items: center; justify-content: space-between; background: #f5f6fb; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-top: 8px; }

.code-select { position: relative; }
.code-display { width: 100%; text-align: left; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; transition: border-color 0.12s; }
.code-display:hover { border-color: var(--accent); }
.code-display .arrow { color: var(--text-muted); flex-shrink: 0; }
.code-panel { position: relative; margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-md); padding: 8px; z-index: 20; }
.code-search { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; font-size: 13px; }
.code-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.code-options { max-height: 220px; overflow-y: auto; border-top: 1px solid var(--border); }
.code-option { padding: 9px 10px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #f5f6fb; }
.code-option:hover { background: #f5f6fb; }
.code-option.selected { color: var(--accent); font-weight: 600; }

/* ---------- Combo (typeahead) ---------- */
.combo-wrap { position: relative; width: 100%; }
.form-row .combo-input { width: 100%; box-sizing: border-box; }
.combo-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 60; max-height: 260px; overflow-y: auto; display: none; }
.combo-dropdown.open { display: block; }
.combo-option { padding: 8px 12px; font-size: 13.5px; cursor: pointer; }
.combo-option:hover, .combo-option.active { background: var(--accent-light); color: var(--accent-hover); }
.combo-option-rich { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid #f5f6fb; }
.combo-option-rich:hover { background: var(--accent-light); }
.combo-option-rich .co-main { min-width: 0; }
.combo-option-rich .co-nome { font-size: 13.5px; font-weight: 600; color: var(--text); }
.combo-option-rich .co-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.combo-option-rich .co-preco { font-size: 13.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.combo-empty { padding: 10px 12px; font-size: 13px; color: var(--text-muted); }

/* ---------- Pill groups (botões selecionáveis) ---------- */
.pill-field { margin-bottom: 14px; }
.pill-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { padding: 7px 15px; border: 1px solid var(--border-strong); border-radius: 999px; background: #fff; font-size: 13px; color: var(--text-muted); cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s; }
.pill:hover { border-color: var(--accent); color: var(--text); }
.pill.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
/* Variante com ícone (ex: Formato de armação) — caixa maior com o desenho em cima e o nome
   embaixo, em vez do pill de texto puro usado nos outros campos de seleção. */
.pill.pill-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 108px; padding: 14px 8px; border-radius: 10px; background: #fff; color: var(--text); }
.pill.pill-icon .pill-icon-svg { display: flex; align-items: center; justify-content: center; height: 28px; color: var(--text-muted); }
.pill.pill-icon .pill-icon-img { height: 28px; width: auto; max-width: 68px; object-fit: contain; }
.pill.pill-icon .pill-icon-label { font-size: 13px; font-weight: 600; color: var(--text); }
.pill.pill-icon:hover { background: #fff; }
.pill.pill-icon.active { background: #eef4ff; border-color: var(--accent); color: var(--accent); }
.pill.pill-icon.active .pill-icon-svg { color: var(--accent); }
.pill.pill-icon.active .pill-icon-label { color: var(--accent); }
.info-tip { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--border); color: var(--text-muted); font-size: 10.5px; font-weight: 700; font-style: normal; cursor: help; margin-left: 4px; }

/* ---------- Sub-painel (agrupamento compacto dentro de um panel) ---------- */
.subpanel { background: #fbfbfe; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; margin-top: 14px; }
.subpanel-title { font-size: 12.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 12px; }

/* ---------- Receita (grade de grau) ---------- */
.receita-grade { width: 100%; border-collapse: collapse; }
.receita-grade th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted); padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--border); }
.receita-grade td { padding: 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.receita-grade .rg-label { font-size: 12px; font-weight: 700; white-space: nowrap; }
.receita-grade .rg-label.longe { color: var(--accent); }
.receita-grade .rg-label.perto { color: var(--orange); }
.receita-grade input { width: 100%; padding: 7px 4px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; box-sizing: border-box; text-align: center; }
.receita-grade input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.receita-grade input:disabled { background: #f5f6fb; color: var(--text-muted); }
.receita-grade input.combo-input-active { border-color: var(--accent); }
/* Esconde as setas do <input type="number"> — no mobile elas comem boa parte da largura da
   célula, cortando o valor digitado (ex: "28" aparecendo como só "2"). */
.receita-grade input[type="number"] { -moz-appearance: textfield; }
.receita-grade input[type="number"]::-webkit-inner-spin-button,
.receita-grade input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.receita-grade th, .receita-grade td { padding-left: 3px; padding-right: 3px; }
.receita-grade .combo-wrap { min-width: 0; }
/* DNP comporta 3 dígitos (ex: "32,5") e ACO/Altura 2 (ex: "18") — larguras mínimas por coluna
   pra nenhum dos dois cortar o valor no mobile, onde a tabela toda fica bem apertada. */
.receita-grade th:nth-child(5), .receita-grade td:nth-child(5) { min-width: 46px; }
.receita-grade th:nth-child(6), .receita-grade td:nth-child(6) { min-width: 38px; }
.receita-grade th:nth-child(7), .receita-grade td:nth-child(7) { min-width: 46px; }

/* ---------- Receita (grade de grau) — versão editável, em CSS Grid ---------- */
/* Cada campo (input) existe uma única vez no DOM — só a área do grid muda por breakpoint, via
   grid-template-areas. Desktop: uma linha só por olho (Esf/Cil/Eixo/DNP/ACO/Adição lado a lado).
   Mobile: DNP/ACO/Adição descem pra uma sub-linha própria, abrindo espaço pro Esf/Cil/Eixo ficarem
   maiores (o pedido original era exatamente essa reorganização, só no celular). */
.receita-grade-edit {
  display: grid;
  gap: 6px 6px;
  align-items: center;
  grid-template-columns: 72px repeat(6, 1fr);
  grid-template-areas:
    "hLabel hEsf hCil hEixo hAdicao hDnp hAco"
    "lodLabel lodEsf lodCil lodEixo lodAdicao lodDnp lodAco"
    "loeLabel loeEsf loeCil loeEixo loeAdicao loeDnp loeAco"
    "podLabel podEsf podCil podEixo podNote podNote podNote"
    "poeLabel poeEsf poeCil poeEixo poeNote poeNote poeNote";
}
.receita-grade-edit .rg-cell { min-width: 0; }
.receita-grade-edit .rg-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted); }
.receita-grade-edit .rg-h-wrap { padding-bottom: 6px; border-bottom: 1px solid var(--border); align-self: end; text-align: center; }
.receita-grade-edit .rg-label { font-size: 12px; font-weight: 700; white-space: nowrap; align-self: center; }
.receita-grade-edit .rg-label.longe { color: var(--accent); }
.receita-grade-edit .rg-label.perto { color: var(--orange); }
.receita-grade-edit input { width: 100%; padding: 7px 4px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; box-sizing: border-box; text-align: center; }
.receita-grade-edit input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.receita-grade-edit input:disabled { background: #f5f6fb; color: var(--text-muted); }
.receita-grade-edit input[type="number"] { -moz-appearance: textfield; }
.receita-grade-edit input[type="number"]::-webkit-inner-spin-button,
.receita-grade-edit input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.receita-grade-edit .combo-wrap { min-width: 0; }
/* Rótulos "DNP"/"ACO"/"Adição" acima de cada campo — só aparecem no mobile, quando a sub-linha
   se separa do cabeçalho principal (no desktop o cabeçalho já cumpre esse papel). */
.receita-grade-edit .rg-mlabel { display: none; }
/* "OD"/"OE" que identificam as linhas de DNP/ACO/Adição lá embaixo — só existem no mobile,
   onde essas linhas ficam separadas das linhas LONGE OD/OE (que já têm seu próprio rótulo). */
.receita-grade-edit .rg-mobile-only-label { display: none; }

@media (max-width: 640px) {
  .receita-grade-edit {
    grid-template-columns: 48px repeat(3, 1fr);
    grid-template-areas:
      "hLabel hEsf hCil hEixo"
      "lodLabel lodEsf lodCil lodEixo"
      "loeLabel loeEsf loeCil loeEixo"
      "podLabel podEsf podCil podEixo"
      "podNote podNote podNote podNote"
      "poeLabel poeEsf poeCil poeEixo"
      "poeNote poeNote poeNote poeNote"
      "lodDnpLabel lodAdicao lodDnp lodAco"
      "loeDnpLabel loeAdicao loeDnp loeAco";
    row-gap: 4px;
  }
  .receita-grade-edit .rg-hide-mobile { display: none; }
  /* Com o hífen adicionado ao rótulo ("Longe - OD"), o texto passou a estourar a coluna
     estreita de 48px do mobile e invadir visualmente o campo Esférico ao lado — reduz a
     fonte só aqui pra caber sem cortar. */
  .receita-grade-edit .rg-label { font-size: 9.5px; letter-spacing: -0.01em; }
  .receita-grade-edit .rg-mobile-only-label { display: flex; align-items: center; }
  .receita-grade-edit .rg-mlabel { display: block; font-size: 10px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; text-align: center; }
  /* Espaço liberado pelo DNP/ACO/Adição vai pro Esférico/Cilíndrico/Eixo — campos maiores e mais
     fáceis de ler/tocar, que era o pedido específico dessa reorganização. */
  .receita-grade-edit .combo-input, .receita-grade-edit input { font-size: 16px; padding: 10px 6px; }
  .receita-grade-edit .rg-cell-narrow input, .receita-grade-edit .rg-cell-narrow .combo-input { font-size: 13.5px; padding: 7px 4px; }
}

/* ---------- Item search (produtos) ---------- */
.item-search-row { display: grid; grid-template-columns: 1fr 90px 130px auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.item-search-row .form-row { margin-bottom: 0; }
/* Variante usada em Abrir O.S./Nova Venda, que ganham o botão "+" de cadastro rápido de
   produto entre a busca e a Qtde — uma coluna estreita a mais do que a base acima. */
.item-search-row.item-search-row-produto { grid-template-columns: 1fr 44px 90px 130px 100px auto; }

/* Tablet (2026-09-22): entre 641px e 900px a barra lateral já vira menu hambúrguer (ver
   `@media (max-width: 900px) { .sidebar ... }` acima), mas a faixa "mobile" que empilha essa
   linha em 2 colunas só começa em 640px — sobra uma largura intermediária onde a grade de 6
   colunas fixas (Buscar produto/+/Qtde/Valor Unit./Subtotal/Incluir item) não cabe, e "Buscar
   produto" (a única coluna flexível) fica espremida numa fração mínima da largura. O texto das
   opções do dropdown herda essa largura e quebra praticamente letra por letra — reportado pelo
   usuário num tablet. Reusa a mesma grade de 2 colunas do celular só nesta faixa intermediária. */
@media (min-width: 641px) and (max-width: 900px) {
  .item-search-row.item-search-row-produto { grid-template-columns: 1fr 1fr; }
  .item-search-row.item-search-row-produto > :first-child { grid-column: 1 / -1; }
  .item-search-row.item-search-row-produto > * { min-width: 0; }
  .item-search-row.item-search-row-produto #incluir-item { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d7dceb; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: #b9c1d6; }

/* ---------- Mobile overrides (mantido no final do arquivo de propósito: precisa vencer
   as regras base acima, que têm a mesma especificidade e viriam depois na cascata) ---------- */
@media (max-width: 640px) {
  #content { padding: 14px; }
  .topbar { padding: 12px 14px; font-size: 16px; gap: 8px; }
  .topbar #page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .panel { padding: 14px; }
  .modal { padding: 18px; }
  .form-grid, .cliente-info-grid, .cliente-preview-grid, .checkbox-grid { grid-template-columns: minmax(0, 1fr); }
  .item-search-row { grid-template-columns: 1fr; }
  /* A variante "-produto" (Abrir O.S./Nova Venda, com o botão "+" de cadastro rápido) tem uma
     regra de desktop mais específica (duas classes) que a de cima — sem repetir as duas classes
     aqui, ela vence e mantém as 6 colunas fixas no mobile, estourando a largura da tela. Em 2
     colunas: Buscar produto ocupa a linha toda; "+"/Qtde dividem uma linha; Valor Unit./Subtotal
     dividem a próxima; Incluir item ocupa a linha toda por último.
  */
  .item-search-row.item-search-row-produto { grid-template-columns: 1fr 1fr; }
  .item-search-row.item-search-row-produto > :first-child { grid-column: 1 / -1; }
  /* Bug clássico do Grid: uma coluna "1fr" não encolhe abaixo da largura natural do conteúdo
     (min-width:auto por padrão) — mesmo um input com width:100% "empurra" a coluna e estoura a
     linha pra fora da tela. Confirmado ao vivo (a linha tentava ficar com 376px numa caixa de
     308px). min-width:0 nos itens da grade resolve, deixando o width:100% valer de verdade. */
  .item-search-row > * { min-width: 0; }
  .item-search-row #incluir-item { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .toolbar input[type="text"] { width: 100%; }
  .cards-grid, .license-cards { grid-template-columns: 1fr; }
  /* No celular os cartões de resumo ficam 2 por linha, só com o número (sem ícone), pra não empurrar a lista pra baixo. */
  .stat-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 12px 14px; }
  .stat-card:has(.sc-icon) { display: block; }
  .stat-card .sc-icon { display: none; }
  .stat-card .sc-value { font-size: 18px; }
  .totais-os { max-width: 100%; }
  /* Linhas de Desconto/Acréscimo têm 2 inputs com largura fixa em pixels (definida inline no
     HTML) — numa tela estreita isso não cabe numa linha só e empurra pra fora do quadro. Deixa
     quebrar e encolhe os campos só nesta faixa (precisa de !important pra vencer o inline). */
  .totais-os-row { flex-wrap: wrap; row-gap: 6px; }
  .totais-os-row input { width: 72px !important; }
  .settings-layout { grid-template-columns: 1fr; }
  .vendas-acum-grid { grid-template-columns: 1fr; }
  /* Lista de Clientes: mantém só Nome, Telefone e Status — o nome já é o link para a ficha. */
  .tbl-clientes-lista th:nth-child(2), .tbl-clientes-lista td:nth-child(2),
  .tbl-clientes-lista th:nth-child(4), .tbl-clientes-lista td:nth-child(4),
  .tbl-clientes-lista th:nth-child(5), .tbl-clientes-lista td:nth-child(5),
  .tbl-clientes-lista th:nth-child(7), .tbl-clientes-lista td:nth-child(7) { display: none; }
  .tbl-clientes-lista th, .tbl-clientes-lista td { padding: 10px 8px; }
  .toolbar-actions { width: 100%; margin-left: 0; flex-direction: column; }
  .toolbar-actions .btn { width: 100%; justify-content: center; }
  /* Linha de resumo (Nº O.S./Venda/Orçamento, datas, valor) dentro dos cards: em telas estreitas,
     os 4 campos não cabem numa linha só — deixa quebrar em vez de forçar rolagem lateral do card. */
  .via-info { display: flex; flex-wrap: wrap; row-gap: 2px; }
  .via-info tr { display: contents; }
  .via-info td { display: block; width: auto; padding: 2px 10px 2px 0; white-space: nowrap; }
  /* Cards de histórico (Entrada de Produtos, etc.): mesmo problema do .via-info — em telas
     estreitas os campos (fornecedor, data, qtd., valor, badge) não cabem numa linha só e
     empurravam o badge pra fora da tela, exigindo rolagem lateral. Deixa quebrar em vez disso. */
  .historico-card-header { flex-wrap: wrap; row-gap: 6px; }
  .historico-card-header > span:has(+ .badge), .historico-card-header .badge { margin-left: 0; }
  .historico-card-header > span[style*="margin-left:auto"] { margin-left: 0 !important; }

  /* Busca de produto (Abrir O.S./Venda/Orçamento) e tabelas de itens — no mobile o texto ficava
     pequeno demais pra ler (nome do produto, preço, itens já incluídos). Aumenta só nesta faixa,
     sem mexer no tamanho usado no desktop. */
  .form-row .combo-input { font-size: 16px; padding: 11px 12px; }
  .combo-option-rich { padding: 12px 14px; }
  .combo-option-rich .co-nome { font-size: 15px; }
  .combo-option-rich .co-sub { font-size: 13.5px; }
  .combo-option-rich .co-preco { font-size: 15px; }
  table { font-size: 15px; }
  /* Tabela de itens: agora cada coluna fica em sua própria linha (ver regras abaixo), então o
     campo de Val. Unit. não precisa mais dividir espaço com Qtde/Total — só não pode ficar tão
     largo que estoure a linha. 130px cabe "R$ 1.000,00" inteiro sem cortar o final. */
  .item-preco-input { width: 130px !important; padding: 6px 8px; }
  /* Em vez de rolagem lateral, cada coluna vira sua própria linha dentro do item — com uma
     legenda antes do valor (Qtde/Val. Unit./Total), já que o cabeçalho da tabela some no mobile. */
  .tbl-itens-produtos thead { display: none; }
  .tbl-itens-produtos, .tbl-itens-produtos tbody { display: block; width: 100%; }
  .tbl-itens-produtos tr { display: flex; flex-direction: column; gap: 4px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
  .tbl-itens-produtos tr:last-child { border-bottom: none; }
  .tbl-itens-produtos td { padding: 0; border: none; }
  .tbl-itens-produtos td:first-child::before { content: "Descrição: "; color: var(--text-muted); font-weight: 600; }
  .tbl-itens-produtos td:nth-child(2)::before { content: "Qtde: "; color: var(--text-muted); font-weight: 600; }
  .tbl-itens-produtos td:nth-child(3)::before { content: "Val. Unit.: "; color: var(--text-muted); font-weight: 600; }
  .tbl-itens-produtos td:nth-child(4)::before { content: "Total: "; color: var(--text-muted); font-weight: 600; }
  .tbl-itens-produtos td:last-child:not(:only-child) { text-align: right; }
}

/* Contas Parceiras (Administração): inicial da conta num quadrado, igual ao seletor de lojas, e a
   etiqueta "Contrato pendente" na própria linha. */
.conta-celula { display: flex; align-items: center; gap: 11px; }
.conta-inicial {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--btn-gradient); color: #fff; font-weight: 800; font-size: 14px;
}
.conta-nome { font-weight: 600; color: #0c1541; }
.conta-contrato-pendente { font-size: 10px; margin-left: 4px; vertical-align: 1px; background: var(--orange-bg) !important; color: #b45309 !important; }

/* ---------- Central de Ajuda (refeita em 2026-09-25) ----------
   Início com busca e assuntos, página de categoria e artigo passo a passo com prints
   (public/img/ajuda, gerados por scripts/prints-ajuda). Mesma identidade do login: azul-noite e
   o degradê ciano → azul → roxo. Os números laranja (.ajuda-num) são os mesmos dos prints. */
.ajuda-hero {
  position: relative; overflow: visible; border-radius: 20px; padding: 40px 44px 32px; margin-bottom: 30px; color: #fff;
  background:
    radial-gradient(600px 260px at 100% 0%, rgba(18, 181, 165, 0.32), transparent 70%),
    radial-gradient(520px 260px at 0% 100%, rgba(0, 194, 255, 0.22), transparent 70%),
    linear-gradient(135deg, #06205a, #000e34 60%);
  box-shadow: 0 16px 40px rgba(0, 14, 52, 0.25);
}
.ajuda-hero::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #00c2ff, #12b5a5 55%, #1f6bff);
}
.ajuda-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8fd8ff; }
.ajuda-hero-eyebrow .icon { width: 15px; height: 15px; }
.ajuda-hero h2 { margin: 10px 0 6px; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.ajuda-hero h2 span { color: #19c6f7; }
.ajuda-hero > p { margin: 0 0 22px; color: #c9d6f5; font-size: 15px; max-width: 620px; }
.ajuda-busca { position: relative; max-width: 720px; }
.ajuda-busca > .icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #7b88a8; z-index: 1; }
.ajuda-busca input {
  width: 100%; padding: 16px 18px 16px 50px; border-radius: 14px; border: 2px solid transparent; font-size: 15.5px;
  font-family: inherit; color: #0c1541; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); outline: none;
}
.ajuda-busca input:focus { border-color: #19c6f7; }
.ajuda-busca-resultados {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; max-height: 420px; overflow-y: auto;
  background: #fff; border-radius: 14px; padding: 6px; box-shadow: 0 20px 50px rgba(0, 14, 52, 0.3); color: var(--text);
}
.ajuda-busca-resultados.aberta { display: block; }
.ajuda-busca-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; }
.ajuda-busca-item:hover { background: #f1f5ff; }
.ajuda-busca-item strong { display: block; font-size: 14px; color: #0c1541; }
.ajuda-busca-item small { display: block; font-size: 12.5px; color: var(--text-muted); }
.ajuda-busca-item-icone { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent); }
.ajuda-busca-item-icone .icon { width: 17px; height: 17px; }
.ajuda-busca-vazio { padding: 16px; font-size: 13.5px; color: var(--text-muted); }
.ajuda-populares { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; }
.ajuda-populares > span { color: #9fb1dc; margin-right: 2px; }
.ajuda-populares a {
  color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 999px; font-weight: 500;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); transition: background 0.12s;
}
.ajuda-populares a:hover { background: rgba(255, 255, 255, 0.2); }

.ajuda-secao-titulo { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; }
.ajuda-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-bottom: 26px; }
.ajuda-categoria {
  display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radius); text-decoration: none; color: inherit;
  background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ajuda-categoria:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #c9d6f5; }
.ajuda-categoria-icone {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
  background: var(--btn-gradient); color: #fff; box-shadow: 0 6px 14px rgba(11, 122, 156, 0.25);
}
.ajuda-categoria-icone .icon { width: 21px; height: 21px; }
.ajuda-categoria-icone.grande { width: 56px; height: 56px; border-radius: 16px; margin: 0; }
.ajuda-categoria-icone.grande .icon { width: 26px; height: 26px; }
.ajuda-categoria-titulo { font-size: 16px; font-weight: 700; color: #0c1541; letter-spacing: -0.01em; }
.ajuda-categoria-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.45; flex: 1; }
.ajuda-categoria-qtd { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent); margin-top: 6px; }
.ajuda-categoria-qtd .icon { width: 14px; height: 14px; }

.ajuda-cta {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: var(--radius); margin-bottom: 20px;
  background: linear-gradient(90deg, #eef4ff, #f5f0ff); border: 1px solid #dbe4ff;
}
.ajuda-cta-icone { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--accent); box-shadow: var(--shadow); }
.ajuda-cta-icone .icon { width: 22px; height: 22px; }
.ajuda-cta-textos { flex: 1; display: flex; flex-direction: column; }
.ajuda-cta-textos strong { color: #0c1541; font-size: 15px; }
.ajuda-cta-textos span { color: var(--text-muted); font-size: 13.5px; }

.ajuda-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 16px; color: var(--text-muted); }
.ajuda-trilha a { color: var(--accent); font-weight: 600; text-decoration: none; }
.ajuda-trilha a:hover { text-decoration: underline; }
.ajuda-trilha .icon { width: 14px; height: 14px; color: var(--text-faint); }
.ajuda-cat-cabecalho { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ajuda-cat-cabecalho h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #0c1541; }
.ajuda-cat-cabecalho p { margin: 2px 0 0; color: var(--text-muted); }
.ajuda-artigos-lista { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 22px; overflow: hidden; }
.ajuda-artigo-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border); transition: background 0.12s; }
.ajuda-artigo-item:last-child { border-bottom: none; }
.ajuda-artigo-item:hover { background: #f7f9ff; }
.ajuda-artigo-item > .icon { width: 18px; height: 18px; color: var(--text-faint); }
.ajuda-artigo-item-icone { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent); }
.ajuda-artigo-item-icone .icon { width: 18px; height: 18px; }
.ajuda-artigo-item-textos { flex: 1; display: flex; flex-direction: column; }
.ajuda-artigo-item-textos strong { color: #0c1541; font-size: 15px; }
.ajuda-artigo-item-textos small { color: var(--text-muted); font-size: 13px; margin-top: 2px; }

.ajuda-artigo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.ajuda-artigo { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 34px 40px; }
.ajuda-artigo-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.ajuda-artigo-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ajuda-artigo-meta .icon { width: 15px; height: 15px; color: var(--accent); }
.ajuda-artigo h1 { margin: 12px 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: #0c1541; line-height: 1.2; }
.ajuda-artigo-resumo { margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--border); font-size: 16px; color: var(--text-muted); }
.ajuda-artigo-corpo { font-size: 15px; line-height: 1.7; color: #1f2a4d; }
.ajuda-artigo-corpo p { margin: 0 0 14px; }
.ajuda-lista { margin: 0 0 16px; padding-left: 20px; }
.ajuda-lista li { margin-bottom: 8px; }
.ajuda-num {
  display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%;
  background: #ff7a00; color: #fff; font-size: 12px; font-weight: 800; vertical-align: 1px; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, 0.2);
}
.ajuda-passos { list-style: none; counter-reset: passo; margin: 0 0 18px; padding: 0; }
.ajuda-passos > li { counter-increment: passo; position: relative; padding: 0 0 22px 52px; }
.ajuda-passos > li::before {
  content: counter(passo); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #fff;
  background: var(--btn-gradient); box-shadow: 0 4px 10px rgba(11, 122, 156, 0.3);
}
.ajuda-passos > li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: linear-gradient(180deg, #c9d6f5, transparent); }
.ajuda-passo-titulo { font-size: 16.5px; font-weight: 700; color: #0c1541; margin: 3px 0 4px; letter-spacing: -0.01em; }
.ajuda-passo-texto { color: #2d3858; }
.ajuda-print { margin: 14px 0 18px; }
.ajuda-print-zoom {
  position: relative; display: block; width: 100%; padding: 0; cursor: zoom-in; overflow: hidden;
  border: 1px solid #d7dfef; border-radius: 12px; background: #f4f6fb; box-shadow: 0 8px 24px rgba(12, 21, 65, 0.10);
}
.ajuda-print-zoom img { display: block; width: 100%; height: auto; }
.ajuda-print-lupa {
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
  border-radius: 999px; background: rgba(0, 14, 52, 0.78); color: #fff; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity 0.15s;
}
.ajuda-print-lupa .icon { width: 13px; height: 13px; }
.ajuda-print-zoom:hover .ajuda-print-lupa { opacity: 1; }
.ajuda-print figcaption { font-size: 12.5px; color: var(--text-muted); text-align: center; margin-top: 8px; }
.ajuda-aviso { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; margin: 6px 0 16px; font-size: 14px; line-height: 1.6; }
.ajuda-aviso strong { display: block; font-size: 13px; letter-spacing: 0.02em; margin-bottom: 1px; }
.ajuda-aviso-icone { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ajuda-aviso-icone .icon { width: 17px; height: 17px; }
.ajuda-aviso.dica { background: #eef6ff; border: 1px solid #cfe3ff; color: #1b3a70; }
.ajuda-aviso.dica .ajuda-aviso-icone { background: #d3f0f2; color: #0b7a9c; }
.ajuda-aviso.dica strong { color: #0b7a9c; }
.ajuda-aviso.atencao { background: #fff8ed; border: 1px solid #fbe3b4; color: #6b3f00; }
.ajuda-aviso.atencao .ajuda-aviso-icone { background: #fdecc8; color: #c26a00; }
.ajuda-aviso.atencao strong { color: #b45309; }
.ajuda-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 600; color: #0c1541; }
.ajuda-feedback-ok { display: inline-flex; align-items: center; gap: 8px; color: var(--green); }
.ajuda-feedback-ok .icon { width: 18px; height: 18px; }
.ajuda-artigo-lateral { position: sticky; top: 0; display: flex; flex-direction: column; gap: 16px; }
.ajuda-lateral-bloco { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.ajuda-lateral-bloco.suporte { background: linear-gradient(160deg, #06205a, #000e34); border-color: transparent; color: #c9d6f5; }
.ajuda-lateral-bloco.suporte .ajuda-lateral-titulo { color: #fff; }
.ajuda-lateral-bloco.suporte p { margin: 4px 0 12px; font-size: 13.5px; }
.ajuda-lateral-titulo { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.ajuda-lateral-bloco a:not(.btn) { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; font-size: 13.5px; font-weight: 500; color: #1f2a4d; text-decoration: none; border-top: 1px solid var(--border); }
.ajuda-lateral-bloco a:not(.btn):first-of-type { border-top: none; }
.ajuda-lateral-bloco a:not(.btn):hover { color: var(--accent); }
.ajuda-lateral-bloco a:not(.btn) .icon { width: 15px; height: 15px; margin-top: 3px; color: var(--text-faint); }
.ajuda-lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 40px 24px;
  background: rgba(0, 8, 30, 0.82); backdrop-filter: blur(3px); cursor: zoom-out; animation: ajuda-aparece 0.15s ease-out;
}
.ajuda-lightbox figure { margin: 0; max-width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.ajuda-lightbox img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); background: #fff; cursor: default; }
.ajuda-lightbox figcaption { color: #dbe4ff; font-size: 14px; margin-top: 12px; text-align: center; }
.ajuda-lightbox-fechar { position: absolute; top: 16px; right: 18px; background: none; border: none; color: #fff; cursor: pointer; }
.ajuda-lightbox-fechar .icon { width: 30px; height: 30px; }
@keyframes ajuda-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1100px) {
  .ajuda-artigo-layout { grid-template-columns: 1fr; }
  .ajuda-artigo-lateral { position: static; }
}
@media (max-width: 640px) {
  .ajuda-hero { padding: 28px 20px 24px; border-radius: 16px; }
  .ajuda-hero h2 { font-size: 24px; }
  .ajuda-artigo { padding: 22px 18px; }
  .ajuda-artigo h1 { font-size: 22px; }
  .ajuda-passos > li { padding-left: 44px; }
  .ajuda-cta { flex-direction: column; align-items: flex-start; }
}

/* ---------- Formulários longos (Cliente, Venda, Orçamento, O.S.) — 2026-09-25 ----------
   A página do formulário é reconhecida pela barra .form-acoes-fixas (só existe nessas 4 telas).
   1) Cada seção com título ganha um número (1, 2, 3...), guiando o preenchimento de cima pra baixo.
   2) A barra com Cancelar/Salvar fica sempre visível no rodapé da tela: antes era preciso rolar
      até o fim de uma página de mais de 3.000 px (O.S.) pra salvar. */
#content:has(.form-acoes-fixas) { counter-reset: etapa-form; }
#content:has(.form-acoes-fixas) .panel > .panel-title:first-child {
  display: flex; align-items: center; gap: 10px; color: #0c1541; font-size: 13px; letter-spacing: 0.05em; margin-bottom: 18px;
}
#content:has(.form-acoes-fixas) .panel > .panel-title:first-child::before {
  counter-increment: etapa-form; content: counter(etapa-form);
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--btn-gradient); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: 0; box-shadow: 0 3px 8px rgba(11, 122, 156, 0.28);
}
.modal-actions.form-acoes-fixas {
  position: sticky; bottom: 12px; z-index: 25; margin: 8px 0 0; padding: 12px 16px;
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 -2px 6px rgba(12, 21, 65, 0.04), 0 10px 30px rgba(12, 21, 65, 0.14);
}
.modal-actions.form-acoes-fixas .btn { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 640px) {
  .modal-actions.form-acoes-fixas { bottom: 8px; padding: 10px; }
  .modal-actions.form-acoes-fixas .btn { flex: 1; justify-content: center; }
}

/* ---------- Empresa e Configurações — 2026-09-25 ----------
   A página era um bloco único; agora: identidade + plano, lojas, dados cadastrais e configurações.
   Os cartões do plano deixaram o verde (que não era da marca) e usam os cartões de resumo. */
.empresa-header { align-items: center; }
.empresa-logo { background: var(--btn-gradient); box-shadow: 0 8px 20px rgba(11, 122, 156, 0.28); }
.empresa-licenca { margin: 4px 0 0; }
.empresa-licenca .sc-value { font-size: 18px; }
#content .panel > .panel-title:has(> .icon) { display: flex; align-items: center; gap: 8px; }
#content .panel > .panel-title > .icon { width: 16px; height: 16px; color: var(--accent); }
.settings-layout { grid-template-columns: 240px 1fr; }
.settings-tabs { position: sticky; top: 0; align-self: start; padding-right: 10px; }
.settings-tabs button { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 1px 0; }
.settings-tabs button.active { background: var(--accent-light); box-shadow: inset 3px 0 0 var(--accent); border-radius: 0 8px 8px 0; }
.settings-tabs-grupo-titulo { padding: 16px 12px 5px; color: #7a86a6; }
.settings-content { padding: 4px 8px 4px 28px; min-height: 420px; }
.settings-section-title {
  background: none; padding: 0 0 8px; border-bottom: 1px solid var(--border); border-radius: 0;
  font-size: 13px; color: #0c1541; letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-tabs { position: static; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 10px; gap: 4px; }
  .settings-tabs-grupo-titulo { display: none; }
  .settings-tabs button.active { box-shadow: none; border-radius: 8px; }
  .settings-content { padding: 16px 0 0; }
}

/* Janelas (modais) com o mesmo acabamento do resto (2026-09-25): fundo azul-noite desfocado,
   cantos mais arredondados, título firme com filete da marca e ações separadas por uma linha. */
.modal-backdrop { background: rgba(0, 8, 30, 0.55); backdrop-filter: blur(3px); }
.modal { border-radius: 18px; padding: 26px 28px; box-shadow: 0 24px 60px rgba(0, 14, 52, 0.28); animation: modal-entra 0.16s ease-out; }
.modal > h3:first-child {
  font-size: 19px; font-weight: 800; color: #0c1541; letter-spacing: -0.02em;
  margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); position: relative;
}
.modal > h3:first-child::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; border-radius: 2px; background: var(--brand-gradient); }
.modal .modal-actions { border-top: 1px solid var(--border); padding-top: 16px; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal { animation: none; } }
/* Menu suspenso que abre para cima quando não cabe embaixo (posicionarMenuDd em app.js). */
.dd-btn.para-cima .dd-btn-menu { top: auto; bottom: calc(100% + 6px); }

/* Relatórios (Financeiro e Despesas): os totais do período na TELA viram cartões de resumo.
   Só CSS, escopado à pré-visualização (#rel-...-preview): o mesmo HTML vai pro PDF, que tem os
   próprios estilos internos (padrão .via) e continua exatamente igual. 2026-09-25. */
[id^="rel-"][id$="-preview"] .cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 4px 0 18px;
}
[id^="rel-"][id$="-preview"] .cards .card {
  position: relative; overflow: hidden; cursor: default; padding: 16px 18px 14px; transform: none;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
[id^="rel-"][id$="-preview"] .cards .card:hover { transform: none; box-shadow: var(--shadow); }
[id^="rel-"][id$="-preview"] .cards .card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-gradient);
}
[id^="rel-"][id$="-preview"] .cards .card .label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
}
[id^="rel-"][id$="-preview"] .cards .card .valor {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #0c1541; margin-top: 4px; font-variant-numeric: tabular-nums;
}
[id^="rel-"][id$="-preview"] .cards .card .muted { margin-top: 2px; }

/* Ficha do cliente: ações agrupadas (Atendimento / Cadastro) e as irreversíveis em "Mais opções". */
.cliente-sidebar { gap: 8px; }
.cliente-sidebar > .btn { justify-content: flex-start; }
.cliente-acoes-titulo { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin: 10px 2px 0; }
.cliente-mais-opcoes { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 2px 8px; }
.cliente-mais-opcoes summary {
  display: flex; align-items: center; gap: 6px; padding: 7px 2px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.cliente-mais-opcoes summary::-webkit-details-marker { display: none; }
.cliente-mais-opcoes summary .icon { width: 16px; height: 16px; }
.cliente-mais-opcoes[open] { padding-bottom: 8px; }
.cliente-mais-opcoes[open] .btn { width: 100%; justify-content: flex-start; margin-top: 6px; }
.cliente-mais-opcoes .cliente-apagar { color: var(--red); }
.cliente-mais-opcoes .cliente-apagar:hover { background: var(--red-bg); color: var(--red); }
.cliente-voltar { font-size: 13px; margin-top: 8px; text-align: center; }

/* Lyros Zap em abas (2026-09-25): Conexão, Conversas, Mensagens automáticas, Envios e testes.
   As abas só escondem seções (atributo hidden); o !important é porque a barra de salvar e os
   blocos têm display próprio, que venceria o "hidden" padrão do navegador. */
.zap-aba[hidden], .zap-salvar[hidden] { display: none !important; }
.zap-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.zap-topo .subnav-tabs { margin-bottom: 0; }
.subnav-tabs button {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; font-size: 13.6px; font-weight: 600; font-family: inherit;
  color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.subnav-tabs button:hover { color: var(--text); }
.subnav-tabs button.active { color: var(--accent); background: var(--card-bg); box-shadow: var(--shadow-xs); }
.subnav-tabs button .icon { width: 16px; height: 16px; }
.zap-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.zap-status.on { background: var(--green-bg); color: var(--green); }
.zap-status.off { background: var(--orange-bg); color: #b45309; }
.zap-status-ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); }
.zap-status.on .zap-status-ponto { animation: zap-pulsa 2s ease-in-out infinite; }
@keyframes zap-pulsa { 50% { box-shadow: 0 0 0 5px rgba(5, 150, 105, 0.15); } }
.zap-aba-intro { margin-bottom: 16px; }
.zap-salvar { justify-content: space-between; }
.zap-salvar-dica { font-size: 12.5px; }
@media (max-width: 640px) { .zap-salvar-dica { display: none; } }
/* Painel com a barra de salvar fixa dentro dele (ex.: Lyros Zap): o overflow-x do .panel criaria um
   contêiner de rolagem próprio e a barra "sticky" não flutuaria na tela. */
.panel:has(.form-acoes-fixas) { overflow: visible; }

/* PDF no celular/tablet (mostrarPdfNoCelular): botões grandes, um embaixo do outro. */
.pdf-movel-acoes { display: flex; flex-direction: column; gap: 10px; }
.pdf-movel-acoes .btn { justify-content: center; padding: 13px 16px; font-size: 15px; text-decoration: none; }

/* =============================================================
   Movimento do sistema (2026-09-25, a pedido do usuário)
   Mais contido que o site: é ferramenta de trabalho do dia inteiro. As animações das telas
   do dia a dia duram até ~0,3 s e nada espera a animação para funcionar. Com "reduzir
   movimento" ligado no aparelho, tudo fica parado (bloco no-preference abaixo).
   ============================================================= */
@keyframes sis-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sis-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sis-traco { to { stroke-dashoffset: 0; } }
@keyframes sis-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes sis-janela { from { opacity: 0; transform: scale(.93); } to { opacity: 1; transform: none; } }
@keyframes sis-esq-brilho { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes login-faixa { from { transform: scaleY(0); } to { transform: none; } }
@keyframes login-foto { from { opacity: 0; transform: scale(1.08); } to { opacity: .9; transform: none; } }
@keyframes login-foco { from { opacity: 0; filter: blur(10px); transform: translateY(12px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes login-slogan { from { opacity: 0; letter-spacing: 16px; transform: translateX(-12px); } to { opacity: 1; letter-spacing: 6px; transform: none; } }
@keyframes login-card { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes login-filete { from { transform: scaleX(0); } to { transform: none; } }
@keyframes login-deriva { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4%, -3%, 0) scale(1.08); } }
@keyframes login-texto-vivo { to { background-position: -250% 0; } }

/* Esqueleto de carregamento: aparece só se a tela demorar mais de ~0,2 s */
.esqueleto { animation: sis-aparece .25s ease .2s both; }
.esq-titulo, .esq-cards > div, .esq-linha {
  border-radius: 10px;
  background: linear-gradient(90deg, #eceff6 0%, #f7f8fc 45%, #eceff6 90%);
  background-size: 200% 100%;
  animation: sis-esq-brilho 1.4s linear infinite;
}
.esq-titulo { height: 26px; width: 240px; max-width: 60%; margin-bottom: 24px; }
.esq-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.esq-cards > div { height: 96px; border-radius: 16px; }
.esq-painel { background: #fff; border-radius: 16px; padding: 24px; box-shadow: var(--shadow-xs); }
.esq-linha { height: 14px; margin: 16px 0; }
.esq-linha:nth-child(1) { width: 38%; margin-top: 0; }
.esq-linha:nth-child(2) { width: 92%; }
.esq-linha:nth-child(3) { width: 84%; }
.esq-linha:nth-child(4) { width: 70%; margin-bottom: 0; }
@media (max-width: 640px) { .esq-cards { grid-template-columns: 1fr 1fr; } .esq-cards > div:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; }
  .esq-titulo, .esq-cards > div, .esq-linha { animation: none; }
}

/* Destaque "crescer" do login com degradê (parado sem movimento) */
.login-visual-headline span {
  background: linear-gradient(90deg, #19c6f7 0%, #5eead4 30%, #7aa7ff 55%, #19c6f7 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  /* Troca de tela: o conteúdo novo entra suave, em pequena cascata. "backwards" para não
     deixar transform nenhum depois (menus fixos e barras "sticky" continuam normais). */
  #content.tela-entra > * { animation: sis-entra .3s cubic-bezier(.16, 1, .3, 1) backwards; }
  #content.tela-entra > :nth-child(2) { animation-delay: .04s; }
  #content.tela-entra > :nth-child(3) { animation-delay: .08s; }
  #content.tela-entra > :nth-child(n+4) { animation-delay: .12s; }

  /* Painel: as linhas do gráfico se desenham, a área aparece e o ponto de hoje "pinga" no fim */
  .vac-linha { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sis-traco 1.1s cubic-bezier(.65, 0, .35, 1) .2s forwards; }
  .vac-linha.anterior { animation-delay: .05s; }
  .vac-area { animation: sis-aparece .8s ease .6s backwards; }
  .vac-ponto { transform-box: fill-box; transform-origin: center; animation: sis-pop .45s cubic-bezier(.34, 1.56, .64, 1) 1.2s backwards; }

  /* Janelas: nascem de onde foram abertas (o JS põe o transform-origin no ponto do clique) */
  .modal-backdrop { animation: sis-aparece .18s ease both; }
  .modal { animation: sis-janela .26s cubic-bezier(.16, 1, .3, 1); }

  /* Login: faixa se desenha, foto entra com leve zoom, título sai do desfoque, slogan entra
     linha a linha e o card sobe com os campos em cascata. O fundo tem um brilho que deriva. */
  .login-visual { animation: none; }
  .login-faixa { transform-origin: top; animation: login-faixa 1s cubic-bezier(.65, 0, .35, 1) both; }
  .login-foto { animation: login-foto 2.4s cubic-bezier(.16, 1, .3, 1) both; }
  .login-fundo::before {
    content: ""; position: absolute; inset: -10%;
    background: radial-gradient(40% 35% at 30% 72%, rgba(29, 107, 255, .22), transparent 70%),
                radial-gradient(35% 30% at 72% 18%, rgba(18, 181, 165, .18), transparent 70%);
    animation: login-deriva 18s ease-in-out infinite alternate;
  }
  .login-visual-logo { animation: login-foco .9s cubic-bezier(.16, 1, .3, 1) .1s both; }
  .login-visual-headline { animation: login-foco 1s cubic-bezier(.16, 1, .3, 1) .25s both; }
  .login-visual-headline span { animation: login-texto-vivo 9s linear infinite; }
  .login-visual-sub { animation: sis-entra .9s cubic-bezier(.16, 1, .3, 1) .45s both; }
  .login-visual-slogan > div { animation: login-slogan 1s cubic-bezier(.16, 1, .3, 1) both; }
  .login-visual-slogan > .a { animation-delay: .6s; }
  .login-visual-slogan > .b { animation-delay: .72s; }
  .login-visual-slogan > .c { animation-delay: .84s; }
  .login-card { animation: login-card .9s cubic-bezier(.16, 1, .3, 1) .2s both; }
  .login-card::before { transform-origin: left; animation: login-filete 1s cubic-bezier(.65, 0, .35, 1) .75s both; }
  .login-card-cabecalho > *, .login-card form > * { animation: sis-entra .6s cubic-bezier(.16, 1, .3, 1) backwards; }
  .login-card-cabecalho > :nth-child(1) { animation-delay: .45s; }
  .login-card-cabecalho > :nth-child(2) { animation-delay: .52s; }
  .login-card-cabecalho > :nth-child(3) { animation-delay: .59s; }
  .login-card form > :nth-child(1) { animation-delay: .66s; }
  .login-card form > :nth-child(2) { animation-delay: .73s; }
  .login-card form > :nth-child(3) { animation-delay: .8s; }
  .login-card form > :nth-child(4) { animation-delay: .87s; }
  .login-card form > :nth-child(n+5) { animation-delay: .94s; }
}

/* ---------- Guia "Deixe sua clínica pronta" (renderPrimeirosPassos / painelGuiaCardHtml em app.js) ---------- */
.guia-rotulo { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* Cartão no Painel */
.guia-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 18px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.guia-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-gradient); }
.guia-card-ico { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--btn-gradient); }
.guia-card-ico svg { width: 22px; height: 22px; }
.guia-card-texto { flex: 1; min-width: 0; }
.guia-card-texto strong { display: block; font-size: 16px; margin: 2px 0; }
.guia-card-texto p { margin: 0; font-size: 13px; color: var(--text-muted); }
.guia-card-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.guia-barra { height: 6px; margin-top: 10px; max-width: 340px; border-radius: 6px; background: #eef1f7; overflow: hidden; }
.guia-barra i { display: block; height: 100%; border-radius: 6px; background: var(--brand-gradient); transition: width .6s ease; }
.guia-card--pronto .guia-card-ico { background: var(--green); }
.guia-card--pronto::before { background: var(--green); }

/* Página do guia */
.guia { max-width: 900px; }
.guia-topo { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; margin-bottom: 18px;
  border-radius: var(--radius); color: #fff; background: radial-gradient(420px 180px at 90% 0%, rgba(18, 181, 165, .32), transparent 70%), radial-gradient(420px 200px at 0% 100%, rgba(31, 107, 255, .35), transparent 70%), var(--sidebar-bg); }
.guia-topo .guia-rotulo { color: #7fb0ff; }
.guia-topo h2 { margin: 4px 0 6px; font-size: 22px; color: #fff; }
.guia-topo p { margin: 0; font-size: 14px; color: #c3cee6; max-width: 540px; line-height: 1.55; }
.guia-progresso { flex-shrink: 0; text-align: center; }
.guia-progresso p { margin: 6px 0 0; font-size: 12px; color: #c3cee6; }
.guia-progresso-anel { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#34d399 calc(var(--pct) * 1%), rgba(255, 255, 255, .12) 0); }
.guia-progresso-anel span { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center; padding-top: 22px; background: var(--sidebar-bg); font-size: 24px; font-weight: 700; color: #fff; }
.guia-progresso-anel small { font-size: 13px; color: #93a3c8; font-weight: 600; }

.guia-etapa { display: flex; gap: 16px; padding: 20px 22px; margin-bottom: 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.guia-etapa-num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; background: var(--sidebar-bg); }
.guia-etapa-num svg { width: 18px; height: 18px; }
.guia-etapa.feito .guia-etapa-num { background: var(--green); }
.guia-etapa.feito { border-color: #cdeedf; }
.guia-etapa-corpo { flex: 1; min-width: 0; }
.guia-etapa-titulo { display: flex; align-items: center; gap: 10px; }
.guia-etapa-titulo h3 { margin: 4px 0 4px; font-size: 16px; }
.guia-etapa-corpo > p { margin: 0 0 10px; font-size: 14px; color: var(--text-muted); line-height: 1.55; }
.guia-opcional { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #f1f3f9; color: var(--text-muted); }
.guia-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.guia-ajuda { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); text-decoration: none; margin-left: 4px; }
.guia-ajuda svg { width: 15px; height: 15px; }
.guia-retorno { font-size: 13px; color: var(--text-muted); }
.guia-retorno.erro { color: var(--red); }

.guia-sub { list-style: none; margin: 8px 0 0; padding: 0; }
.guia-sub > li { position: relative; padding: 14px 0 14px 22px; border-top: 1px solid var(--border); }
.guia-sub > li::before { content: ''; position: absolute; left: 2px; top: 20px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-strong); background: #fff; }
.guia-sub > li.feito::before { border-color: var(--green); background: var(--green); }
.guia-sub > li > p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }
.guia-sub-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guia-status { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #f1f3f9; color: var(--text-muted); }
.guia-status.feito { background: var(--green-bg); color: var(--green); }
.guia-status svg { width: 13px; height: 13px; }
.guia-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 12px; }
.guia-form .form-row { margin-bottom: 10px; }
.guia-rodape { font-size: 13px; color: var(--text-muted); margin: 18px 0 8px; }

/* Tudo pronto */
.guia-pronto { position: relative; overflow: hidden; text-align: center; padding: 34px 24px 28px; margin-bottom: 18px; border-radius: var(--radius);
  background: linear-gradient(180deg, #f2fbf7, #fff); border: 1px solid #cdeedf; }
.guia-pronto-ico { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--green);
  box-shadow: 0 0 0 8px rgba(5, 150, 105, .12); animation: guia-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.guia-pronto-ico svg { width: 32px; height: 32px; }
.guia-pronto h2 { margin: 0 0 6px; font-size: 22px; }
.guia-pronto p { margin: 0 auto; max-width: 480px; font-size: 14px; color: var(--text-muted); }
.guia-confete { position: absolute; inset: 0; pointer-events: none; }
.guia-confete i { position: absolute; top: -12px; left: calc(var(--i) * 5.5% + 2%); width: 8px; height: 12px; border-radius: 2px;
  background: hsl(calc(var(--i) * 40 + 190), 85%, 58%); animation: guia-cai 2.6s cubic-bezier(.3, .6, .5, 1) calc(var(--i) * 70ms) both; }
@keyframes guia-cai { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(260px) rotate(540deg); opacity: 0; } }
@keyframes guia-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .guia-confete { display: none; } .guia-pronto-ico { animation: none; } .guia-barra i { transition: none; } }

@media (max-width: 700px) {
  .guia-card { flex-wrap: wrap; }
  .guia-card-acoes { width: 100%; }
  .guia-topo { flex-direction: column; align-items: flex-start; }
  .guia-form { grid-template-columns: 1fr; }
  .guia-etapa { padding: 16px; gap: 12px; }
}
/* Logo nas notas (guia) */
.guia-logo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.guia-logo img { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; border: 1px solid var(--border); background: #fff; padding: 6px; }
.guia-logo-vazio { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 10px; border: 1px dashed var(--border-strong); font-size: 11px; color: var(--text-faint); }
.guia-logo .guia-acoes { margin-top: 0; }
.guia-logo-botao { position: relative; cursor: pointer; }
.guia-logo-botao input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.guia-sub-titulo .guia-opcional { margin-left: 6px; vertical-align: 1px; }
/* Botões do guia que dependem da etapa anterior ficam claramente apagados */
.guia .btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); box-shadow: none; }

/* Leitor de código de barras pela câmera (lerCodigoDeBarras em app.js) */
.combo-wrap { position: relative; }
.combo-input.com-camera { padding-right: 42px; }
.combo-camera { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px;
  display: grid; place-items: center; background: var(--accent-light); color: var(--accent); cursor: pointer; }
.combo-camera:hover { background: #e0e9ff; }
.combo-camera svg { width: 17px; height: 17px; }
.leitor-video { position: relative; overflow: hidden; border-radius: var(--radius); background: #000; aspect-ratio: 4 / 3; }
.leitor-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.leitor-mira { position: absolute; left: 12%; right: 12%; top: 32%; bottom: 32%; border: 2px solid rgba(255, 255, 255, .9); border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35); }
.leitor-mira::after { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: leitor-linha 1.6s ease-in-out infinite alternate; }
@keyframes leitor-linha { from { transform: translateY(-18px); } to { transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .leitor-mira::after { animation: none; } }

/* Emissor de etiquetas (abrirEmissorEtiquetas em app.js) */
.etq-config { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 12px; }
.etq-medidas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.etq-lista { margin-top: 10px; max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.etq-lista .empty-state { padding: 18px; }
.tbl-etiquetas { width: 100%; margin: 0; }
.tbl-etiquetas td, .tbl-etiquetas th { padding: 6px 10px; font-size: 13px; }
.etq-resumo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }

/* Pupilômetro com IA (public/js/pupilometro.js, Plano Lyros Plus) */
.rg-ferramentas { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.btn-pupilometro { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #c9d8ff; background: linear-gradient(90deg, #f3f7ff, #f6f1ff);
  color: var(--accent); font: 600 13.5px var(--font); padding: 8px 12px; border-radius: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.btn-pupilometro:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.btn-pupilometro .icon { width: 17px; height: 17px; }
.btn-pupilometro .selo-ia { background: var(--brand-gradient); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.btn-pupilometro.bloqueado { color: var(--text-muted); background: #f6f7fb; border-color: var(--border); }
.btn-pupilometro.bloqueado .selo-ia { background: #12b5a5; }
.campo-medido { animation: campo-medido 1.8s ease-out; }
@keyframes campo-medido { 0% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .55); background: #ecfdf5; } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.pupi-dif-alta { color: var(--red); font-weight: 600; }

.pupilometro { position: fixed; inset: 0; z-index: 1100; background: var(--bg); display: flex; flex-direction: column; }
.pupi-topo { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: #000e34; color: #fff; }
.pupi-topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand-gradient); }
.pupi-titulo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; }
.pupi-selo { background: var(--brand-gradient); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.pupi-fechar { width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.pupi-fechar:hover { background: rgba(255, 255, 255, .2); }
.pupi-corpo { flex: 1; overflow: auto; padding: 20px 16px 28px; }
.pupi-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }

.pupi-preparo { max-width: 580px; margin: 0 auto; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; }
.pupi-ilustracao { display: block; width: 100%; max-width: 330px; margin: 0 auto 14px; color: var(--text); }
.pupi-passos { margin: 0 0 14px; padding-left: 20px; }
.pupi-passos li { margin: 7px 0; }
.pupi-opcao { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 14px; cursor: pointer; }
.pupi-camera-escolha { display: flex; align-items: center; gap: 6px; margin: 10px 0; font-size: 14px; }
.pupi-camera-escolha button { border: 1px solid var(--border-strong); background: #fff; border-radius: 999px; padding: 6px 14px; font: 500 13px var(--font); cursor: pointer; }
.pupi-camera-escolha button.ativo { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.pupi-privacidade { margin: 12px 0 0; padding: 9px 12px; border-radius: 8px; background: var(--accent-light); color: #2d3d63; font-size: 12.5px; }

.pupi-camera { max-width: 920px; margin: 0 auto; text-align: center; }
.pupi-video { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; border-radius: var(--radius); overflow: hidden; background: #000; }
.pupi-video video { display: block; max-width: 100%; max-height: 62vh; }
.pupi-guia { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pupi-status { max-width: 560px; margin: 12px auto 0; color: var(--text-muted); font-size: 14px; }
.pupi-status.ok { color: var(--green); font-weight: 600; }
.pupi-camera .pupi-acoes { justify-content: center; }

.pupi-analisando { padding: 70px 0; text-align: center; color: var(--text-muted); }
.pupi-giro { width: 38px; height: 38px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid #d7dceb; border-top-color: var(--accent); animation: pupi-giro .8s linear infinite; }
@keyframes pupi-giro { to { transform: rotate(360deg); } }

.pupi-conferir { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; max-width: 1300px; margin: 0 auto; align-items: start; }
.pupi-foto { display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: var(--radius); background: #000e34; }
.pupi-foto canvas { display: block; border-radius: 8px; touch-action: none; }
.pupi-dica { margin: 8px 4px 2px; color: #b8c3de; font-size: 12.5px; text-align: center; }
.pupi-alerta { align-self: stretch; margin-bottom: 8px; padding: 8px 12px; border-radius: 8px; background: var(--orange-bg); color: #92400e; font-size: 13px; }
.pupi-painel { padding: 16px; border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow); }
.pupi-legenda { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 0 0 12px; padding: 0; list-style: none; color: var(--text-muted); font-size: 12.5px; }
.pupi-legenda i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
.pupi-valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pupi-valor { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.pupi-valor span { display: block; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.pupi-valor b { font-size: 20px; font-variant-numeric: tabular-nums; }
.pupi-valor small { margin-left: 3px; color: var(--text-faint); }
.pupi-valor.destaque { background: var(--accent-light); border-color: #c9d8ff; }
.pupi-valor.pendente b { color: var(--text-faint); }
.pupi-perto { margin: 10px 0 0; color: var(--text-muted); font-size: 13px; }
.pupi-pendente { margin: 8px 0 0; color: #92400e; font-size: 12.5px; }
.pupi-avisos { margin: 10px 0 0; padding: 0; list-style: none; }
.pupi-avisos li { display: flex; gap: 6px; margin-top: 6px; padding: 7px 9px; border-radius: 8px; background: var(--orange-bg); color: #92400e; font-size: 12.5px; }
.pupi-avisos .icon { width: 16px; height: 16px; color: var(--orange); }
.pupi-validacao { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; }
.pupi-validacao summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.pupi-validacao p { margin: 8px 0; color: var(--text-muted); font-size: 12.5px; }
.pupi-validacao-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pupi-validacao-campos label { display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: 12px; }
.pupi-validacao-campos input { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; }
@media (max-width: 900px) {
  .pupi-conferir { grid-template-columns: minmax(0, 1fr); }
  .pupi-corpo { padding: 12px 10px 24px; }
  .pupi-preparo { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { .campo-medido, .pupi-giro { animation: none; } }

/* Impressoras (Empresa e Configurações → Impressoras): formato do cupom da NFC-e */
.impressao-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 720px; }
.impressao-opcao { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px 40px; border: 1px solid var(--border-strong);
  border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.impressao-opcao input { position: absolute; left: 14px; top: 14px; margin: 0; accent-color: var(--accent); }
.impressao-opcao:hover { border-color: var(--accent); }
.impressao-opcao.ativa { border-color: var(--accent); background: var(--accent-light); box-shadow: 0 0 0 3px var(--accent-ring); }
.impressao-opcao-titulo { font-weight: 600; }
.impressao-opcao-desc { color: var(--text-muted); font-size: 12.5px; }
@media (max-width: 640px) { .impressao-opcoes { grid-template-columns: 1fr; } }
/* Celular: o cabeçalho de Empresa e Configurações (logo, nome e as chaves Matriz/Ativa) quebra em linhas;
   antes empurrava a página inteira para o lado, inclusive as abas de configuração */
@media (max-width: 700px) {
  .empresa-header { flex-wrap: wrap; }
  .empresa-header > div[style*="flex:1"] { flex: 1 1 100%; min-width: 0; }
  .empresa-header > div[style*="min-width:140px"] { flex: 1 1 100%; flex-direction: row !important; gap: 24px !important; }
}
.form-row select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
/* Celular: o bloco de Empresa e Configurações de 2026-09-25 (acima) vinha depois da regra de celular e
   voltava as configurações para 2 colunas (lista de abas + conteúdo), que passavam da tela. */
@media (max-width: 640px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-tabs { position: static; border-right: 0; padding-right: 0; margin-bottom: 10px; }
  .settings-content { padding: 4px 0; min-height: 0; }
}

/* Barra do topo (2026-09-26, print do usuário no celular): com "Pagar agora" + seletor de loja, o sino e as
   Novidades eram empurrados para fora da tela. Agora quem encolhe é só o seletor de loja; os ícones ficam. */
.topbar-right { min-width: 0; }
#topbar-balao-pagamento, #novidades-wrap, #notif-bell-wrap { flex-shrink: 0; }
#loja-switcher { min-width: 0; flex-shrink: 1; }
.loja-switcher-btn { min-width: 0; max-width: min(250px, 100%); }
@media (max-width: 640px) {
  .topbar-right { gap: 6px; }
  /* No celular o seletor mostra só o ícone da loja; o nome aparece ao abrir a lista */
  .loja-switcher-textos { display: none; }
  .loja-switcher-btn { gap: 4px; padding: 4px 6px 4px 4px; }
  .topbar-balao-pagamento a.btn-balao { padding: 8px 11px; }
  /* A lista de lojas ocupa a largura da tela, como o painel de notificações (antes saía pela esquerda) */
  .loja-switcher-menu { position: fixed; top: 62px; left: 12px; right: 12px; width: auto; max-width: none; }
  #loja-switcher { flex-shrink: 0; }
  .topbar #page-title { flex: 1 1 auto; min-width: 0; }
  /* Com o "Pagar agora" (só Master/Supervisor, com mensalidade em aberto) não sobra espaço para o título */
  .topbar:has(.topbar-balao-pagamento) #page-title { display: none; }
}

/* Menu em seções (2026-09-26, pedido do usuário): Principal, Gestão e Sistema */
.nav-secao-titulo { padding: 16px 12px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6f7fa8; }
.sidebar nav .nav-secao-titulo:first-child { padding-top: 2px; }

/* Cartão do Contrato em Empresa e Configurações (antes era um item do menu) */
a.stat-card-link { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
a.stat-card-link:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
/* Cartão "Atrasadas / suspensas" com a página dele aberta (Administração → Contas Parceiras). */
a.stat-card-link.ativo { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }
a.stat-card-link.ativo-azul { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
a.stat-card-link.ativo-laranja { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-bg); }
.contas-atraso-topo { margin: -4px 0 12px; }
.stat-card .sc-sub { grid-column: 2; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.stat-card:has(.sc-sub) .sc-icon { grid-row: span 3; }
.stat-card .sc-value.texto-alerta { color: var(--orange); }

/* Barra de atalhos (2026-09-26): Início, Clientes, "+", O.S. e Menu. Aparece onde o menu lateral fica escondido
   (celular e tablet em pé, até 900 px); com o tablet deitado o menu lateral aparece inteiro e ela não faz falta. */
.barra-inferior { display: none; }
@media (max-width: 900px) {
  body.com-barra-inferior .barra-inferior {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 26;
    height: calc(64px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(12, 21, 65, 0.06);
  }
  .barra-inferior > a, .barra-inferior > button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 64px; padding: 0; border: 0; background: none; cursor: pointer;
    font: 500 11px var(--font); color: var(--text-muted); text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .barra-inferior svg { width: 22px; height: 22px; }
  .barra-inferior > a.ativo { color: var(--accent); font-weight: 700; }
  .barra-inferior > .barra-inferior-mais {
    justify-self: center; align-self: start; width: 56px; height: 56px; margin-top: -18px; border-radius: 50%;
    background: var(--btn-gradient); color: #fff; box-shadow: 0 8px 20px rgba(11, 122, 156, 0.38); border: 4px solid #fff;
  }
  .barra-inferior > .barra-inferior-mais svg { width: 24px; height: 24px; }
  /* Espaço para a barra: o fim das listas não fica atrás dela. A barra de Salvar dos formulários (sticky)
     já respeita esse espaço, então continua com o bottom de sempre. */
  body.com-barra-inferior #content { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* O Menu fica na barra de baixo: o ☰ do topo sai e sobra espaço para o título */
  body.com-barra-inferior .sidebar-toggle-btn { display: none; }
}
.acoes-rapidas { position: fixed; inset: 0; z-index: 45; background: rgba(10, 15, 30, 0.45); display: flex; align-items: flex-end; animation: acoes-fundo .15s ease-out; }
.acoes-rapidas-folha {
  width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(12, 21, 65, 0.18); animation: acoes-sobe .2s ease-out;
}
.acoes-rapidas-folha::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: #d7dceb; margin: 0 auto 10px; }
.acoes-rapidas-titulo { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); padding: 0 6px 8px; }
.acoes-rapidas-item { display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-radius: 12px; font-size: 15.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.acoes-rapidas-item:active, .acoes-rapidas-item:hover { background: var(--accent-light); }
.acoes-rapidas-icone { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent); }
.acoes-rapidas-icone .icon { width: 20px; height: 20px; }
@keyframes acoes-fundo { from { opacity: 0; } }
@keyframes acoes-sobe { from { transform: translateY(40px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .acoes-rapidas, .acoes-rapidas-folha { animation: none; } }
@media (max-width: 900px) { body.com-barra-inferior .aviso-assinatura { bottom: calc(80px + env(safe-area-inset-bottom)); } }
/* No tablet, a lista do "+" fica centralizada, sem ocupar a largura toda */
@media (min-width: 641px) { .acoes-rapidas-folha { max-width: 520px; margin: 0 auto calc(80px + env(safe-area-inset-bottom)); border-radius: 20px; padding-bottom: 14px; } }

/* Botão do modo escuro (2026-09-26): lua no modo claro ("apagar a luz"), sol no escuro ("acender a luz").
   No computador e no tablet fica no topo; no celular, no rodapé do Menu (o topo do celular já está cheio). */
.tema-btn svg, .sidebar-tema-btn svg { width: 18px; height: 18px; }
.tema-icone-sol { display: none; }
html[data-tema="escuro"] .tema-icone-sol { display: block; }
html[data-tema="escuro"] .tema-icone-lua { display: none; }
#tema-btn { flex-shrink: 0; }
.tema-btn.girando svg, .sidebar-tema-btn.girando svg { animation: tema-gira 0.45s ease; }
@keyframes tema-gira { from { transform: rotate(-90deg) scale(0.6); opacity: 0.2; } to { transform: none; opacity: 1; } }
.sidebar-tema-btn { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; background: rgba(255, 255, 255, 0.06); color: #e2e8f0; cursor: pointer; }
@media (max-width: 640px) {
  #tema-btn { display: none; }
  .sidebar-tema-btn { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .tema-btn.girando svg, .sidebar-tema-btn.girando svg { animation: none; } }

/* Caixas e linhas que tinham a cor escrita direto na tela (2026-09-26, para o modo escuro alcançá-las).
   Mesmas cores de antes no modo claro. */
:root { --acordeao-bg: #f5f6f8; --acordeao-aviso-bg: #fff8ec; }
.info-banner.caixa-aviso { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.info-banner.caixa-aviso.laranja { background: #fef3e2; border: 1px solid #fcd9a8; color: #92400e; }
.info-banner.caixa-aviso.vermelha { background: #fdecec; border: 1px solid #f5b5b5; color: #991b1b; }
.fin-grupo-header { background: #f9fafb; }
td.linha-grupo { font-weight: 700; }
/* Relatório Financeiro → entradas por forma de pagamento: subtotal de cada forma (2026-10-06). */
tr.rel-subtotal td { font-weight: 700; }
td.linha-grupo.receitas { background: #e6f0ff; }
td.linha-grupo.despesas { background: #fde8e8; }
.caixa-destaque-azul { background: var(--accent-light); border: 1px solid #b6e0e8; border-radius: var(--radius-sm); padding: 14px 16px; }

/* Cartão estreito (tablet em pé, notebook com janela menor, 3 ou 4 cartões lado a lado): o ícone
   ocupava ~60px e o valor ("R$ 6.512,15") era cortado pelo overflow hidden (print do usuário num
   tablet, 2026-10-01). O cartão mede a própria largura (container query) — não a da tela — e, quando
   fica estreito, esconde o ícone e o valor usa a largura toda; mais estreito ainda, a fonte diminui.
   Fica no FIM do arquivo de propósito: a regra de celular (@media max-width 640px, "sc-value 18px")
   vinha depois e anulava a redução da fonte. */
.stat-card { container-type: inline-size; }
/* Último recurso (valor acima de R$ 1 milhão num celular estreito): o "R$" quebra para a linha de
   cima em vez de o número ser cortado. Só acontece quando não cabe numa linha. */
.stat-card .sc-value { white-space: normal; overflow-wrap: normal; }
@container (max-width: 270px) {
  .stat-card .sc-icon { display: none; }
  .stat-card .sc-label, .stat-card .sc-value, .stat-card .sc-sub { grid-column: 1 / -1; }
}
@container (max-width: 200px) {
  .stat-card .sc-value { font-size: 17px; }
}
@container (max-width: 130px) {
  .stat-card .sc-value { font-size: 15px; }
}
/* Financeiro → Resultado: Receitas e Despesas lado a lado quando cabe; no celular, um embaixo do outro
   (antes era "1fr 1fr" fixo na tela e os cartões de dentro ficavam com ~57px). */
.cards-grid.resultado-colunas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
/* Janela "Exportar Clientes": os dois botões de planilha lado a lado (empilham no celular). */
.exportar-opcoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.exportar-opcoes .btn { flex: 1 1 200px; justify-content: center; }
/* Seleção em lote na lista de produtos (2026-10-03): coluna das caixinhas, linha marcada e a barra
   "N selecionados · Imprimir etiquetas · Excluir selecionados · Limpar seleção". */
th.col-selecao, td.col-selecao { width: 36px; text-align: center; padding-right: 0; }
.col-selecao input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }
tr.linha-selecionada td { background: var(--accent-light); }
.selecao-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px;
  padding: 10px 14px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-light);
}
.selecao-barra strong { margin-right: auto; color: var(--accent); }
/* O display:flex acima vencia o atributo hidden do navegador, e a barra aparecia com "0 selecionados"
   mesmo sem nada marcado (visto no print da Ajuda em 2026-10-03). Mesmo cuidado de .zap-aba[hidden]. */
.selecao-barra[hidden] { display: none !important; }
/* Botões coloridos em tom suave (fundo claro + texto colorido), para ações secundárias que precisam
   ser reconhecidas de longe sem competir com o botão principal azul. Primeiro uso (2026-10-03, pedido
   do usuário: "esses botões ainda estão incolores"): NF-e de devolução, remessa em garantia, Danfe e XML
   no resumo da entrada de produtos. */
.btn.tom { box-shadow: none; border: 1px solid transparent; font-weight: 600; }
.btn.tom:hover { filter: none; }
.btn.tom-laranja { background: var(--orange-bg); color: #b45309; border-color: #f8d9a8; }
.btn.tom-laranja:hover { background: #fde6c4; }
.btn.tom-roxo { background: #f3edff; color: #6d28d9; border-color: #ddd0fb; }
.btn.tom-roxo:hover { background: #e9defe; }
.btn.tom-azul { background: var(--accent-light); color: var(--accent); border-color: #c9d8fb; }
.btn.tom-azul:hover { background: #dde7ff; }
.btn.tom-verde { background: var(--green-bg); color: #047857; border-color: #b9e8d4; }
.btn.tom-verde:hover { background: #d3f3e5; }
.btn.tom-vermelho { background: var(--red-bg); color: #b91c1c; border-color: #f6c9c9; }
.btn.tom-vermelho:hover { background: #fbdcdc; }
/* Cartões de O.S., Vendas, Orçamentos e Fiscal (2026-10-03): 1 ação principal (azul forte), as do dia a
   dia em tom suave e as raras/perigosas no menu "Mais". Dentro do cartão, botões e menus com seta ficam
   com o mesmo formato (antes eram pílulas brancas ao lado de botões e de links soltos). */
.os-actions { gap: 8px; }
.os-actions .btn.small, .os-actions .dd-btn-toggle { border-radius: 9px; padding: 7px 12px; font-size: 13px; font-weight: 600; min-height: 34px; }
.dd-btn[class*="dd-btn-tom-"] .dd-btn-toggle { box-shadow: none; }
.dd-btn-tom-azul .dd-btn-toggle, .dd-btn-tom-azul .dd-btn-toggle:hover, .dd-btn-tom-azul.open .dd-btn-toggle { background: var(--accent-light); color: var(--accent); border-color: #c9d8fb; }
.dd-btn-tom-verde .dd-btn-toggle, .dd-btn-tom-verde .dd-btn-toggle:hover, .dd-btn-tom-verde.open .dd-btn-toggle { background: var(--green-bg); color: #047857; border-color: #b9e8d4; }
.dd-btn-tom-roxo .dd-btn-toggle, .dd-btn-tom-roxo .dd-btn-toggle:hover, .dd-btn-tom-roxo.open .dd-btn-toggle { background: #f3edff; color: #6d28d9; border-color: #ddd0fb; }
.dd-btn-tom-azul .dd-btn-toggle:hover { background: #dde7ff; }
.dd-btn-tom-verde .dd-btn-toggle:hover { background: #d3f3e5; }
.dd-btn-tom-roxo .dd-btn-toggle:hover { background: #e9defe; }
/* "Mais": discreto, no fim da fileira; os itens perigosos dentro dele já vêm em vermelho (.dd-danger). */
.dd-btn-mais { margin-left: auto; }
.dd-btn-mais .dd-btn-toggle { background: transparent; color: var(--text-muted); border-color: var(--border); }
.dd-btn-mais .dd-btn-toggle:hover, .dd-btn-mais.open .dd-btn-toggle { background: #f1f3f9; color: var(--text); border-color: var(--border-strong); }
/* Menu com seta que não cabe à direita abre alinhado pela direita do botão (posicionarMenuDd). */
.dd-btn.para-esquerda .dd-btn-menu { left: auto; right: 0; }

/* Quadros abaixo do gráfico do Painel (2026-10-03, aprovado pelo usuário): cor do assunto, "Ver →" ao passar
   o mouse e pontinho de atenção quando o quadro pede ação. As animações (entrada em cascata, ícone que
   "conversa" com o assunto, pulso do pontinho) ficam no bloco sem "reduzir movimento", logo abaixo. */
.painel-card { position: relative; --tom: var(--text-muted); --tom-anel: rgba(120, 130, 160, 0.14); }
.painel-card.tom-red { --tom: var(--red); --tom-anel: rgba(220, 38, 38, 0.13); }
.painel-card.tom-green { --tom: var(--green); --tom-anel: rgba(5, 150, 105, 0.14); }
.painel-card.tom-orange { --tom: var(--orange); --tom-anel: rgba(217, 119, 6, 0.15); }
.painel-card.tom-blue { --tom: var(--accent); --tom-anel: var(--accent-ring); }
.painel-card { transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s; }
.painel-card:hover { border-color: var(--tom); box-shadow: 0 0 0 3px var(--tom-anel), var(--shadow-md); transform: translateY(-3px); }
.painel-card .card-ver {
  position: absolute; right: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 1px;
  font-size: 12px; font-weight: 700; color: var(--tom); opacity: 0; transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
.painel-card .card-ver .icon { width: 14px; height: 14px; }
.painel-card:hover .card-ver, .painel-card:focus-visible .card-ver { opacity: 1; transform: none; }
.painel-card .card-atencao { position: absolute; top: 16px; right: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--tom); }
.painel-card .card-atencao::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tom); opacity: 0; }
.painel-card .card-icon .icon { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  /* Entrada em cascata: um quadro depois do outro. "backwards" para não segurar o transform depois. */
  .painel-anima .painel-card { animation: painel-entra 0.5s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(0.1s + var(--i, 0) * 0.07s); }
  /* Ícone uma vez na entrada (enquanto .painel-anima existe) e de novo a cada vez que o mouse passa. */
  .painel-anima .painel-card[data-anim="desce"] .card-icon .icon { animation: painel-desce 0.8s ease calc(0.5s + var(--i, 0) * 0.07s); }
  .painel-anima .painel-card[data-anim="sobe"] .card-icon .icon { animation: painel-sobe 0.8s ease calc(0.5s + var(--i, 0) * 0.07s); }
  .painel-anima .painel-card[data-anim="presente"] .card-icon .icon { animation: painel-presente 0.9s ease calc(0.5s + var(--i, 0) * 0.07s); }
  .painel-anima .painel-card[data-anim="alerta"] .card-icon .icon { animation: painel-alerta 0.7s ease calc(0.5s + var(--i, 0) * 0.07s); }
  .painel-anima .painel-card[data-anim="check"] .card-icon svg > * { stroke-dasharray: 60; animation: painel-check 0.9s ease calc(0.5s + var(--i, 0) * 0.07s) backwards; }
  .painel-card[data-anim="desce"]:hover .card-icon .icon { animation: painel-desce 0.7s ease; }
  .painel-card[data-anim="sobe"]:hover .card-icon .icon { animation: painel-sobe 0.7s ease; }
  .painel-card[data-anim="presente"]:hover .card-icon .icon { animation: painel-presente 0.8s ease; }
  .painel-card[data-anim="alerta"]:hover .card-icon .icon { animation: painel-alerta 0.6s ease; }
  .painel-card[data-anim="check"]:hover .card-icon svg > * { stroke-dasharray: 60; animation: painel-check 0.7s ease; }
  /* Pontinho de atenção: pulsa 3 vezes e para (não fica piscando o dia todo). */
  .painel-card .card-atencao::after { animation: painel-pulso 1.4s ease-out 1.2s 3; }
}
@keyframes painel-entra { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes painel-desce { 35% { transform: translate(2px, 4px); } 65% { transform: translate(-1px, -1px); } }
@keyframes painel-sobe { 35% { transform: translate(2px, -4px); } 65% { transform: translate(-1px, 1px); } }
@keyframes painel-presente { 15% { transform: rotate(-14deg); } 35% { transform: rotate(12deg); } 55% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
@keyframes painel-alerta { 30% { transform: scale(1.28); } 55% { transform: scale(0.92); } 75% { transform: scale(1.06); } }
@keyframes painel-check { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes painel-pulso { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(3); opacity: 0; } }

/* ---------- Tabelas e listas no celular, sem rolar para o lado (2026-10-08) ---------- */

/* Processos / Serviços: no computador a tabela de 9 colunas; no celular ela dava 1.071 px dentro de um
   painel de ~350 px e só dava para ver uma coluna por vez (no tablet em pé também rolava). Aqui, até 900 px
   (a mesma faixa em que o sistema já trata o tablet em pé como celular), a tabela some e entram os cartões,
   iguais aos da Ordem de Serviço (.historico-card). */
.tc-ua { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-cartoes { display: none; }
@media (max-width: 900px) {
  .ps-painel-tabela { display: none; }
  .ps-cartoes { display: block; }
}
/* Botão "Tabela | Cartões" (só no computador): a escolha fica em data-visao no #ps-resultado. Até 900 px o
   botão some e valem sempre os cartões (regra acima), qualquer que seja a escolha guardada. */
#ps-resultado[data-visao="cartoes"] .ps-painel-tabela { display: none; }
#ps-resultado[data-visao="cartoes"] .ps-cartoes { display: block; }
.ps-visao { flex-wrap: nowrap; gap: 6px; }
@media (max-width: 900px) { .ps-visao { display: none; } }

/* `tc-grade`: tabela que, no celular, vira uma lista de blocos. Cada linha mostra as colunas lado a lado,
   com a legenda (data-label de cada <td>) em cima do valor; a célula `.tc-titulo` ocupa a linha toda. Usada
   nas janelas, onde a tabela com margens de computador passava da largura e a janela inteira rolava para o
   lado (ex.: Itens e Forma de Pagamento do resumo da O.S./venda). `--tc-colunas` define as colunas. */
@media (max-width: 640px) {
  table.tc-grade, table.tc-grade tbody { display: block; width: 100%; }
  table.tc-grade thead { display: none; }
  table.tc-grade tr {
    display: grid; grid-template-columns: var(--tc-colunas, 1fr 1fr 1fr); gap: 4px 12px;
    padding: 10px 2px; border-bottom: 1px solid var(--border);
  }
  table.tc-grade tr:hover td { background: none; }
  table.tc-grade td { display: block; min-width: 0; padding: 0; border: none; white-space: normal; overflow-wrap: anywhere; }
  table.tc-grade td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 1px; color: var(--text-muted);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.035em; text-transform: uppercase;
  }
  table.tc-grade td.tc-titulo { grid-column: 1 / -1; font-weight: 600; }
  table.tc-grade td.tc-titulo::before { display: none; }
  /* Célula só com ação (ex.: Remover): fica na base da linha, alinhada aos valores que têm legenda em cima. */
  table.tc-grade td.tc-acao { align-self: end; white-space: nowrap; }
  table.tc-grade td.tc-ua { grid-column: 1 / -1; max-width: none; white-space: normal; overflow: visible; text-overflow: clip; font-size: 12.5px; color: var(--text-muted); }
}

/* ---------- Profissionais (ClinicLyros, etapa 2, 2026-10-12: renderProfissionais / renderProfissional em app.js) ----------
   A cor de cada profissional vem do cadastro (--prof-cor, escolhida entre as cores da marca). */
.prof-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.prof-card { display: flex; flex-direction: column; gap: 14px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; color: inherit; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.prof-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.prof-card-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prof-card-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prof-card-nome strong { font-size: 15.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-card-nome span { font-size: 12.5px; color: var(--text-muted); }
.prof-card-info { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 12px; }
.prof-card-info > span { display: flex; align-items: center; gap: 7px; }
.prof-card-info .icon { width: 15px; height: 15px; flex-shrink: 0; }
.prof-hoje.atende { color: var(--green); font-weight: 600; }
.prof-hoje.ausente, .prof-proxima { color: var(--orange); font-weight: 600; }
.prof-avatar { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--prof-cor, #2463ff); color: #ffffff; font-weight: 700; font-size: 18px; box-shadow: 0 4px 12px rgba(36, 99, 255, 0.18); }
.prof-avatar.grande { width: 56px; height: 56px; font-size: 22px; border-radius: 15px; }
.prof-avatar .icon { width: 26px; height: 26px; }
.prof-cabecalho { display: flex; align-items: center; gap: 14px; }
.prof-cores { display: flex; flex-wrap: wrap; gap: 10px; }
.prof-cor { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--card-bg); background: var(--prof-cor); cursor: pointer;
  box-shadow: 0 0 0 1px var(--border-strong); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.prof-cor:hover { transform: scale(1.08); }
.prof-cor.ativa { box-shadow: 0 0 0 2px var(--prof-cor); transform: scale(1.08); }

.horarios-semana { display: flex; flex-direction: column; gap: 10px; }
.horario-dia { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: #fafbfe; }
.horario-dia.ligado { background: var(--card-bg); border-color: var(--border-strong); }
.horario-dia-topo { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.horario-dia-topo strong { font-size: 14px; min-width: 70px; }
.horario-dia-topo .hd-copiar { margin-left: auto; }
.horario-periodos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding-left: 52px; }
.horario-periodo { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-light); border-radius: var(--radius-sm); padding: 6px 8px; }
.horario-periodo input[type="time"] { width: 104px; padding: 6px 8px; }
.hp-remover { border: none; background: none; color: var(--text-faint); cursor: pointer; padding: 2px; display: inline-flex; }
.hp-remover:hover { color: var(--red); }
.hp-remover .icon { width: 17px; height: 17px; }
.hd-adicionar { border: none; background: none; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 4px; }
.hd-adicionar .icon { width: 15px; height: 15px; }
.prof-copiar-dias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 12px 0 4px; }

.prof-ausencias { display: flex; flex-direction: column; gap: 8px; }
.prof-ausencia { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.prof-ausencia-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.prof-ausencia-texto .muted { font-size: 12.5px; }
.prof-ausencia .aus-apagar { margin-left: auto; }
.prof-ausencias-passadas { margin-top: 14px; }
.prof-ausencias-passadas summary { cursor: pointer; font-size: 13px; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; }

@media (max-width: 640px) {
  .horario-periodos { padding-left: 0; }
  .horario-dia-topo .hd-copiar { padding: 6px 8px; }
  .prof-ausencia { flex-wrap: wrap; }
}

/* ---------- Paciente: dados clínicos (ClinicLyros, etapa 3, 2026-10-12) ---------- */
.erro-campo { color: var(--red); font-size: 12px; margin-top: 4px; }
.erro-campo[hidden] { display: none; }
.form-grid.alerta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; }
.contato-row[data-kind="alerta"] { padding: 10px 14px; }
.contato-row[data-kind="alerta"] .form-row { margin-bottom: 0; }
.alerta-remover { padding-bottom: 10px; font-size: 13px; }
.paciente-alergias { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--red-bg); border: 1px solid #f5b5b5; color: #991b1b; font-size: 13.5px; }
.paciente-alergias .icon { width: 17px; height: 17px; }
.paciente-sem-alergia { display: flex; align-items: center; gap: 6px; margin: 14px 0 4px; font-size: 13px; color: var(--text-muted); }
.paciente-sem-alergia .icon { width: 15px; height: 15px; }
.alergia-grav { display: inline-flex; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; background: #eef1f6; color: #4b5563; }
.alergia-grav.grave { background: #dc2626; color: #ffffff; }
.alergia-grav.moderada { background: var(--orange-bg); color: #b45309; }
.convenio-vencido { color: var(--red); font-weight: 600; }
.paciente-alertas { display: flex; flex-direction: column; gap: 8px; }
.paciente-alerta { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 13.5px; }
.paciente-alerta.tipo-alergia { border-color: #f5b5b5; background: #fff7f7; }
.paciente-alerta-tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); min-width: 92px; }
.paciente-alerta.tipo-alergia .paciente-alerta-tipo { color: var(--red); }
.paciente-alerta .remover-alerta { margin-left: auto; }
.chip-alergia { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700;
  background: var(--red-bg); color: var(--red); vertical-align: middle; white-space: nowrap; }
.chip-alergia .icon { width: 12px; height: 12px; }
@media (max-width: 640px) {
  .form-grid.alerta-grid { grid-template-columns: minmax(0, 1fr); }
  .contato-row[data-kind="alerta"] .form-row { margin-bottom: 10px; }
  .alerta-remover { text-align: right; padding-bottom: 0; }
  .paciente-alerta { flex-wrap: wrap; }
  .paciente-alerta-tipo { min-width: 0; width: 100%; }
}

/* ---------- Agenda (ClinicLyros, etapa 4, 2026-10-12: renderAgenda / abrirFormAgendamento em app.js) ----------
   Cores por situação da consulta: agendado azul, confirmado verde, chegou laranja, em atendimento roxo,
   atendido cinza, faltou vermelho, cancelado apagado. A borda esquerda é a cor do profissional (--prof-cor). */
@media (min-width: 1100px) { .cards-grid.painel-cards .painel-card-largo { grid-column: span 2; } }
.agenda-topo { display: flex; flex-direction: column; gap: 12px; }
.agenda-navegacao, .agenda-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agenda-navegacao .btn.small { min-height: 36px; }
.agenda-navegacao input[type="date"], .agenda-acoes select { width: auto; min-width: 150px; min-height: 36px; padding: 7px 10px; font: inherit; font-size: 13.5px;
  color: var(--text); background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.agenda-data-extenso { font-size: 15px; margin-left: 6px; }
.agenda-acoes select { width: auto; min-width: 200px; }
.agenda-acoes #ag-novo { margin-left: auto; }
.agenda-visao { display: inline-flex; gap: 6px; }
@media (max-width: 900px) { .agenda-visao { display: none; } }
.agenda-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 10px; }
.ag-resumo-item { display: inline-flex; align-items: center; gap: 6px; }
.ag-resumo-item::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ag-resumo-item.st-agendado { color: #3b5bdb; }
.ag-resumo-item.st-confirmado { color: var(--green); }
.ag-resumo-item.st-aguardando { color: #b45309; }
.ag-resumo-item.st-atendido { color: var(--text-muted); }
.ag-cancelados { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.agenda-grade-painel { padding: 12px; }
.agenda-grade { display: grid; grid-template-columns: 52px repeat(var(--colunas), minmax(190px, 1fr)); overflow-x: auto; }
.agenda-coluna-topo { display: flex; align-items: center; gap: 9px; height: 60px; padding: 0 10px; border-bottom: 1px solid var(--border); min-width: 0; }
.agenda-coluna-topo .prof-avatar { width: 34px; height: 34px; font-size: 14px; border-radius: 10px; box-shadow: none; }
.agenda-coluna-topo strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-coluna-topo > div span { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-coluna-topo > div { min-width: 0; }
.agenda-horas-corpo { position: relative; }
.agenda-horas-corpo span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.agenda-horas-corpo span:first-child { transform: none; }
.agenda-coluna { min-width: 0; border-left: 1px solid var(--border); }
.agenda-coluna-corpo { position: relative; cursor: pointer;
  background: repeating-linear-gradient(135deg, #f4f5f9, #f4f5f9 6px, #eceef4 6px, #eceef4 12px); }
.agenda-coluna-corpo::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent var(--hora-px)); }
.agenda-livre { position: absolute; left: 0; right: 0; background: var(--card-bg); z-index: 0; }
.agenda-livre:hover { background: var(--accent-light); }
.agenda-bloco { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden;
  padding: 4px 7px; border: 1px solid rgba(15, 23, 42, 0.06); border-left: 4px solid var(--prof-cor, #2463ff); border-radius: 8px;
  font: inherit; font-size: 12px; text-align: left; color: var(--text); cursor: pointer; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease; }
.agenda-bloco:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); z-index: 4; }
.agenda-bloco > span { flex-shrink: 0; } /* sem isso, a linha do paciente encolhia até sumir nos blocos baixos */
.agenda-bloco .ab-hora { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.agenda-bloco .ab-paciente { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.agenda-bloco .ab-status { font-size: 11px; color: var(--text-muted); }
.agenda-bloco.curto { flex-direction: row; align-items: center; gap: 6px; padding: 2px 7px; }
.agenda-bloco.curto .ab-status { display: none; }
.agenda-agora { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 3; pointer-events: none; }
.agenda-agora::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }

.agenda-bloco.st-agendado, .ag-status.st-agendado { background: #eef3ff; }
.agenda-bloco.st-confirmado, .ag-status.st-confirmado { background: #e7f8f1; }
.agenda-bloco.st-aguardando, .ag-status.st-aguardando { background: #fef3e2; }
.agenda-bloco.st-em_atendimento, .ag-status.st-em_atendimento { background: #f1e9ff; }
.agenda-bloco.st-atendido, .ag-status.st-atendido { background: #f1f3f6; }
.agenda-bloco.st-faltou, .ag-status.st-faltou { background: #fdecec; }
.agenda-bloco.st-cancelado, .ag-status.st-cancelado { background: #f3f4f6; }
.agenda-bloco.st-cancelado, .agenda-item.st-cancelado { opacity: 0.6; }
.agenda-bloco.st-cancelado .ab-paciente, .agenda-item.st-cancelado .agenda-item-paciente { text-decoration: line-through; }
.ag-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; color: #344054; }
.ag-status.st-agendado { color: #3b5bdb; }
.ag-status.st-confirmado { color: var(--green); }
.ag-status.st-aguardando { color: #b45309; }
.ag-status.st-em_atendimento { color: #6d28d9; }
.ag-status.st-faltou { color: var(--red); }
.ag-alergia { display: inline-flex; color: var(--red); vertical-align: middle; }
.ag-alergia .icon { width: 13px; height: 13px; }
.ag-encaixe { display: inline-flex; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 700; color: #b45309; border: 1px solid #f3d8a0; background: var(--orange-bg); }

.agenda-lista { display: flex; flex-direction: column; gap: 8px; }
.agenda-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--border);
  border-left: 4px solid var(--prof-cor, #2463ff); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); cursor: pointer; }
.agenda-item:hover { border-color: var(--border-strong); }
.agenda-item-hora { display: flex; flex-direction: column; min-width: 52px; font-variant-numeric: tabular-nums; }
.agenda-item-hora strong { font-size: 16px; }
.agenda-item-hora span { font-size: 12px; color: var(--text-muted); }
.agenda-item-info { flex: 1; min-width: 0; }
.agenda-item-paciente { font-weight: 600; font-size: 14px; }
.agenda-item-detalhe { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.agenda-item-acoes { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.agenda-item.compacto { padding: 9px 12px; cursor: default; }
.ag-ficha-titulo { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 4px 0 8px; }
.ag-ficha-titulo:not(:first-child) { margin-top: 16px; }

.ag-paciente-escolhido { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--accent-light); }
.ag-paciente-escolhido[hidden], #ag-paciente-busca-wrap[hidden], #ag-paciente-novo[hidden], #ag-hora-livre-wrap[hidden], .ag-resultados[hidden] { display: none; }
#ag-paciente-busca-wrap { position: relative; }
.ag-resultados { position: absolute; left: 0; right: 0; top: 44px; z-index: 5; background: var(--card-bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md); max-height: 260px; overflow-y: auto; }
.ag-resultados button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 9px 12px; border: none; background: none; font: inherit;
  text-align: left; cursor: pointer; border-bottom: 1px solid var(--border); }
.ag-resultados button:hover { background: var(--accent-light); }
.ag-resultados button span { font-size: 12px; color: var(--text-muted); }
.ag-resultados-vazio { padding: 10px 12px; font-size: 13px; color: var(--text-muted); }
.ag-link-novo { border: none; background: none; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0 0; }
.ag-link-novo .icon { width: 14px; height: 14px; }
#ag-hora-nota { margin: -4px 0 10px; }
#ag-hora-nota .icon { width: 14px; height: 14px; color: #b45309; vertical-align: -2px; }
.ag-det { display: flex; flex-direction: column; gap: 8px; }
.ag-det-topo { display: flex; gap: 8px; align-items: center; }
.ag-det .paciente-alergias { margin: 0; }
.ag-det-linha { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
.ag-det-linha > span { color: var(--text-muted); font-size: 12.5px; }
.ag-det-historico { font-size: 12.5px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.ag-det-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ag-det-acoes .ag-cancelar { color: var(--red); }
@media (max-width: 640px) {
  .agenda-acoes #ag-novo { margin-left: 0; width: 100%; justify-content: center; }
  .agenda-acoes select { flex: 1; min-width: 0; }
  .agenda-data-extenso { width: 100%; margin-left: 0; }
  .agenda-item { flex-wrap: wrap; gap: 8px 12px; }
  .agenda-item-acoes { width: 100%; justify-content: space-between; }
  .ag-det-linha { grid-template-columns: 90px minmax(0, 1fr); }
}

/* ---------- Movimento nas telas da clínica (2026-10-12, a pedido do usuário) ----------
   Mesma regra do resto do sistema: curto (até ~0,5 s), nada espera a animação para funcionar e,
   com "reduzir movimento" ligado no aparelho, tudo fica parado. A "sombra" do horário fica sempre
   (ela mostra onde o clique vai agendar); só a transição dela depende do movimento. */
.agenda-sombra {
  position: absolute; left: 3px; right: 3px; z-index: 1; pointer-events: none; opacity: 0;
  display: flex; align-items: flex-start; gap: 3px; padding: 3px 7px;
  font-size: 11.5px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums;
  border: 1.5px dashed var(--accent); border-radius: 8px; background: var(--accent-light);
}
.agenda-sombra .icon { width: 13px; height: 13px; }
.agenda-sombra.visivel { opacity: 0.92; }
.agenda-sombra.encaixe { color: #b45309; border-color: #f0b25a; background: var(--orange-bg); }
/* Bolinha da linha do agora: o anel que pulsa sai dela */
.agenda-agora::after { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .agenda-sombra { transition: opacity 0.15s ease, top 0.09s ease-out, height 0.09s ease-out; }

  /* Agenda: o dia novo desliza na direção em que se navegou e as consultas entram em cascata
     (coluna por coluna, de cima para baixo). "backwards" para não segurar transform depois. */
  #ag-conteudo.ag-anima[data-dir="frente"] > * { animation: ag-vem-da-direita 0.35s cubic-bezier(.16, 1, .3, 1) backwards; }
  #ag-conteudo.ag-anima[data-dir="tras"] > * { animation: ag-vem-da-esquerda 0.35s cubic-bezier(.16, 1, .3, 1) backwards; }
  #ag-conteudo.ag-anima .agenda-bloco {
    animation: ag-bloco-entra 0.42s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: min(calc(0.08s + var(--c, 0) * 0.06s + var(--i, 0) * 0.04s), 0.7s);
  }
  #ag-conteudo.ag-anima .agenda-item {
    animation: sis-entra 0.38s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: min(calc(0.05s + var(--i, 0) * 0.04s), 0.5s);
  }
  #ag-conteudo.ag-anima .agenda-coluna-topo .prof-avatar { animation: sis-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) calc(var(--c, 0) * 0.06s) backwards; }
  /* Linha do agora: se desenha da esquerda e a bolinha pulsa 3 vezes (não fica piscando o dia todo) */
  #ag-conteudo.ag-anima .agenda-agora { transform-origin: left; animation: ag-agora-traco 0.6s cubic-bezier(.65, 0, .35, 1) 0.35s backwards; }
  .agenda-agora::after { animation: painel-pulso 1.6s ease-out 0.9s 3; }

  /* Consulta que acabou de ser marcada, reagendada ou mudou de situação: pisca na cor do profissional */
  .agenda-bloco.ag-destaque, .agenda-item.ag-destaque { animation: ag-destaque 1.3s cubic-bezier(.16, 1, .3, 1); z-index: 5; }

  /* Profissionais: cartões em cascata; o relógio de quem atende hoje dá uma volta */
  .prof-lista .prof-card { animation: painel-entra 0.45s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: min(calc(0.06s + var(--i, 0) * 0.06s), 0.6s); }
  .prof-lista .prof-hoje.atende .icon { animation: ag-relogio 0.9s ease-in-out calc(0.4s + var(--i, 0) * 0.06s) backwards; }

  /* Faixa de alergias (ficha do paciente e janela da consulta): o alerta "pula" uma vez para chamar atenção */
  .paciente-alergias .icon { animation: painel-alerta 0.7s ease 0.35s; }
}
@keyframes ag-vem-da-direita { from { opacity: 0; transform: translateX(22px); } }
@keyframes ag-vem-da-esquerda { from { opacity: 0; transform: translateX(-22px); } }
@keyframes ag-bloco-entra { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
@keyframes ag-agora-traco { from { transform: scaleX(0); } }
@keyframes ag-relogio { from { transform: rotate(-360deg); } }
@keyframes ag-destaque {
  0% { transform: scale(1.045); box-shadow: 0 0 0 0 color-mix(in srgb, var(--prof-cor, #2463ff) 55%, transparent), var(--shadow-md); }
  70% { transform: none; box-shadow: 0 0 0 9px color-mix(in srgb, var(--prof-cor, #2463ff) 0%, transparent), var(--shadow-md); }
  100% { transform: none; }
}

/* ---------- Prontuário (ClinicLyros, etapa 5, 2026-10-12: renderProntuario em app.js) ----------
   Cor por tipo de registro (borda esquerda e etiqueta): atendimento no destaque, anamnese roxa, documento verde. */
.pr-cabecalho .paciente-alergias { margin: 14px 0 0; }
.pr-cab-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pr-avatar { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--btn-gradient); color: #fff; font-size: 22px; font-weight: 700; }
.pr-cab-nome { flex: 1; min-width: 220px; }
.pr-cab-nome h2 { margin: 0; font-size: 21px; }
.pr-cab-info { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.pr-cab-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-so-leitura { margin: 12px 0 0; display: flex; align-items: center; gap: 8px; }
.pr-so-leitura .icon { width: 16px; height: 16px; flex-shrink: 0; }
.pr-vazio { margin-bottom: 14px; }

.pr-resumo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.pr-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--card-bg); font-size: 13.5px; min-width: 0; }
.pr-card-titulo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 10px; }
.pr-card-titulo .icon { width: 16px; height: 16px; color: var(--accent); }
.pr-card-sub { font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 8px 0 3px; }
.pr-card-rodape { margin-top: 8px; font-size: 12px; }
.pr-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.pr-diagnosticos { list-style: none; padding: 0; }
.pr-retorno { margin-bottom: 8px; }
/* Catálogo (etapa 6): seções que só existem para itens com estoque ou só para procedimento */
.so-estoque[hidden], .so-sem-estoque[hidden], .so-procedimento[hidden], #form-produto .checkbox-row[hidden] { display: none !important; }
.pr-card button.link { background: none; border: none; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.pr-retorno.atrasado { color: #b45309; }
.pr-sinais { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pr-sinais span { padding: 3px 9px; border-radius: 20px; background: var(--accent-light); color: var(--accent); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

.pr-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pr-linha-tempo { display: flex; flex-direction: column; gap: 12px; }
.pr-registro { --pr-cor: var(--accent); border: 1px solid var(--border); border-left: 4px solid var(--pr-cor); border-radius: var(--radius-sm); background: var(--card-bg); padding: 12px 16px; }
.pr-registro.tipo-anamnese { --pr-cor: #7c3aed; }
.pr-registro.tipo-documento { --pr-cor: var(--green); }
.pr-registro.rascunho { border-style: dashed; border-left-style: solid; }
.pr-registro > header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.pr-tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pr-cor); }
.pr-quando { margin-left: auto; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pr-corpo { font-size: 13.5px; }
.pr-campo { margin: 6px 0; }
.pr-campo b { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 1px; }
.pr-campo > div, .pr-texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.pr-adendo { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--accent-light); font-size: 13px; }
.pr-adendo-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 3px; }
.pr-adendo-meta .icon { width: 13px; height: 13px; }
.pr-registro > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12.5px; }
.pr-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

.pr-anexos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.pr-anexo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg);
  font: inherit; text-align: left; color: var(--text); cursor: pointer; min-width: 0; }
.pr-anexo:hover { border-color: var(--accent); }
.pr-anexo-icone { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-light); color: var(--accent); flex-shrink: 0; }
.pr-anexo-info { display: flex; flex-direction: column; min-width: 0; }
.pr-anexo-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-anexo-info span { font-size: 12px; color: var(--text-muted); }

.pr-editor { max-width: 920px; }
.pr-editor-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.pr-editor-topo h3 { margin: 0; }
.pr-editor-topo #pr-salvo-em { font-size: 12.5px; }
.pr-consulta-ligada .icon { width: 15px; height: 15px; vertical-align: -2px; }
.pr-quando-row { max-width: 280px; }
.pr-secao { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin: 6px 0 8px; }
.pr-sinais-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0 12px; margin-bottom: 8px; }
.pr-sinais-grid label .muted { font-weight: 400; font-size: 11.5px; }
.pr-imc { display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; margin-bottom: 14px; border-radius: var(--radius-sm); background: var(--accent-light); }
.pr-imc span { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.pr-imc strong { font-size: 18px; color: var(--accent); font-variant-numeric: tabular-nums; }
.pr-soap { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; margin-left: 4px; background: var(--accent-light); color: var(--accent); font-size: 11px; font-weight: 800; vertical-align: 1px; }
.pr-linha-cid, .pr-linha-retorno { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; }
.pr-linha-retorno { grid-template-columns: 240px 200px; }
.pr-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-detalhe { margin-top: 8px; }
.pr-detalhe[hidden] { display: none; }
.pr-pergunta label { display: flex; align-items: baseline; gap: 6px; }
.pr-num { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 6px; background: var(--accent-light); color: var(--accent); font-size: 11px; font-weight: 800; flex-shrink: 0; }
.pr-doc-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 12px; }
.pr-doc-largo { grid-column: 1 / -1; }
#doc-texto { font-family: inherit; line-height: 1.55; }
#doc-refazer { margin-left: 8px; font-size: 12.5px; font-weight: 600; }
#doc-refazer[hidden], #doc-cid-wrap[hidden], #doc-cid-row[hidden], #pr-retorno-data-wrap[hidden] { display: none; }

.pr-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-top: 14px; }
.pr-modelo { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-bg); font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.pr-modelo:hover { border-color: var(--accent); }
.pr-modelo span { font-size: 12.5px; color: var(--text-muted); }
.pr-modelo.inativo { opacity: 0.6; }
#mod-perguntas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.pr-mod-pergunta { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pr-mod-pergunta .pr-num { margin-top: 9px; }
.pr-mod-campos { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 8px; min-width: 0; }
.pr-mod-campos textarea { grid-column: 1 / -1; }
.pr-mod-botoes { display: flex; align-items: center; gap: 2px; }

@media (max-width: 640px) {
  .pr-cab-acoes { width: 100%; }
  .pr-cab-acoes .btn { flex: 1 1 auto; justify-content: center; }
  .pr-quando { margin-left: 0; width: 100%; }
  .pr-acoes { margin-left: 0; }
  .pr-linha-cid, .pr-linha-retorno, .pr-mod-campos { grid-template-columns: minmax(0, 1fr); }
  .pr-mod-pergunta { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: no-preference) {
  .pr-linha-tempo .pr-registro, .pr-resumo .pr-card { animation: sis-entra 0.38s cubic-bezier(.16, 1, .3, 1) backwards; }
  .pr-linha-tempo .pr-registro:nth-child(2), .pr-resumo .pr-card:nth-child(2) { animation-delay: 0.05s; }
  .pr-linha-tempo .pr-registro:nth-child(3), .pr-resumo .pr-card:nth-child(3) { animation-delay: 0.1s; }
  .pr-linha-tempo .pr-registro:nth-child(n+4), .pr-resumo .pr-card:nth-child(n+4) { animation-delay: 0.15s; }
  /* Registro que acabou de ser finalizado, emitido ou recebeu adendo: um anel na cor do tipo */
  .pr-registro.pr-destaque { animation: pr-destaque 1.4s cubic-bezier(.16, 1, .3, 1); }
  .pr-editor { animation: sis-entra 0.3s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes pr-destaque {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pr-cor) 50%, transparent); }
  70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--pr-cor) 0%, transparent); }
  100% { box-shadow: none; }
}

/* ---------- Receita e medicamentos (ClinicLyros, etapa 6, 2026-10-12: abrirEditorReceita / receitaViaHtml em app.js) ----------
   Selo do controle: antimicrobiano laranja, controle especial (C1, C5) roxo, talonário oficial (listas A, B, C2, C3) vermelho. */
.pr-registro.tipo-receita { --pr-cor: #c2410c; }
.pr-config { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13px; }
.pr-config .icon { width: 14px; height: 14px; }
.pr-controle { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap;
  color: #6d28d9; background: #f1e9ff; vertical-align: 1px; margin-left: 4px; }
.pr-controle.ctl-antimicrobiano { color: #b45309; background: var(--orange-bg); }
.pr-controle.talonario { color: var(--red); background: var(--red-bg); }
.pr-rx-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pr-rx-via { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 8px 0 4px; }
.pr-rx-item { margin: 0 0 8px 2px; }
.pr-rx-linha { display: flex; align-items: baseline; gap: 6px; }
.pr-rx-pontos { flex: 1; border-bottom: 1px dotted var(--border-strong); transform: translateY(-3px); min-width: 20px; }
.pr-rx-posologia { margin: 2px 0 0 16px; color: var(--text-muted); white-space: pre-wrap; }
.pr-rx-aviso { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--red-bg); color: #991b1b; font-size: 12.5px; }
.pr-rx-aviso .icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }

.pr-rx-busca-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.pr-rx-busca { position: relative; flex: 1; min-width: 240px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card-bg); }
.pr-rx-busca:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.pr-rx-busca > .icon { width: 16px; height: 16px; color: var(--text-faint); }
.pr-rx-busca input { flex: 1; border: none; outline: none; padding: 11px 0; font: inherit; font-size: 14px; background: transparent; color: var(--text); }
.pr-rx-resultados { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 6; max-height: 320px; overflow-y: auto;
  background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.pr-rx-resultados[hidden] { display: none; }
.pr-rx-resultados button { display: block; width: 100%; padding: 9px 12px; border: none; border-bottom: 1px solid var(--border); background: none;
  font: inherit; font-size: 13.5px; text-align: left; color: var(--text); cursor: pointer; }
.pr-rx-resultados button:hover { background: var(--accent-light); }
.pr-rx-resultados button span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pr-rx-vazio { padding: 10px 12px; font-size: 13px; color: var(--text-muted); }
.pr-rx-itens { display: flex; flex-direction: column; gap: 10px; }
.pr-rx-card { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--card-bg); }
.pr-rx-card.talonario, .pr-rx-card.alergia { border-left-color: var(--red); }
.pr-rx-card-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pr-rx-nome { font-size: 14.5px; }
.pr-rx-card-topo .rx-remover { margin-left: auto; }
.pr-rx-livre { flex: 1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px; }
.pr-rx-livre input, .pr-rx-livre select { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; background: var(--card-bg); color: var(--text); min-width: 0; }
.pr-rx-campos { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: 0 12px; align-items: end; }
.pr-rx-campos .checkbox-row { margin-bottom: 14px; }
.pr-rx-resumo { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; margin-top: 4px; }
.pr-rx-resumo .icon { width: 15px; height: 15px; vertical-align: -2px; }
tr.linha-inativa td { opacity: 0.6; }
@media (max-width: 640px) {
  .pr-rx-livre, .pr-rx-campos { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Painel e Relatórios da clínica (ClinicLyros, etapa 7, 2026-10-12) ---------- */
.painel-card.tom-neutral { --tom: var(--text-muted); --tom-anel: rgba(102, 112, 133, 0.12); }
.painel-hoje { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 20px; }
@media (max-width: 1000px) { .painel-hoje { grid-template-columns: minmax(0, 1fr); } }
.painel-proximas { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.painel-proxima { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--border); border-left: 4px solid var(--prof-cor, var(--accent));
  border-radius: var(--radius-sm); color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.painel-proxima:hover { border-color: var(--border-strong); transform: translateX(2px); }
.pp-hora { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; min-width: 46px; }
.pp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-info span { font-size: 12.5px; color: var(--text-muted); }

/* Mapa de horários: a intensidade vem de --v (porcentagem do destaque); vazio fica só o fundo. */
.mapa-horarios { display: grid; grid-template-columns: 34px repeat(var(--horas), minmax(0, 1fr)); gap: 3px; margin-top: 8px; font-size: 11px; }
.mapa-horarios .mh-hora { text-align: center; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.mapa-horarios .mh-dia { font-weight: 700; color: var(--text-muted); align-self: center; }
.mapa-horarios .mh-cel { aspect-ratio: 1.25; min-height: 18px; border-radius: 4px; background: var(--acordeao-bg); display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: transparent; font-variant-numeric: tabular-nums; cursor: default; }
.mapa-horarios .mh-cel.com { background: color-mix(in srgb, var(--accent) var(--v), transparent); color: var(--accent); }
.mapa-horarios .mh-cel.forte { color: #fff; }
.mapa-horarios .mh-cel:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 640px) { .mapa-horarios { gap: 2px; font-size: 9.5px; grid-template-columns: 28px repeat(var(--horas), minmax(0, 1fr)); } .mapa-horarios .mh-cel { font-size: 0; } }

.ag-retornos-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--orange); color: #fff; font-size: 11.5px; font-weight: 800; }
.ag-retornos-n[hidden] { display: none; }
.retornos-lista { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.retorno-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); }
.retorno-item.atrasado { border-left-color: var(--orange); }
.retorno-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.retorno-info span { color: var(--text-muted); }
.retorno-item.atrasado .retorno-info b { color: #b45309; }

.rel-ag-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.rel-ag-titulo { margin: 20px 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); }
.rel-ag-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }
#rel-ag-preview .cards .card .valor small { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
#rel-ag-preview table { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .painel-proxima { animation: sis-entra 0.35s cubic-bezier(.16, 1, .3, 1) backwards; }
  .painel-proxima:nth-child(2) { animation-delay: 0.04s; } .painel-proxima:nth-child(3) { animation-delay: 0.08s; } .painel-proxima:nth-child(n+4) { animation-delay: 0.12s; }
  .mapa-horarios .mh-cel.com { animation: sis-aparece 0.5s ease 0.2s backwards; }
}