/* Identidade visual do somnipin-web — ver SOMNIPIN-WEB.md (repo
somnipin), seção "Identidade visual", pro raciocínio completo por
trás da paleta/tipografia.
Tema claro e escuro via tokens em `:root`, mesmo padrão em 3 estados
de qualquer app com preferência de SO + escolha manual:
1. `:root` (este bloco) — paleta clara, é o padrão de qualquer
jeito (nenhuma preferência de SO, nenhuma escolha manual).
2. `@media (prefers-color-scheme: dark)`, guardado com
`:root:not([data-tema="claro"])` — reescreve os tokens quando o
SO pede escuro, a menos que o usuário tenha forçado claro (ver
3 abaixo).
3. `:root[data-tema="escuro"]` — reescreve os tokens de novo
quando o usuário força escuro manualmente (ver `tema.rs`),
pra vencer mesmo com o SO em claro.
`tema.rs` é quem escreve/apaga o atributo `data-tema` na tag ``
e persiste a escolha em `localStorage` — puramente Shell, o Core não
sabe nem precisa saber que tema existe (é preferência de
apresentação, cada Shell nativo decidiria isso do seu próprio jeito
platform-specific, não é estado de negócio). */
:root {
/* Esquentado a pedido do usuário (achou o claro "branco demais") —
`--paper-raised` sai do branco puro (era #FFFFFF) e `--paper`/
`--paper-sunken` ganham mais corpo, pra card/página/fundo-afundado
terem contraste real entre si em vez de se misturarem num só
bloco claro. */
--paper: #E5EBE4;
--paper-raised: #F8FAF6;
--paper-sunken: #D6E0D6;
--ink: #17242A;
--ink-dim: #4B5D59;
--line: #BAC7BB;
--accent: #A85F28;
--accent-soft: #F1DEC7;
--on-accent: #FFFFFF;
--teal: #2E6E62;
--good: #2F7A4C;
--good-soft: #DCEDDF;
--warn: #93741A;
--warn-soft: #F1E6C3;
--crit: #A23A2C;
--crit-soft: #F3DCD6;
--shadow: 0 1px 2px rgba(23, 36, 42, .09), 0 6px 20px -8px rgba(23, 36, 42, .22);
}
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) {
--paper: #12211F;
--paper-raised: #1A302C;
--paper-sunken: #0B1614;
--ink: #E7EFE9;
--ink-dim: #93A69E;
--line: #2C443E;
--accent: #E0975A;
--accent-soft: #3A2A1A;
--on-accent: #17242A;
--teal: #4FA08F;
--good: #6FCB8D;
--good-soft: #17301F;
--warn: #E0C15A;
--warn-soft: #332B10;
--crit: #E2695A;
--crit-soft: #3A1D17;
--shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px -8px rgba(0, 0, 0, .6);
}
}
:root[data-tema="escuro"] {
--paper: #12211F;
--paper-raised: #1A302C;
--paper-sunken: #0B1614;
--ink: #E7EFE9;
--ink-dim: #93A69E;
--line: #2C443E;
--accent: #E0975A;
--accent-soft: #3A2A1A;
--on-accent: #17242A;
--teal: #4FA08F;
--good: #6FCB8D;
--good-soft: #17301F;
--warn: #E0C15A;
--warn-soft: #332B10;
--crit: #E2695A;
--crit-soft: #3A1D17;
--shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px -8px rgba(0, 0, 0, .6);
}
* {
box-sizing: border-box;
}
/* Transição só nas propriedades que valem a pena animar — nunca
`transition: all`, que anima layout (`width`/`height`) e fica
pesado/estranho à toa. Herdado por tudo; elementos específicos
sobrescrevem a duração/propriedade quando precisam de outra coisa
(ver `.pulso-recente`, que é controlado pelo `map.js`, não por CSS). */
* {
transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease;
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
body {
margin: 0;
min-height: 100vh;
background: var(--paper);
/* Textura bem sutil (não é decoração gratuita — mesma referência de
"carta topográfica" do SOMNIPIN-WEB.md, seção Identidade visual):
um gradiente radial suave dando profundidade ao papel, sem competir
com o conteúdo. */
background-image: radial-gradient(ellipse 1200px 800px at 15% -10%, color-mix(in srgb, var(--teal) 6%, transparent), transparent 60%),
radial-gradient(ellipse 900px 700px at 100% 10%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 55%);
background-attachment: fixed;
color: var(--ink);
font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
font-size: 15px;
line-height: 1.6;
}
h1, h2, h3 {
font-family: 'IBM Plex Serif', ui-serif, Georgia, serif;
font-weight: 600;
margin: 0 0 .3rem;
text-wrap: balance;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; margin-top: 0; }
h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-dim); }
code, .mono {
font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
}
.shell {
max-width: 60rem;
margin: 0 auto;
padding: 0 1.2rem 4rem;
}
/* --- topbar --- */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 0;
border-bottom: 1px solid var(--line);
margin-bottom: 1.6rem;
position: relative;
}
/* Fio de acento sob a topbar, meio-tom — o mesmo truque visual do
`--shadow` dos cards, só que como uma linha em vez de sombra
difusa, pra marcar "isto é o teto do app" sem pesar. */
.topbar::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: linear-gradient(90deg, var(--accent), transparent 40%);
opacity: .5;
}
.topbar .brand {
font-family: 'IBM Plex Serif', serif;
font-weight: 600;
font-size: 1.3rem;
}
.topbar-acoes {
display: flex;
align-items: center;
gap: .8rem;
}
.topbar .sessao {
display: flex;
align-items: center;
gap: .8rem;
font-size: .88rem;
color: var(--ink-dim);
}
.topbar .sessao b { color: var(--ink); font-weight: 600; }
.botao-tema {
font-family: 'IBM Plex Mono', monospace;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .04em;
padding: .3rem .6rem;
border-radius: 99px;
border: 1px solid var(--line);
background: transparent;
color: var(--ink-dim);
cursor: pointer;
}
.botao-tema:hover { border-color: var(--ink-dim); color: var(--ink); }
.botao-tema:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.badge-admin {
font-family: 'IBM Plex Mono', monospace;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .06em;
background: var(--accent-soft);
color: var(--accent);
padding: .15rem .5rem;
border-radius: 99px;
}
/* --- navegação entre telas ---
Três layouts pras três faixas de SOMNIPIN-WEB.md ("Breakpoints"):
desktop/tablet paisagem (≥1024px, faixa padrão abaixo) — abas
horizontais com texto sob o topbar; tablet retrato (641–1023px) —
rail vertical fixo à esquerda, só ícone (ver `icones.rs`); celular
(≤640px) — tab bar fixa embaixo, só texto (como já era). Cada ``
carrega os dois (`.icone-nav` e `.rotulo-texto`) sempre — é só CSS
que decide qual dos dois aparece em cada faixa; `aria-label` no
próprio `` garante que o nome acessível existe nas três faixas,
então os dois spans internos ficam `aria-hidden` (ver `main.rs`) —
sem isso, o rail de ícone ficaria mudo pra leitor de tela. */
.nav-abas {
display: flex;
gap: .3rem;
margin-bottom: 1.2rem;
border-bottom: 1px solid var(--line);
}
.nav-abas a {
display: flex;
align-items: center;
gap: .4rem;
padding: .5rem .9rem;
font-size: .85rem;
color: var(--ink-dim);
text-decoration: none;
border-bottom: 2px solid transparent;
}
.nav-abas a {
position: relative;
}
.nav-abas a::after {
content: "";
position: absolute;
left: .9rem; right: .9rem; bottom: -1px;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: center;
transition: transform .2s ease;
}
.nav-abas a:hover::after {
transform: scaleX(.5);
}
.nav-abas a[aria-current="page"] {
color: var(--ink);
font-weight: 600;
}
.nav-abas a[aria-current="page"]::after {
transform: scaleX(1);
}
.icone-nav {
display: none; /* só aparece no rail de tablet retrato, ver abaixo */
}
@media (max-width: 640px) {
.nav-abas {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: var(--paper-raised);
border-top: 1px solid var(--line);
border-bottom: none;
justify-content: space-around;
padding: .3rem 0;
z-index: 10;
}
.nav-abas a {
flex: 1;
justify-content: center;
text-align: center;
border-bottom: none;
}
.nav-abas a[aria-current="page"] {
border-bottom: none;
}
/* Sublinhado animado é coisa de aba horizontal com texto (desktop) —
na tab bar fixa embaixo o indicador é só a cor do ícone/texto. */
.nav-abas a::after {
content: none;
}
.shell {
padding-bottom: 4.5rem; /* espaço pra tab bar fixa não cobrir o rodapé do conteúdo */
}
}
@media (min-width: 641px) and (max-width: 1023px) {
.shell {
max-width: none;
margin: 0;
padding-left: 3.6rem; /* espaço pro rail fixo não cobrir o conteúdo */
}
.nav-abas {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 3.6rem;
flex-direction: column;
align-items: stretch;
gap: 0;
margin-bottom: 0;
padding-top: 5.2rem; /* abaixo da altura do topbar (~5rem) */
border-bottom: none;
border-right: 1px solid var(--line);
background: var(--paper-raised);
z-index: 10;
}
.nav-abas a {
flex-direction: column;
justify-content: center;
gap: .2rem;
padding: .8rem 0;
border-bottom: none;
border-left: 2px solid transparent;
}
.nav-abas a[aria-current="page"] {
border-bottom: none;
border-left-color: var(--accent);
}
/* Rail vertical usa a borda esquerda como indicador (ver acima) — o
sublinhado animado de baixo não faz sentido num item empilhado. */
.nav-abas a::after {
content: none;
}
.icone-nav {
display: flex;
justify-content: center;
}
.rotulo-texto {
display: none;
}
}
/* --- cards --- */
.card {
position: relative;
background: var(--paper-raised);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: var(--shadow);
padding: 1.2rem 1.4rem;
margin-bottom: 1.4rem;
overflow: hidden;
animation: aparecer .25s ease both;
}
/* Fio de acento no topo do card — mesma família visual do `::after` da
topbar, em escala menor; marca "conteúdo principal" sem precisar de
cor de fundo forte (ficaria "carregado" demais pro tom do resto). */
.card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--teal), var(--accent));
opacity: .7;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .8rem;
}
@keyframes aparecer {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
/* --- forms --- */
label {
font-size: .85rem;
color: var(--ink-dim);
display: inline-flex;
align-items: center;
gap: .35rem;
}
input[type="text"],
input[type="password"],
input[type="number"] {
font: inherit;
font-size: .9rem;
padding: .45rem .6rem;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--paper);
color: var(--ink);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.field-row {
display: flex;
gap: .6rem;
align-items: center;
flex-wrap: wrap;
margin: .5rem 0;
}
button {
font: inherit;
font-size: .85rem;
font-weight: 500;
padding: .45rem .9rem;
border-radius: 6px;
border: 1px solid var(--line);
background: var(--paper-raised);
color: var(--ink);
cursor: pointer;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
}
button:hover { border-color: var(--ink-dim); transform: translateY(-1px); box-shadow: var(--shadow); }
button:active { transform: none; box-shadow: none; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.primary {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
}
button.primary:hover { filter: brightness(1.08); }
button.danger {
color: var(--crit);
border-color: var(--crit);
background: var(--crit-soft);
}
button.danger:hover { background: var(--crit); color: var(--on-accent); }
button.ghost {
border-color: transparent;
background: transparent;
color: var(--ink-dim);
}
button.ghost:hover { background: var(--paper-sunken); }
/* --- status / mensagens --- */
.msg-erro {
color: var(--crit);
background: var(--crit-soft);
border-radius: 6px;
padding: .5rem .7rem;
font-size: .88rem;
margin: .5rem 0;
}
.msg-carregando {
color: var(--ink-dim);
font-size: .88rem;
margin: .5rem 0;
}
.pill {
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
padding: .15rem .55rem;
border-radius: 99px;
display: inline-flex;
align-items: center;
gap: .35rem;
font-weight: 500;
}
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.crit { background: var(--crit-soft); color: var(--crit); }
.pill::before {
content: "●";
font-size: .6rem;
}
.pareamento {
background: var(--accent-soft);
border: 1px solid var(--accent);
border-radius: 6px;
padding: .6rem .8rem;
font-size: .85rem;
margin: .6rem 0;
}
/* --- mapa ---
Dois canais de cor por ponto (ver mapa.rs/map.js): preenchimento do
pino = device (cor estável por id), anel = método/confiança — por
isso a legenda flutuante tem dois grupos, não um. Tamanho/opacidade
decrescente = histórico (mais recente = maior e opaco), sem entrada
própria na legenda — é óbvio olhando o mapa, não precisa de chave. */
.mapa-wrap {
position: relative;
margin-top: .8rem;
}
.mapa-container {
height: 420px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line);
background: var(--paper-sunken);
}
.legenda-mapa {
position: absolute;
left: .6rem;
bottom: .6rem;
z-index: 5;
display: flex;
gap: 1rem;
background: color-mix(in srgb, var(--paper-raised) 92%, transparent);
backdrop-filter: blur(6px);
border: 1px solid var(--line);
border-radius: 8px;
padding: .5rem .7rem;
box-shadow: var(--shadow);
max-width: calc(100% - 1.2rem);
flex-wrap: wrap;
}
.legenda-grupo {
display: flex;
flex-direction: column;
gap: .3rem;
}
.legenda-grupo h4 {
margin: 0;
font-family: 'IBM Plex Mono', monospace;
font-size: .62rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--ink-dim);
font-weight: 500;
}
.legenda-mapa .item {
display: flex;
align-items: center;
gap: .35rem;
font-size: .76rem;
color: var(--ink-dim);
white-space: nowrap;
}
.legenda-mapa .dot {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 15%, transparent);
}
.legenda-mapa .anel {
width: 9px;
height: 9px;
border-radius: 50%;
border: 2px solid;
display: inline-block;
background: var(--paper-raised);
}
/* Ícone opcional por device (Fiat Uno, ver icone_device.rs) — troca o
`.dot`/`.anel` acima por um mini ícone quando ligado, tanto na
legenda do mapa quanto na coluna "ícone" da tabela de devices do
Admin (paginas.rs). O checkbox de verdade fica visualmente escondido
(não `display:none`, que tiraria do foco por teclado) — o próprio
dot/ícone já serve de indicador de estado. */
.icone-toggle {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.icone-toggle input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
}
.icone-mini {
width: 18px;
height: auto;
display: inline-block;
vertical-align: middle;
}
.legenda-mapa .icone-mini {
width: 14px;
}
.pareamento code {
background: var(--paper-raised);
padding: .1rem .4rem;
border-radius: 4px;
}
/* --- tabelas --- */
table {
width: 100%;
border-collapse: collapse;
font-size: .85rem;
font-variant-numeric: tabular-nums;
}
thead {
position: sticky;
top: 0;
background: var(--paper-raised);
z-index: 1;
}
th {
text-align: left;
font-family: 'IBM Plex Mono', monospace;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink-dim);
font-weight: 500;
padding: .5rem .6rem;
border-bottom: 2px solid var(--line);
}
td {
padding: .55rem .6rem;
border-bottom: 1px solid var(--line);
}
tbody tr:nth-child(even) {
background: color-mix(in srgb, var(--paper-sunken) 45%, transparent);
}
tbody tr:hover {
background: var(--accent-soft);
}
tr:last-child td { border-bottom: none; }
.table-wrap {
overflow-x: auto;
overflow-y: auto;
max-height: 60vh;
margin-top: .6rem;
border: 1px solid var(--line);
border-radius: 8px;
}
.table-wrap table { margin: 0; }
.table-wrap tr:last-child td { border-bottom: 1px solid var(--line); }
hr {
border: none;
border-top: 1px solid var(--line);
margin: 1.6rem 0;
}