/* Clínica — estilos.
   Tipo: Atkinson Hyperlegible Next (feita para ler bem números, nomes e telefones).
   Cor: papel verde-acinzentado, tinta quase preta esverdeada e um verde-pinho para ações.
   Cada especialidade tem uma cor; é ela que marca as consultas na agenda. */

@font-face { font-family: 'AHN'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ahn-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'AHN'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ahn-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'AHN'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ahn-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'AHN'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/ahn-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'AHN'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/ahn-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'AHN'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ahn-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'AHN'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ahn-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'AHN'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/ahn-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ------------------------------------------------------------------ cores */
:root {
  --papel: #F2F4F3;
  --superficie: #FFFFFF;
  --superficie-2: #F7F9F8;
  --superficie-3: #EDF1EF;
  --tinta: #18211F;
  --tinta-2: #4A5753;
  --tinta-3: #6E7B77;
  --linha: #DCE3E0;
  --linha-forte: #C2CCC8;
  --linha-suave: #E9EEEC;
  --marca: #1F5C4A;
  --marca-forte: #164536;
  --marca-suave: #E2EFE9;
  --marca-txt: #1F5C4A;
  --sobre-marca: #FFFFFF;
  --ok: #2B7A4B;      --ok-bg: #E3F2E8;
  --aviso: #8A5A00;   --aviso-bg: #FBF1DA;  --aviso-linha: #EBCF8E;
  --erro: #B3261E;    --erro-bg: #FBE8E6;   --erro-linha: #EFB4AE;
  --info: #2F5DA8;    --info-bg: #E7EEF9;
  --espera: #B4541A;  --espera-bg: #FCEBDD;
  --tracejado: rgba(24, 33, 31, .055);
  --tracejado-forte: rgba(24, 33, 31, .11);
  --sombra: 0 1px 2px rgba(20, 30, 27, .06), 0 2px 8px rgba(20, 30, 27, .05);
  --sombra-alta: 0 12px 40px rgba(20, 30, 27, .22), 0 2px 8px rgba(20, 30, 27, .08);
  --agora: #D13B2E;
  --foco: #2F7FD1;
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --papel: #111715;
  --superficie: #19201E;
  --superficie-2: #1D2523;
  --superficie-3: #232C29;
  --tinta: #E4EBE8;
  --tinta-2: #B3C0BB;
  --tinta-3: #8A9893;
  --linha: #2C3633;
  --linha-forte: #3C4844;
  --linha-suave: #232B29;
  --marca: #5DB596;
  --marca-forte: #7FC9AE;
  --marca-suave: #1C3029;
  --marca-txt: #7FC9AE;
  --sobre-marca: #0E1714;
  --ok: #6FCF97;      --ok-bg: #16301F;
  --aviso: #F0C463;   --aviso-bg: #33290F;  --aviso-linha: #5C4A1C;
  --erro: #F2948B;    --erro-bg: #3A1C1A;   --erro-linha: #6B2E29;
  --info: #93B4F0;    --info-bg: #1B2740;
  --espera: #F4A574;  --espera-bg: #3A2416;
  --tracejado: rgba(228, 235, 232, .035);
  --tracejado-forte: rgba(228, 235, 232, .08);
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .25);
  --sombra-alta: 0 12px 40px rgba(0, 0, 0, .6);
  --agora: #FF7A6E;
  --foco: #7DB3F0;
  color-scheme: dark;
}

