/* The signed-in app's own CSS: the nav shell (a left sidebar that becomes a
bottom tab bar on a phone), the credit strip, and the controls, cards and
messages the five authenticated pages share.
Loaded *after* assets/tokens.css, which carries the design tokens, the
typography and the fonts, and which the public pages load on their own —
see the header there for why the two are separate files. Everything below
reads tokens defined there, so the order of the two element, two layouts. On a desktop it's the left sidebar the
design draws: wordmark, the section links with their icons, and a
footer holding the email, the account's clock and Sair.
Below --bp-nav that same DOM becomes two fixed bars — the links as a
bottom tab bar (thumb-reachable, always visible, no tap to reveal), the
identity block as a slim top bar. `display: contents` on the nav is what
makes that possible without a second copy of the markup: it drops the
container out of the box tree so its three children can each be
positioned on their own, which matters because every id in here
(#user-info, #clock-time, #logout-btn, #menu-admin-link) is read by
shared.js and must exist exactly once. */
.app-nav {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--nav-width);
display: flex;
flex-direction: column;
padding: 22px 16px;
background: var(--card);
border-right: 1px solid var(--border);
z-index: 40;
}
.nav-brand {
font-family: "Source Serif 4", Georgia, serif;
font-size: 22px;
font-weight: 600;
color: var(--accent);
text-decoration: none;
padding: 0 8px 22px;
white-space: nowrap;
}
.nav-brand .dot { color: var(--brand); }
.nav-brand .brand-suffix {
/* Flex on the phone layout collapses the space in the markup, so the
separation has to be a margin rather than whitespace. */
margin-left: 6px;
font-family: "Work Sans", sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--muted);
}
.nav-links { display: flex; flex-direction: column; gap: 2px; }
.nav-links a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--radius-control);
font-size: 14px;
font-weight: 600;
color: var(--muted);
text-decoration: none;
}
.nav-links a:hover { background: var(--surface); color: var(--text); }
/* Set by shared.js from location.pathname, not hard-coded per page — one
place to be wrong instead of five. */
.nav-links a[aria-current="page"] { background: var(--surface); color: var(--accent); }
.nav-links svg { flex-shrink: 0; }
.nav-identity {
margin-top: auto;
padding: 14px 8px 0;
border-top: 1px solid var(--border);
font-size: 13px;
color: var(--muted);
}
/* Breaks at the @ and the dots before it breaks mid-word, which
`break-all` did not — a 232px column turned every address into two
ragged halves. */
#user-email {
display: block;
margin-bottom: 4px;
font-size: 12px;
line-height: 1.4;
overflow-wrap: anywhere;
}
/* One line, baseline-aligned. Separation between the three parts comes
from the size and weight contrast plus the gap, so no punctuation is
needed. */
.tz-clock { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.tz-clock .clock-time { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tz-clock .clock-date,
.tz-clock .clock-zone { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.nav-logout {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 6px 4px;
background: none;
border: none;
border-radius: var(--radius-sm);
color: var(--muted);
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
}
.nav-logout:hover { color: var(--danger); }
/* Every authenticated page's own is centred in what's left beside
the sidebar. Done with padding on rather than by wrapping
in another element: the five pages already have their own rules
and none of them had to change for this. */
body.app-shell { padding-left: var(--nav-width); }
/* Pre-authentication: area-cliente.html and admin.html are both a login
screen *and* the dashboard behind it, one document either way — so the
nav (which links to Perfis/Créditos/Conta/Admin) has no business showing
before there's a session to navigate. .pre-auth is the default in the
markup itself and comes off exactly when a session is confirmed or
optimistically assumed from a cached identity (see each page's boot()),
never the other way — a signed-out response always puts it back.
Unqualified by breakpoint on purpose: it overrides the sidebar on a
desktop and the two fixed bars the phone layout turns it into equally,
since both are the same element (see "App shell" above). */
body.pre-auth .app-nav { display: none; }
body.pre-auth.app-shell { padding: 0 !important; }
/* ---- Phone: sidebar becomes a top bar + a bottom tab bar ---- */
@media (max-width: 899px) {
.app-nav { display: contents; }
/* The wordmark paints the whole top strip — the identity block below
then sits on top of it at the right, which is why they can be two
separate fixed elements and still read as one bar. */
.nav-brand {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px;
display: flex;
align-items: center;
padding: 0 16px;
font-size: 19px;
background: var(--card);
border-bottom: 1px solid var(--border);
z-index: 40;
}
.nav-identity {
position: fixed;
top: 0;
right: 0;
height: 56px;
display: flex;
align-items: center;
gap: 12px;
margin-top: 0;
padding: 0 16px;
border-top: none;
z-index: 41;
}
/* The longest item, and the only one repeated elsewhere (/conta shows
it) — dropping it is what keeps the clock and Sair on one line. */
#user-email { display: none; }
/* The time is the point, and the offset is what stops the clock being
read as the device's own; the date is what gives way. */
.tz-clock .clock-date { display: none; }
.nav-logout { margin-top: 0; }
.nav-logout span { display: none; }
.nav-links {
position: fixed;
left: 0;
right: 0;
bottom: 0;
flex-direction: row;
gap: 0;
height: var(--nav-height);
/* Below the bar, the home indicator on an iPhone sits exactly where
the middle tab is. */
padding-bottom: env(safe-area-inset-bottom);
background: var(--card);
border-top: 1px solid var(--border);
z-index: 40;
}
.nav-links a {
flex: 1;
flex-direction: column;
justify-content: center;
gap: 3px;
padding: 0;
border-radius: 0;
font-size: 11px;
font-weight: 600;
}
.nav-links a:hover { background: none; }
.nav-links a[aria-current="page"] { background: none; color: var(--accent); }
/* The tab bar's own top edge already separates it from the page, so the
selected tab is marked by a rule directly above it rather than by a
filled pill, which at this size just looks like a stuck button. */
.nav-links a[aria-current="page"]::before {
content: "";
position: absolute;
top: -1px;
left: 22%;
right: 22%;
height: 2px;
background: var(--accent);
border-radius: 0 0 2px 2px;
}
.nav-links a { position: relative; }
body.app-shell {
padding-left: 0;
padding-top: 56px;
/* Clears the tab bar so the last control on a long form is reachable
rather than sitting underneath it. */
padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
}
/* The top bar is fixed, and scrollIntoView() knows nothing about it — it
stops as soon as the target is inside the *viewport*, which on this
layout means underneath the bar. area-cliente.js scrolls the history
date strip into view on load, and that is exactly where it landed.
scroll-padding on the scrollport is what scrollIntoView (and an #anchor
jump) actually honours; the two bars each reserve their own edge. */
:root {
scroll-padding-top: 68px;
scroll-padding-bottom: calc(var(--nav-height) + 12px);
}
}
/* ---- Credit warning strip ----
Sits directly under the top bar on a phone and at the top of the
content column on a desktop. Two states: `blocked` when the balance is
empty and calls are actually stopping, `low` when it is about to be.
Colour carries the difference, the words carry the meaning — the strip
is never shown without text. */
.credit-banner {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
padding: 11px 32px;
font-size: 14px;
border-bottom: 1px solid var(--border);
}
/* The divider is tinted from the strip's own colour rather than left as
the page border, which read as a grey line drawn across an amber band.
color-mix keeps that true in dark mode without a second rule. */
.credit-banner.low {
background: var(--warm-bg);
color: var(--warm-text);
border-bottom-color: color-mix(in srgb, var(--warm-text) 25%, var(--warm-bg));
}
.credit-banner.blocked {
background: var(--danger-bg);
color: var(--danger);
border-bottom-color: color-mix(in srgb, var(--danger) 25%, var(--danger-bg));
}
.credit-banner a { color: inherit; font-weight: 700; }
@media (max-width: 899px) {
.credit-banner { padding: 10px 16px; font-size: 13.5px; }
}
/* ---- Support-access strip ----
The one thing standing between an operator and forgetting whose account
is on screen, so it does not share styling with the credit strip above —
the two must never be visually confusable, and this one always reads as
an alert, never as a balance notice. sticky rather than static, so it
stays visible on a long profile form instead of scrolling out of view
the moment there is something worth clicking. Copied block — see the
credit banner's own note; five pages, no build step. */
.support-banner {
position: sticky;
top: 0;
z-index: 55;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 14px;
padding: 11px 32px;
font-size: 14px;
font-weight: 600;
background: var(--danger-bg);
color: var(--danger);
border-bottom: 1px solid color-mix(in srgb, var(--danger) 35%, var(--danger-bg));
}
.support-banner button {
background: none;
border: none;
padding: 0;
color: inherit;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
font-size: inherit;
font-family: inherit;
}
@media (max-width: 899px) {
.support-banner { padding: 10px 16px; font-size: 13.5px; top: 56px; }
}
/* ---- Controls, shared by all five pages ----
These were five near-copies of the same rules, one per page's