/* cores das especialidades e das pessoas */
.esp-violeta  { --esp: #6E4FA3; --esp-bg: #F1EDF8; --esp-txt: #4F367D; }
.esp-framboesa{ --esp: #B5386A; --esp-bg: #FAEBF1; --esp-txt: #8C2550; }
.esp-petroleo { --esp: #1C7487; --esp-bg: #E5F3F6; --esp-txt: #11596A; }
.esp-ocre     { --esp: #A8720C; --esp-bg: #FBF2E0; --esp-txt: #7D5406; }
.esp-lima     { --esp: #5E7F1B; --esp-bg: #EFF5E2; --esp-txt: #456010; }
.esp-azul     { --esp: #3459B8; --esp-bg: #E9EEFA; --esp-txt: #253F86; }
.esp-canela   { --esp: #8B5634; --esp-bg: #F6EDE6; --esp-txt: #683F25; }
.esp-ardosia  { --esp: #556677; --esp-bg: #ECEFF2; --esp-txt: #3E4B58; }
:root[data-tema="escuro"] .esp-violeta  { --esp: #B49BE8; --esp-bg: #2A2238; --esp-txt: #D4C4F5; }
:root[data-tema="escuro"] .esp-framboesa{ --esp: #EE8DB5; --esp-bg: #3A1F2B; --esp-txt: #F7BDD4; }
:root[data-tema="escuro"] .esp-petroleo { --esp: #6FC6D9; --esp-bg: #15303A; --esp-txt: #A8E0EC; }
:root[data-tema="escuro"] .esp-ocre     { --esp: #E2B45A; --esp-bg: #362A14; --esp-txt: #F0D49B; }
:root[data-tema="escuro"] .esp-lima     { --esp: #A9CC63; --esp-bg: #26301A; --esp-txt: #CFE6A3; }
:root[data-tema="escuro"] .esp-azul     { --esp: #93AEEF; --esp-bg: #1E2840; --esp-txt: #C1D1F7; }
:root[data-tema="escuro"] .esp-canela   { --esp: #D9A27F; --esp-bg: #33261D; --esp-txt: #EBC7AF; }
:root[data-tema="escuro"] .esp-ardosia  { --esp: #A9B7C6; --esp-bg: #252B33; --esp-txt: #CDD6E0; }

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'AHN', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--papel);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }
h1 { font-size: 22px; letter-spacing: -0.01em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 .6em; }
a { color: var(--marca-txt); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--marca) 25%, transparent); }
[hidden] { display: none !important; }
.mudo { color: var(--tinta-2); }
.fraco { color: var(--tinta-3); }
.pequeno { font-size: 13px; }
.mini { font-size: 12px; }
.forte { font-weight: 600; }
.direita { text-align: right; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ic.cheio { fill: currentColor; stroke: none; }

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

/* --------------------------------------------------------------- arranque */
.arranque { display: grid; place-items: center; height: 100vh; color: var(--tinta-3); }

/* ------------------------------------------------------------------ casca */
.app { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.carril {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--superficie); border-right: 1px solid var(--linha); padding: 14px 10px 10px;
}
.identidade { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; min-height: 52px; }
.identidade img { max-width: 100%; max-height: 44px; object-fit: contain; }
.identidade .nome-clinica { font-weight: 700; font-size: 16px; line-height: 1.15; }
.identidade .marca-app { font-size: 12px; color: var(--tinta-3); }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px;
  color: var(--tinta-2); font-weight: 500; text-decoration: none; position: relative;
}
.nav a:hover { background: var(--superficie-3); color: var(--tinta); }
.nav a.ativo { background: var(--marca-suave); color: var(--marca-txt); font-weight: 600; }
.nav a .ic { width: 20px; height: 20px; }
.contador {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--marca); color: var(--sobre-marca); font-size: 12px; font-weight: 700;
  display: inline-grid; place-items: center;
}
.contador.alerta { background: var(--espera); color: #fff; }
:root[data-tema="escuro"] .contador.alerta { color: #1F120A; }
.eu-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: 0;
  background: none; text-align: left; width: 100%; margin-top: 8px; border-top: 1px solid var(--linha-suave);
}
.eu-chip:hover { background: var(--superficie-3); }
.eu-chip .nome { font-weight: 600; font-size: 14px; line-height: 1.2; }
.eu-chip .papel { font-size: 12px; color: var(--tinta-3); }
.principal { min-width: 0; display: flex; flex-direction: column; }
.topo-movel, .barra-baixo { display: none; }

.pagina { padding: 22px 28px 48px; max-width: 1240px; width: 100%; }
.pagina.larga { max-width: none; }
.cab-pagina { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cab-pagina h1 { margin-right: auto; }
.cab-pagina .sub { width: 100%; margin-top: -10px; color: var(--tinta-2); }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* separadores */
.separadores { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.separadores::-webkit-scrollbar { display: none; }
.separadores a, .separadores button {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 0; background: none;
  color: var(--tinta-2); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none;
}
.separadores a:hover, .separadores button:hover { color: var(--tinta); }
.separadores .ativo { color: var(--marca-txt); border-bottom-color: var(--marca); font-weight: 600; }

/* --------------------------------------------------------------- controlos */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta);
  font-weight: 600; font-size: 14px; white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s;
}
.bt:hover { background: var(--superficie-3); text-decoration: none; }
.bt:disabled { opacity: .5; cursor: not-allowed; }
.bt.primario { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.bt.primario:hover { background: var(--marca-forte); border-color: var(--marca-forte); }
.bt.perigo { color: var(--erro); border-color: var(--erro-linha); }
.bt.perigo:hover { background: var(--erro-bg); }
.bt.perigo.cheio { background: var(--erro); border-color: var(--erro); color: #fff; }
:root[data-tema="escuro"] .bt.perigo.cheio { color: #1A0D0C; }
.bt.fantasma { border-color: transparent; background: none; }
.bt.fantasma:hover { background: var(--superficie-3); }
.bt.peq { min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: 7px; }
.bt.icone { padding: 0; width: 38px; }
.bt.peq.icone { width: 32px; }
.bt .ic { width: 17px; height: 17px; }
.bt.a-carregar { position: relative; color: transparent !important; }
.bt.a-carregar::after {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--tinta-3); border-top-color: transparent; animation: roda .7s linear infinite;
}
.bt.primario.a-carregar::after { border-color: var(--sobre-marca); border-top-color: transparent; }
@keyframes roda { to { transform: rotate(360deg); } }

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > label, .campo > .rot { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.campo .ajuda { font-size: 12px; color: var(--tinta-3); }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=time],
input[type=search], input[type=password], input:not([type]), select, textarea {
  width: 100%; min-height: 40px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--linha-forte);
  background: var(--superficie); color: var(--tinta); font-size: 15px;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236E7B77' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent); }
input:disabled, select:disabled, textarea:disabled { background: var(--superficie-2); color: var(--tinta-3); }
input[aria-invalid=true] { border-color: var(--erro); }
input::placeholder, textarea::placeholder { color: var(--tinta-3); }
.grelha-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; }
.grelha-campos .largo { grid-column: 1 / -1; }
.grelha-campos.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grelha-campos .meio { grid-column: span 2; }
.linha-campos { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.linha-campos > .campo { flex: 1 1 140px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.secao-form { padding: 18px 0; border-top: 1px solid var(--linha-suave); }
.secao-form:first-child { border-top: 0; padding-top: 0; }
.secao-form > h3 { margin-bottom: 12px; }

/* ficha do cliente: áreas (área, profissional, acordo, nº) e preços próprios (serviço, valor, explicação) */
.linha-area, .linha-preco { display: grid; gap: 10px 12px; align-items: end; padding: 10px 0; border-bottom: 1px dashed var(--linha-suave); }
.linha-area { grid-template-columns: minmax(130px, 1fr) minmax(150px, 1.3fr) minmax(130px, 1fr) minmax(120px, 1fr) 32px; }
.linha-preco { grid-template-columns: minmax(170px, 1.4fr) minmax(110px, .7fr) minmax(160px, 1.6fr) 32px; }
.linha-area .bt.icone, .linha-preco .bt.icone { margin-bottom: 4px; }
.linha-preco .explica { align-self: center; padding-top: 18px; line-height: 1.35; }
[data-areas]:empty, [data-precos]:empty { display: none; }
[data-areas], [data-precos] { margin-bottom: 10px; }
/* marcação: as áreas do cliente (um toque escolhe o profissional e o serviço) */
.areas-cliente { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.chip-area {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta-2); font-weight: 600; font-size: 13px;
}
.chip-area:hover { border-color: var(--esp); color: var(--tinta); }
.chip-area.ativo { background: var(--esp-bg); border-color: var(--esp); color: var(--esp-txt); }
.areas-ficha li { gap: 10px; }
/* serviços: preço de cada profissional */
.linha-prof-preco { display: grid; grid-template-columns: 1fr 140px; gap: 10px; align-items: center; padding: 4px 0; }
.linha-prof-preco label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; min-width: 0; }
.linha-prof-preco label span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.marcar { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 4px 0; }
.marcar input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--marca); flex: none; }
.marcar .txt small { display: block; color: var(--tinta-3); font-size: 12.5px; }

/* opções lado a lado (estado, forma de pagamento) */
.opcoes { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.opcoes button, .opcoes label {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--linha-forte); background: var(--superficie); font-weight: 600; font-size: 13.5px; color: var(--tinta-2); cursor: pointer;
}
.opcoes button:hover, .opcoes label:hover { border-color: var(--tinta-3); color: var(--tinta); }
.opcoes .sim, .opcoes input:checked + span { color: var(--marca-txt); }
.opcoes .sim { background: var(--marca-suave); border-color: var(--marca); }
.opcoes label:has(input:checked) { background: var(--marca-suave); border-color: var(--marca); color: var(--marca-txt); }
.opcoes input { position: absolute; opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------- peças */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  background: var(--esp-bg); color: var(--esp-txt); font-weight: 700; font-size: 13px; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1.5px var(--esp);
}
.avatar.peq { width: 26px; height: 26px; font-size: 11px; }
.avatar.grande { width: 44px; height: 44px; font-size: 16px; }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--esp); display: inline-block; flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--superficie-3); color: var(--tinta-2); white-space: nowrap; line-height: 20px;
}
.chip.esp { background: var(--esp-bg); color: var(--esp-txt); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.aviso { background: var(--aviso-bg); color: var(--aviso); }
.chip.erro { background: var(--erro-bg); color: var(--erro); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip.espera { background: var(--espera-bg); color: var(--espera); }
.chip.marca { background: var(--marca-suave); color: var(--marca-txt); }

/* estado das consultas */
.estado { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; line-height: 20px; }
.estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.estado.e-marcada { background: var(--superficie-3); color: var(--tinta-2); }
.estado.e-confirmada { background: var(--info-bg); color: var(--info); }
.estado.e-chegou { background: var(--espera-bg); color: var(--espera); }
.estado.e-em_consulta { background: var(--marca-suave); color: var(--marca-txt); }
.estado.e-realizada { background: var(--ok-bg); color: var(--ok); }
.estado.e-faltou { background: var(--erro-bg); color: var(--erro); }
.estado.e-desmarcada { background: var(--superficie-3); color: var(--tinta-3); }
.estado.e-desmarcada::before { border-radius: 1px; height: 2px; }

.pago { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; }
.pago.p-pago { color: var(--ok); }
.pago.p-por-pagar { color: var(--aviso); }
.pago.p-parcial { color: var(--aviso); }
.pago.p-sem-preco { color: var(--tinta-3); }

.caixa { background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; }
.caixa > .cab { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.caixa > .cab h2 { margin-right: auto; }
.caixa > .corpo { padding: 0 16px 16px; }
.caixa.plana { border: 0; background: none; }

.aviso-caixa { display: flex; gap: 10px; padding: 11px 14px; border-radius: 10px; background: var(--aviso-bg); color: var(--tinta); border: 1px solid var(--aviso-linha); font-size: 14px; }
.aviso-caixa .ic { color: var(--aviso); margin-top: 1px; }
.aviso-caixa.info { background: var(--info-bg); border-color: transparent; }
.aviso-caixa.info .ic { color: var(--info); }
.aviso-caixa.erro { background: var(--erro-bg); border-color: var(--erro-linha); }
.aviso-caixa.erro .ic { color: var(--erro); }
.aviso-caixa.ok { background: var(--ok-bg); border-color: transparent; }
.aviso-caixa.ok .ic { color: var(--ok); }

.vazio { padding: 36px 16px; text-align: center; color: var(--tinta-2); }
.vazio .ic { width: 30px; height: 30px; color: var(--tinta-3); margin-bottom: 8px; }
.vazio h3 { margin-bottom: 6px; color: var(--tinta); }
.vazio .bt { margin-top: 12px; }

/* tabelas */
.tabela-envolve { overflow-x: auto; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); padding: 10px 12px; border-bottom: 1px solid var(--linha); background: var(--superficie-2); white-space: nowrap; }
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linha-suave); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tbody tr.clicavel:hover td { background: var(--superficie-2); }
.tabela tfoot td { font-weight: 700; border-top: 1px solid var(--linha); background: var(--superficie-2); }
.tabela .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela td.acoes-linha { text-align: right; white-space: nowrap; }

/* listas simples */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linha-suave); }
.lista > li:last-child { border-bottom: 0; }
.lista .cresce { flex: 1; min-width: 0; }
.lista .titulo-linha { font-weight: 600; }
.lista .sub-linha { font-size: 13px; color: var(--tinta-2); }

/* números grandes */
.contas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.conta {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: 13px 15px 12px; text-decoration: none; color: inherit; display: block;
}
a.conta:hover, button.conta:hover { border-color: var(--linha-forte); text-decoration: none; }
button.conta { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.contas.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.conta .valor { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.conta .rotulo { font-size: 13px; color: var(--tinta-2); margin-top: 3px; }
.conta.destaque { border-color: var(--espera); background: var(--espera-bg); }
.conta.destaque .valor { color: var(--espera); }

/* ---------------------------------------------------------- diálogos */
/* O fundo ocupa só a parte do ecrã que se vê (no telemóvel, sem a barra do navegador nem o teclado: ui.js põe
   --vv-topo e --vv-altura) e o diálogo nunca é mais alto do que ele: o topo e o fundo ficam sempre à vista. */
.fundo-dialogo {
  position: fixed; left: 0; right: 0; top: var(--vv-topo, 0px); height: var(--vv-altura, 100%); z-index: 50;
  background: rgba(10, 16, 14, .44); display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: aparece .14s ease-out;
}
@keyframes aparece { from { opacity: 0; } }
.dialogo {
  width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--superficie);
  border-radius: 14px; box-shadow: var(--sombra-alta); overflow: hidden; animation: sobe .16s ease-out;
}
@keyframes sobe { from { transform: translateY(8px); opacity: .6; } }
.dialogo.largo { width: min(820px, 100%); }
.dialogo.estreito { width: min(420px, 100%); }
.dialogo > header { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--linha-suave); }
.dialogo > header h2 { margin-right: auto; font-size: 18px; }
.dialogo > .corpo { padding: 16px 18px; overflow: auto; }
.dialogo > footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--linha-suave); flex-wrap: wrap; background: var(--superficie-2); }
.dialogo > footer .esq { margin-right: auto; }

/* gaveta (ficha da consulta) */
.gaveta-fundo { position: fixed; inset: 0; z-index: 40; background: rgba(10, 16, 14, .3); animation: aparece .14s; }
.gaveta {
  /* como os diálogos: só na parte do ecrã que se vê (no telemóvel, com o teclado aberto) */
  position: fixed; top: var(--vv-topo, 0px); right: 0; height: var(--vv-altura, 100%); z-index: 41; width: min(470px, 100vw); background: var(--superficie);
  box-shadow: var(--sombra-alta); display: flex; flex-direction: column; animation: entraDir .18s ease-out;
}
@keyframes entraDir { from { transform: translateX(24px); opacity: .5; } }
.gaveta > header { padding: 16px 18px 12px; border-bottom: 1px solid var(--linha-suave); display: flex; gap: 12px; align-items: flex-start; }
.gaveta > header .cresce { flex: 1; min-width: 0; }
.gaveta > .corpo { padding: 4px 18px 24px; overflow: auto; flex: 1; }
.gaveta section { padding: 14px 0; border-bottom: 1px solid var(--linha-suave); }
.gaveta section:last-child { border-bottom: 0; }
.gaveta section > h3 { font-size: 13px; color: var(--tinta-2); font-weight: 600; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.gaveta section > h3 .acao { margin-left: auto; }
.factos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.factos dt { color: var(--tinta-3); }
.factos dd { margin: 0; }

/* menu */
.menu {
  position: fixed; z-index: 60; min-width: 210px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px;
  box-shadow: var(--sombra-alta); padding: 6px; animation: aparece .1s;
}
.menu button, .menu a {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 7px;
  text-align: left; color: var(--tinta); font-size: 14px; text-decoration: none;
}
.menu button:hover, .menu a:hover { background: var(--superficie-3); text-decoration: none; }
.menu .sep { height: 1px; background: var(--linha-suave); margin: 5px 4px; }
.menu .titulo-menu { padding: 6px 10px 4px; font-size: 12px; color: var(--tinta-3); font-weight: 600; }
.menu .ativo { color: var(--marca-txt); font-weight: 600; }

/* avisos que aparecem e desaparecem */
.avisos { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.avisos > .aviso {
  pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; max-width: min(420px, calc(100vw - 36px)); padding: 12px 14px;
  border-radius: 10px; background: var(--tinta); color: var(--papel); box-shadow: var(--sombra-alta); font-size: 14px; animation: sobe .18s ease-out;
}
.avisos > .aviso.ok .ic { color: #7EDDA6; }
:root[data-tema="escuro"] .avisos > .aviso.ok .ic { color: var(--ok); }
.avisos > .aviso.erro { background: var(--erro); color: #fff; }
:root[data-tema="escuro"] .avisos > .aviso.erro { color: #1A0D0C; }
.avisos > .aviso.chegada { background: var(--espera); color: #fff; font-size: 15px; }
:root[data-tema="escuro"] .avisos > .aviso.chegada { color: #1F120A; }
.avisos > .aviso .acao-aviso { margin-left: 6px; color: inherit; font-weight: 700; text-decoration: underline; background: none; border: 0; padding: 0; }
.avisos > .aviso .fechar-aviso { background: none; border: 0; color: inherit; opacity: .7; padding: 0 0 0 6px; }

/* ---------------------------------------------------------------- entrar */
.entrar {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); background: var(--superficie);
}
.entrar .lado {
  background: var(--marca); color: var(--sobre-marca); padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
:root[data-tema="escuro"] .entrar .lado { background: #16302A; color: var(--tinta); }
.entrar .lado .nome-grande { font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; max-width: 12ch; }
.entrar .lado .logo-grande { max-width: 260px; max-height: 120px; object-fit: contain; background: #fff; padding: 14px 18px; border-radius: 12px; }
.entrar .lado .rodape-lado { font-size: 13px; opacity: .8; }
.entrar .lado .hora-grande { font-size: 15px; opacity: .9; margin-top: 10px; }
.entrar .lado .esp-lado { list-style: none; margin: auto 0 28px; padding: 0; font-size: clamp(18px, 1.9vw, 24px); font-weight: 600; line-height: 1.55; }
.entrar .lado .esp-lado li { display: flex; align-items: center; gap: 12px; }
.entrar .lado .esp-lado .ponto { width: 11px; height: 11px; }
/* no painel verde, as cores das especialidades em versão clara */
.entrar .lado .esp-violeta { --esp: #C9B5F2; } .entrar .lado .esp-framboesa { --esp: #F4A6C6; }
.entrar .lado .esp-petroleo { --esp: #8ED8E8; } .entrar .lado .esp-ocre { --esp: #F0C771; }
.entrar .lado .esp-lima { --esp: #C2E07F; } .entrar .lado .esp-azul { --esp: #AFC4F5; }
.entrar .lado .esp-canela { --esp: #E8BB9C; } .entrar .lado .esp-ardosia { --esp: #C3CEDA; }
.entrar .formulario { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; gap: 18px; max-width: 520px; width: 100%; }
.entrar h1 { font-size: 24px; }
.entrar .formulario input:not([type=checkbox]):not([type=radio]), .entrar .formulario select { min-height: 46px; font-size: 16px; }
.senha-campo { position: relative; }
.senha-campo input { padding-right: 96px; }
.senha-campo .mostrar { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.campo-prefixo input[data-prefixo-outro] { margin-top: 6px; }
.linha-campos > .campo-prefixo { flex: 0 1 120px; }
.credenciais { margin: 14px 0; padding: 4px 14px 12px; border-radius: 10px; background: var(--superficie-2); }
.credenciais dt { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); margin-top: 8px; }
.credenciais dd { margin: 1px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.credenciais code { font-size: 15px; }
.erro-form { color: var(--erro); font-weight: 600; font-size: 14px; min-height: 20px; }

/* ------------------------------------------------------------------- hoje */
.hoje-grelha { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.hoje-grelha > .lateral { display: flex; flex-direction: column; gap: 16px; }
.dia-lista { list-style: none; margin: 0; padding: 0; }
.dia-lista > li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--linha-suave);
  align-items: center; position: relative;
}
.dia-lista > li::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; background: var(--esp); }
.dia-lista > li:last-child { border-bottom: 0; }
.dia-lista .hora-col { font-weight: 700; font-size: 16px; line-height: 1.1; }
.dia-lista .hora-col small { display: block; font-weight: 400; font-size: 12px; color: var(--tinta-3); }
.dia-lista .quem { font-weight: 600; font-size: 15.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dia-lista .detalhe { font-size: 13px; color: var(--tinta-2); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.dia-lista .recado { margin-top: 6px; font-size: 13.5px; background: var(--aviso-bg); border-radius: 7px; padding: 5px 9px; display: inline-flex; gap: 6px; align-items: flex-start; }
.dia-lista .recado .ic { color: var(--aviso); width: 16px; height: 16px; margin-top: 1px; }
.dia-lista > li.e-chegou { background: var(--espera-bg); }
.dia-lista > li.e-em_consulta { background: var(--marca-suave); }
.dia-lista > li.e-realizada .quem, .dia-lista > li.e-realizada .hora-col { color: var(--tinta-3); }
.dia-lista > li.e-desmarcada .quem span.n, .dia-lista > li.e-faltou .quem span.n { text-decoration: line-through; color: var(--tinta-3); }
.dia-lista > li.clicavel { cursor: pointer; }
.dia-lista > li.clicavel:hover { background: var(--superficie-2); }
.dia-lista > li.e-chegou.clicavel:hover { background: color-mix(in srgb, var(--espera-bg) 80%, var(--superficie-3)); }
.dia-lista .acoes-rapidas { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.espera-desde { font-weight: 600; color: var(--espera); }
.equipa-dia > li { padding: 10px 0; }
.equipa-dia a.cresce { color: inherit; text-decoration: none; }
.equipa-dia a.cresce:hover .titulo-linha { color: var(--marca-txt); }
.equipa-dia .conta-dia { text-align: right; font-size: 13px; color: var(--tinta-2); white-space: nowrap; }
.equipa-dia .conta-dia b { display: block; font-size: 16px; color: var(--tinta); }

.passos-lista { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passos-lista li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linha-suave); counter-increment: passo; }
.passos-lista li:last-child { border-bottom: 0; }
.passos-lista li::before {
  content: counter(passo); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--superficie-3); color: var(--tinta-2); flex: none;
}
.passos-lista li.feito::before { content: '✓'; background: var(--ok-bg); color: var(--ok); }
.passos-lista li.feito a { color: var(--tinta-3); }

/* --------------------------------------------------------------- agenda */
.agenda-pagina { padding: 16px 20px 24px; display: flex; flex-direction: column; height: 100vh; min-height: 560px; }
.ag-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ag-barra .titulo-dia { font-size: 20px; font-weight: 700; margin: 0 6px; min-width: 0; }
.ag-barra .titulo-dia small { font-weight: 500; color: var(--tinta-3); font-size: 14px; margin-left: 6px; }
.ag-barra .empurra { margin-left: auto; }
.ag-barra input[type=date] { width: auto; min-height: 38px; }
.ag-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ag-filtros button {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--linha);
  background: var(--superficie); font-size: 13px; font-weight: 600; color: var(--tinta-2);
}
.ag-filtros button.sim { background: var(--esp-bg); border-color: var(--esp); color: var(--esp-txt); }
.ag-filtros button.todos.sim { background: var(--marca-suave); border-color: var(--marca); color: var(--marca-txt); }

.ag-quadro {
  --hora-h: 80px;
  flex: 1; min-height: 0; overflow: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; position: relative;
}
.ag-grelha { display: grid; position: relative; min-width: max-content; }
.ag-canto { position: sticky; top: 0; left: 0; z-index: 6; background: var(--superficie); border-bottom: 1px solid var(--linha); border-right: 1px solid var(--linha); }
.ag-placas { display: contents; }
.ag-placa {
  position: sticky; top: 0; z-index: 5; background: var(--superficie); border-bottom: 1px solid var(--linha); border-right: 1px solid var(--linha-suave);
  padding: 10px 10px 9px; display: flex; gap: 9px; align-items: center; min-width: 0;
}
.ag-placa .quem { min-width: 0; }
.ag-placa .nome { font-weight: 700; font-size: 14px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-placa .onde { font-size: 12px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-placa .onde .ponto { width: 7px; height: 7px; margin-right: 4px; vertical-align: 1px; }
.ag-placa.ausente .nome { color: var(--tinta-3); }
.ag-placa.dia-semana { flex-direction: column; align-items: flex-start; gap: 0; cursor: pointer; }
.ag-placa.dia-semana .nome { font-size: 13px; text-transform: none; }
.ag-placa.dia-semana .num-dia { font-size: 20px; font-weight: 700; line-height: 1; }
.ag-placa.dia-semana.hoje .num-dia { color: var(--sobre-marca); background: var(--marca); border-radius: 8px; padding: 2px 6px; }
.ag-horas { position: sticky; left: 0; z-index: 4; background: var(--superficie); border-right: 1px solid var(--linha); }
.ag-horas .h { height: var(--hora-h); position: relative; font-size: 12px; color: var(--tinta-3); text-align: right; padding-right: 8px; }
.ag-horas .h span { position: relative; top: -8px; background: var(--superficie); padding-left: 4px; }
.ag-horas .h:first-child span { top: 2px; }
.ag-coluna { position: relative; border-right: 1px solid var(--linha-suave); background-image: linear-gradient(to bottom, var(--linha-suave) 1px, transparent 1px), linear-gradient(to bottom, var(--linha) 1px, transparent 1px); background-size: 100% calc(var(--hora-h) / 2), 100% var(--hora-h); cursor: copy; }
.ag-coluna.so-ver { cursor: default; }
.ag-fora { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--tracejado) 0 6px, transparent 6px 12px); pointer-events: none; }
.ag-ausencia {
  position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--tracejado-forte) 0 6px, transparent 6px 12px);
  border-top: 1px solid var(--linha-forte); border-bottom: 1px solid var(--linha-forte); pointer-events: none; display: flex; justify-content: center; padding-top: 10px;
}
.ag-ausencia span { font-size: 12.5px; font-weight: 700; color: var(--tinta-2); background: var(--superficie); padding: 2px 10px; border-radius: 999px; border: 1px solid var(--linha-forte); height: fit-content; }
.ag-ausencia.pedida span { border-style: dashed; }
.ag-fecho { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--tracejado-forte) 0 6px, transparent 6px 12px); display: flex; justify-content: center; padding-top: 24px; pointer-events: none; }
.ag-fecho span { font-size: 13px; font-weight: 700; color: var(--tinta-2); background: var(--superficie); padding: 4px 12px; border-radius: 999px; height: fit-content; border: 1px solid var(--linha-forte); }
.ag-agora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--agora); z-index: 3; pointer-events: none; }
.ag-agora::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--agora); }
.ag-sombra { position: absolute; left: 3px; right: 3px; border-radius: 6px; border: 2px dashed var(--marca); background: var(--marca-suave); pointer-events: none; z-index: 2; opacity: .85; font-size: 12px; font-weight: 700; color: var(--marca-txt); padding: 2px 6px; }

.ag-consulta {
  position: absolute; z-index: 2; border-radius: 6px; padding: 4px 7px 4px 9px; overflow: hidden; cursor: pointer;
  background: var(--esp-bg); border: 1px solid color-mix(in srgb, var(--esp) 28%, transparent); border-left: 4px solid var(--esp);
  color: var(--tinta); font-size: 12.5px; line-height: 1.25; text-align: left; display: flex; flex-direction: column; gap: 1px;
}
.ag-consulta:hover { box-shadow: var(--sombra); z-index: 3; }
.ag-consulta .l1 { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.ag-consulta .hh { font-weight: 700; color: var(--esp-txt); flex: none; }
.ag-consulta .cli { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-consulta .srv { color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-consulta .marcas { position: absolute; right: 5px; bottom: 4px; display: flex; gap: 3px; align-items: center; }
.ag-consulta .marcas .ic { width: 14px; height: 14px; color: var(--tinta-2); }
.ag-consulta .marcas .ic.pago { color: var(--ok); }
.ag-consulta .marcas .ic.por-pagar { color: var(--aviso); }
.ag-consulta .est { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; line-height: 17px; margin-top: 1px; }
.ag-consulta.e-confirmada .est { background: var(--info-bg); color: var(--info); }
.ag-consulta.e-chegou { box-shadow: 0 0 0 2px var(--espera); }
.ag-consulta.e-chegou .est { background: var(--espera); color: #fff; }
:root[data-tema="escuro"] .ag-consulta.e-chegou .est { color: #1F120A; }
.ag-consulta.e-em_consulta { background: color-mix(in srgb, var(--esp) 22%, var(--superficie)); }
.ag-consulta.e-em_consulta .est { background: var(--marca); color: var(--sobre-marca); }
.ag-consulta.e-realizada { opacity: .72; }
.ag-consulta.e-realizada .est { background: var(--ok-bg); color: var(--ok); }
.ag-consulta.e-faltou { background: var(--superficie); border: 1px dashed var(--erro); border-left: 4px solid var(--erro); }
.ag-consulta.e-faltou .est { background: var(--erro-bg); color: var(--erro); }
.ag-consulta.e-faltou .cli, .ag-consulta.e-desmarcada .cli { text-decoration: line-through; }
.ag-consulta.e-desmarcada { opacity: .55; background: var(--superficie-2); border: 1px dashed var(--linha-forte); border-left: 4px solid var(--linha-forte); z-index: 1; }
.ag-consulta.oculta { background: var(--superficie-3); border: 1px solid var(--linha); border-left: 4px solid var(--esp); cursor: default; color: var(--tinta-3); }
.ag-consulta.curta { flex-direction: row; align-items: center; gap: 6px; padding-top: 1px; padding-bottom: 1px; }
.ag-consulta.curta .srv, .ag-consulta.curta .est { display: none; }
.ag-consulta.com-recado::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--aviso); }

.ag-lista-movel { display: none; }

/* ------------------------------------------------------------ definições */
.def-grelha { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: start; }
.def-nav { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 2px; }
.def-nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--tinta-2);
  font-weight: 500; text-decoration: none; white-space: nowrap;
}
.def-nav a:hover { background: var(--superficie-3); color: var(--tinta); text-decoration: none; }
.def-nav a.ativo { background: var(--superficie); color: var(--marca-txt); font-weight: 600; box-shadow: inset 0 0 0 1px var(--linha); }
.def-nav a .ic { width: 18px; height: 18px; }

/* -------------------------------------------------------- ficha cliente */
.ficha-cab { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.ficha-cab .cresce { flex: 1; min-width: 240px; }
.ficha-cab h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ficha-cab .processo { font-size: 14px; font-weight: 600; color: var(--tinta-3); }
.ficha-cab .contactos { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; color: var(--tinta-2); font-size: 14px; }
.ficha-cab .contactos span { display: inline-flex; gap: 6px; align-items: center; }

.nota-cartao { border-left: 3px solid var(--linha-forte); padding: 4px 0 4px 14px; margin-bottom: 18px; }
.nota-cartao .meta { font-size: 13px; color: var(--tinta-3); display: flex; gap: 10px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.nota-cartao .texto { white-space: pre-wrap; line-height: 1.55; }
.privado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-2); background: var(--superficie-3); padding: 4px 10px; border-radius: 999px; }

/* ------------------------------------------------------- mapa de ausências */
.mapa-envolve { overflow: auto; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); }
table.mapa { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.mapa th, .mapa td { border-right: 1px solid var(--linha-suave); border-bottom: 1px solid var(--linha-suave); }
.mapa thead th { position: sticky; top: 0; background: var(--superficie-2); z-index: 2; font-weight: 600; color: var(--tinta-2); padding: 6px 0; width: 32px; min-width: 32px; text-align: center; }
.mapa thead th .dsem { display: block; font-size: 10.5px; color: var(--tinta-3); font-weight: 500; }
.mapa thead th.fds, .mapa td.fds { background: var(--superficie-3); }
.mapa thead th.feriado, .mapa td.feriado { background: var(--aviso-bg); }
.mapa thead th.hoje { color: var(--sobre-marca); background: var(--marca); }
.mapa thead th.hoje .dsem { color: var(--sobre-marca); }
.mapa th.pessoa-col, .mapa td.pessoa-col { position: sticky; left: 0; z-index: 3; background: var(--superficie); text-align: left; padding: 6px 12px; min-width: 190px; white-space: nowrap; font-size: 13.5px; }
.mapa thead th.pessoa-col { z-index: 4; background: var(--superficie-2); }
.mapa td.dia { height: 38px; padding: 0; position: relative; cursor: pointer; }
.mapa td.dia:hover { background: var(--superficie-2); }
.mapa .marca-aus { position: absolute; inset: 7px 0; display: grid; place-items: center; font-weight: 700; font-size: 11px; color: #fff; }
.mapa .marca-aus.inicio { left: 3px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.mapa .marca-aus.fim { right: 3px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.t-ferias { background: #2F7D6B; }
.t-folga { background: #5E7F1B; }
.t-formacao { background: #3459B8; }
.t-baixa { background: #B5386A; }
.t-falta { background: #B3261E; }
.t-outro, .t-ausente { background: #6E7B77; }
.marca-aus.pedida { background: repeating-linear-gradient(135deg, var(--cor-t, #2F7D6B) 0 5px, color-mix(in srgb, var(--cor-t, #2F7D6B) 55%, transparent) 5px 10px); }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--tinta-2); margin: 10px 0 18px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }

/* horário semanal */
.horario-semana { display: grid; grid-template-columns: repeat(var(--dias, 7), minmax(0, 1fr)); gap: 8px; }
.horario-semana .dia-h { background: var(--superficie-2); border-radius: 10px; padding: 8px; min-height: 64px; }
.horario-semana .dia-h h4 { font-size: 12.5px; color: var(--tinta-2); margin-bottom: 6px; }
.horario-semana .bloco { font-size: 12.5px; font-weight: 600; background: var(--esp-bg); color: var(--esp-txt); border-left: 3px solid var(--esp); border-radius: 5px; padding: 3px 6px; margin-bottom: 4px; }
.horario-semana .bloco small { display: block; font-weight: 500; color: var(--tinta-2); }
.blocos-edicao .linha-bloco { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }

/* barras (números) */
.barras { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 8px 0 0; }
.barras .b { flex: 1; min-width: 4px; background: var(--marca); border-radius: 3px 3px 0 0; position: relative; }
.barras .b.fds { background: var(--linha-forte); }
.barras .b:hover::after { content: attr(data-t); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--tinta); color: var(--papel); font-size: 12px; padding: 3px 7px; border-radius: 6px; z-index: 2; }
.eixo-barras { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tinta-3); margin-top: 4px; }
.medidor { height: 8px; border-radius: 4px; background: var(--superficie-3); overflow: hidden; min-width: 70px; }
.medidor > i { display: block; height: 100%; background: var(--marca); border-radius: 4px; }

/* QR */
.qr { background: #fff; padding: 12px; border-radius: 12px; display: inline-block; border: 1px solid var(--linha); }
.qr img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.endereco-grande { font-size: 22px; font-weight: 700; letter-spacing: .01em; overflow-wrap: anywhere; }

/* pesquisa com sugestões */
.procura { position: relative; }
.sugestoes {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 10px; box-shadow: var(--sombra-alta); max-height: 300px; overflow: auto; padding: 4px;
}
.sugestoes button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 7px; text-align: left; }
.sugestoes button:hover, .sugestoes button.foco { background: var(--superficie-3); }
.sugestoes .sub-linha { font-size: 12.5px; color: var(--tinta-3); }
.escolhido { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--superficie-2); min-height: 40px; }
.escolhido .cresce { flex: 1; min-width: 0; }

.preco-resumo { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; padding: 10px 12px; border-radius: 8px; background: var(--superficie-2); }
.preco-resumo b { font-weight: 700; }
.lista-avisos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-avisos li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.lista-avisos li .ic { color: var(--aviso); margin-top: 2px; }
.lista-avisos li.grave .ic { color: var(--erro); }
.lista-avisos .data-aviso { font-weight: 700; font-size: 13px; color: var(--tinta-2); margin-top: 6px; }

.vagas-dia { margin-bottom: 14px; }
.vagas-dia h4 { font-size: 13.5px; margin-bottom: 6px; color: var(--tinta-2); }
.vagas-dia .opcoes button { font-variant-numeric: tabular-nums; }

/* acesso de fora (Cloudflare) */
hr.separador { border: 0; border-top: 1px solid var(--linha); margin: 18px 0; }
.bloco-fora { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.bloco-fora p .ic { width: 16px; height: 16px; vertical-align: -3px; }
.estado-tunel { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--linha); }
.estado-tunel .luz { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--tinta-3); }
.estado-tunel.ligado .luz { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
.estado-tunel.a-ligar .luz { background: var(--aviso); animation: piscar 1.2s ease-in-out infinite; }
.estado-tunel.erro .luz { background: var(--erro); }
.estado-tunel .titulo-estado { font-weight: 700; }
@keyframes piscar { 50% { opacity: .35; } }
.barra-progresso { height: 8px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; margin-top: 8px; }
.barra-progresso > span { display: block; height: 100%; background: var(--marca); width: 0; transition: width .3s; }
.lista-teste { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.lista-teste li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.lista-teste li .ic { flex: none; margin-top: 1px; }
.lista-teste li.ok .ic { color: var(--ok); }
.lista-teste li.mal .ic { color: var(--erro); }
.registo-tecnico { max-height: 280px; overflow: auto; font: 12px/1.45 ui-monospace, Consolas, monospace; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 8px; padding: 10px; white-space: pre-wrap; word-break: break-all; margin: 8px 0 0; }
details.caixa > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; }
details.caixa[open] > summary { padding-bottom: 6px; }
.copiavel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copiavel code { font-size: 14px; padding: 4px 8px; border-radius: 6px; background: var(--superficie-2); border: 1px solid var(--linha); word-break: break-all; }
.campo textarea.token { min-height: 64px; font: 12px/1.4 ui-monospace, Consolas, monospace; }

/* impressão */
@media print {
  .carril, .topo-movel, .barra-baixo, .acoes, .separadores, .bt, .avisos { display: none !important; }
  .app { display: block; }
  .pagina { padding: 0; }
  body { background: #fff; }
}

/* ---------------------------------------------------------- ecrãs médios */
@media (max-width: 1100px) {
  .hoje-grelha { grid-template-columns: minmax(0, 1fr); }
  .app { grid-template-columns: 72px minmax(0, 1fr); }
  .carril { padding: 12px 8px; }
  .identidade { justify-content: center; padding: 4px 0 14px; }
  .identidade .textos { display: none; }
  .identidade img { max-height: 36px; }
  .nav a { justify-content: center; padding: 11px 0; }
  .nav a .txt { display: none; }
  .nav a .contador { position: absolute; top: 2px; right: 4px; min-width: 18px; height: 18px; font-size: 11px; }
  .eu-chip { justify-content: center; }
  .eu-chip .textos { display: none; }
  .def-grelha { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .def-nav {
    position: static; flex-direction: row; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 18px;
    overflow-x: auto; scrollbar-width: none;
  }
  .def-nav::-webkit-scrollbar { display: none; }
  .def-nav a { border-radius: 0; padding: 9px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .def-nav a.ativo { background: none; box-shadow: none; border-bottom-color: var(--marca); }
  .contas.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- telemóvel */
@media (max-width: 720px) {
  .linha-area { grid-template-columns: 1fr 1fr 32px; }
  .linha-area > :last-child { grid-column: 3; grid-row: 1; }
  .linha-preco { grid-template-columns: 1fr 110px 32px; }
  .linha-preco .explica { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .linha-preco > :last-child { grid-column: 3; grid-row: 1; }
  .endereco-grande { font-size: 18px; }
  body { font-size: 15.5px; }
  .app { display: block; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .carril { display: none; }
  .topo-movel {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; padding: 10px 14px;
    background: var(--superficie); border-bottom: 1px solid var(--linha);
  }
  .topo-movel .nome-clinica { font-weight: 700; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topo-movel img { max-height: 30px; max-width: 140px; object-fit: contain; }
  .barra-baixo {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--superficie);
    border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom);
  }
  .barra-baixo a, .barra-baixo button {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; font-size: 11.5px; color: var(--tinta-2);
    background: none; border: 0; text-decoration: none; position: relative; font-weight: 500;
  }
  .barra-baixo .ativo { color: var(--marca-txt); font-weight: 700; }
  .barra-baixo .ic { width: 22px; height: 22px; }
  .barra-baixo .contador { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 17px; height: 17px; font-size: 10.5px; padding: 0 4px; }
  .pagina { padding: 16px 14px 32px; }
  .cab-pagina { margin-bottom: 14px; }
  .contas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .conta { padding: 10px 12px; }
  .conta .valor { font-size: 21px; }
  .conta .rotulo { font-size: 12.5px; }
  h1 { font-size: 20px; }
  .grelha-campos, .grelha-campos.duas { grid-template-columns: minmax(0, 1fr); }
  .grelha-campos .meio { grid-column: auto; }
  .fundo-dialogo { padding: 8px; align-items: flex-end; }
  .dialogo > footer .bt { flex: 1; }
  .entrar { grid-template-columns: minmax(0, 1fr); }
  .entrar .lado { padding: 26px 22px; min-height: 0; }
  .entrar .lado .nome-grande { font-size: 28px; }
  .entrar .lado .rodape-lado, .entrar .lado .esp-lado { display: none; }
  .entrar .formulario { padding: 22px 18px 32px; }
  .agenda-pagina { padding: 12px 10px 12px; height: calc(100vh - 56px - 64px); height: calc(100dvh - 56px - 64px - env(safe-area-inset-bottom)); }
  .ag-barra { gap: 8px; margin-bottom: 10px; }
  .ag-barra .titulo-dia { font-size: 17px; width: 100%; order: -1; margin: 0; }
  .ag-barra .empurra { gap: 6px; }
  .ag-barra .opcoes button { padding: 0 11px; }
  .ag-barra .opcoes button .txt-vista, .ag-barra [data-vagas] span, .ag-barra [data-nova] span { display: none; }
  .ag-barra [data-vagas] { width: 38px; padding: 0; }
  .ag-barra [data-nova] {
    position: fixed; right: 16px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 25; width: 56px; height: 56px;
    border-radius: 16px; padding: 0; box-shadow: var(--sombra-alta);
  }
  .ag-barra [data-nova] .ic { width: 24px; height: 24px; }
  .ag-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
  .ag-filtros::-webkit-scrollbar { display: none; }
  .ag-filtros button { flex: none; }
  .ag-filtros [data-filtro] { display: none; }
  .ag-pessoas { order: 1; }
  .ag-filtros:not(.ag-pessoas) { order: 2; }
  .ag-quadro { order: 3; }
  .ag-quadro { --hora-h: 72px; }
  .dia-lista > li { grid-template-columns: 52px minmax(0, 1fr); }
  .dia-lista .acoes-rapidas { grid-column: 1 / -1; justify-content: flex-start; }
  .gaveta { width: 100vw; }
  .horario-semana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blocos-edicao .linha-bloco { grid-template-columns: 1fr 1fr; }
  .tabela-movel thead { display: none; }
  .tabela-movel tr { display: block; border-bottom: 1px solid var(--linha); padding: 8px 4px; }
  .tabela-movel td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 8px; }
  .tabela-movel td[data-r]::before { content: attr(data-r); color: var(--tinta-3); font-size: 13px; }
  .tabela-movel td.n { text-align: right; }
  .avisos { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); align-items: stretch; }
  .avisos > .aviso { max-width: none; }
}

/* passos com conteúdo (por exemplo, ligar o telemóvel dos SMS) */
.passos-lista.blocos li { align-items: flex-start; padding: 12px 0; }
.passos-lista.blocos li::before { margin-top: 1px; }

/* ------------------------------------------------------------------- chat */
.chat-pagina { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-bottom: 22px; }
.chat-pagina .cab-pagina { flex: none; }
.chat-pagina [data-avisos].ligados .ic { color: var(--marca-txt); }
.chat-grelha { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; }
.chat-lista { overflow-y: auto; padding: 6px; min-height: 0; }
.chat-lista .vazio p { font-size: 14px; }
.chat-item {
  display: flex; gap: 11px; align-items: center; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 10px;
  text-align: left; color: inherit;
}
.chat-item:hover { background: var(--superficie-3); }
.chat-item.ativo { background: var(--marca-suave); }
.chat-item .cresce { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.chat-item .l1, .chat-item .l2 { display: flex; gap: 8px; align-items: center; min-width: 0; }
.chat-item .l1 b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.chat-item time { font-size: 12px; color: var(--tinta-3); flex: none; }
.chat-item .previa { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--tinta-2); }
.chat-item.por-ler .previa { color: var(--tinta); font-weight: 600; }
.chat-item.por-ler time { color: var(--marca-txt); font-weight: 600; }
.chat-item .contador { margin-left: 0; flex: none; }
.chat-pessoas { display: flex; flex-direction: column; gap: 2px; }
.avatar-grupo {
  width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--marca-suave); color: var(--marca-txt); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--marca) 45%, transparent);
}
.avatar-grupo .ic { width: 18px; height: 18px; }
.chat-conversa { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chat-cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--linha); flex: none; }
.chat-cab .cresce { min-width: 0; flex: 1; }
.chat-cab h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.chat-cab .sub { font-size: 13px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-cab [data-voltar] { display: none; }
.chat-cab [data-mais] .ic { stroke-width: 3.2; }
.chat-mensagens {
  flex: 1; min-height: 0; overflow-y: auto; padding: 10px 16px 14px; display: flex; flex-direction: column;
  background: var(--superficie-2); overscroll-behavior: contain;
}
.chat-antes { align-self: center; margin: 4px 0 6px; }
.chat-dia {
  align-self: center; margin: 14px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: 999px; padding: 1px 11px;
}
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(80%, 640px); margin-top: 8px; }
.msg.continua { margin-top: 2px; }
.msg.minha { align-self: flex-end; align-items: flex-end; }
.msg .autor { font-size: 12.5px; font-weight: 700; color: var(--esp-txt); margin: 0 12px 2px; }
:root[data-tema="escuro"] .msg .autor { color: var(--esp); filter: brightness(1.5); }
.msg .bolha {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 6px 11px 4px; min-width: 64px;
  box-shadow: 0 1px 1px rgba(20, 30, 27, .04);
}
.msg.minha .bolha { background: var(--marca-suave); border-color: color-mix(in srgb, var(--marca) 22%, transparent); }
.msg .txt { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.msg .txt a { text-decoration: underline; text-underline-offset: 2px; }
.msg .meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: 11.5px; color: var(--tinta-3); margin-top: 1px; }
.msg .visto { border: 0; background: none; padding: 0 0 0 3px; color: var(--tinta-3); font-size: 12px; line-height: 1; letter-spacing: -2px; }
.msg .visto.todos { color: var(--info); }
.msg .quem-viu { font-size: 12px; color: var(--tinta-3); margin: 2px 6px 0; }
.msg-sistema { align-self: center; text-align: center; font-size: 12.5px; color: var(--tinta-2); margin: 10px 0 2px; max-width: 90%; }
.chat-vazio { margin: auto; text-align: center; color: var(--tinta-2); padding: 24px 16px; }
.chat-vazio.grande .ic { width: 34px; height: 34px; color: var(--tinta-3); margin-bottom: 6px; }
.chat-escrever { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--linha); background: var(--superficie); flex: none; }
.chat-escrever textarea { flex: 1; min-height: 42px; max-height: 160px; resize: none; padding: 9px 12px; border-radius: 20px; line-height: 1.4; }
.chat-escrever .bt.icone { width: 42px; min-height: 42px; border-radius: 50%; }
.chat-escrever.fechado { font-size: 14px; color: var(--tinta-2); justify-content: center; padding: 14px; }
.chat-escolher { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.chat-escolher .marcar { align-items: center; padding: 6px 4px; }
.chat-escolher .marcar input { margin: 0; }
.avisos .mudo-aviso { opacity: .8; }
.topo-chat { position: relative; }
.topo-chat .contador { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 4px; }

@media (max-width: 1100px) {
  .chat-grelha { grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 720px) {
  .chat-pagina { height: auto; padding-bottom: 32px; }
  .chat-grelha { display: block; }
  .chat-lista { overflow: visible; }
  .chat-pagina .chat-conversa { display: none; }
  .chat-pagina [data-avisos] span { display: none; }
  .chat-pagina [data-avisos] { width: 38px; padding: 0; }
  /* a conversa aberta ocupa o ecrã todo (a parte que se vê, também com o teclado aberto) */
  .chat-pagina.com-conversa .chat-conversa {
    display: flex; position: fixed; left: 0; right: 0; top: var(--vv-topo, 0); height: var(--vv-altura, 100dvh); z-index: 35;
    border: 0; border-radius: 0;
  }
  .chat-cheio .barra-baixo, .chat-cheio .topo-movel { display: none; }
  .chat-cheio .app { padding-bottom: 0; }
  .chat-cab { padding: 8px 10px 8px 6px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .chat-cab [data-voltar] { display: inline-flex; }
  .chat-mensagens { padding: 8px 10px 12px; }
  .msg { max-width: 86%; }
  .chat-escrever { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .chat-escrever textarea { font-size: 16px; } /* (no iPhone, com menos de 16px o ecrã aumenta ao escrever) */
}