/* Painel administrativo do Smart Pátio.
   Mesmo padrão do canal de denúncia ("Untitled UI"): fundo neutro, painéis de
   borda fina, Inter servida daqui, azul da Eurosono como cor de ação.
   Quebras: ≥960 menu lateral fixo · <960 barra + gaveta · <700 tabela vira cartões. */

@font-face {
  font-family: "Inter";
  src: url("/painel/assets/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --g25: #fcfcfd; --g50: #f9fafb; --g100: #f2f4f7; --g200: #eaecf0; --g300: #d0d5dd;
  --g400: #98a2b3; --g500: #667085; --g600: #475467; --g700: #344054; --g900: #101828;
  --b25: #f4f9fd; --b50: #e9f3fb; --b100: #d2e6f6; --b300: #8dbfe4; --b500: #1f7dc0; --b600: #1266a9; --b700: #0e4f83;
  --verde: #079455; --verde-bg: #ecfdf3; --verde-borda: #abefc6;
  --ambar: #dc6803; --ambar-bg: #fffaeb; --ambar-borda: #fedf89;
  --verm: #d92d20; --verm-bg: #fef3f2; --verm-borda: #fecdca;
  --fundo: #f9fafb; --painel: #ffffff; --painel-2: #f9fafb;
  --borda: var(--g200); --borda-forte: var(--g300);
  --t1: var(--g900); --t2: var(--g600); --t3: var(--g500); --t-rotulo: var(--g700);
  --sombra-xs: 0 1px 2px rgb(16 24 40 / 5%);
  --sombra-lg: 0 12px 16px -4px rgb(16 24 40 / 8%), 0 4px 6px -2px rgb(16 24 40 / 3%);
  --anel: 0 0 0 4px var(--b100);
  --raio: 12px;
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --fundo: #0c111d; --painel: #161b26; --painel-2: #1f242f;
  --borda: #1f242f; --borda-forte: #333741;
  --t1: #f5f5f6; --t2: #94969c; --t3: #85888e; --t-rotulo: #cecfd2;
  --b25: rgb(31 125 192 / 6%); --b50: rgb(31 125 192 / 12%); --b100: rgb(31 125 192 / 24%); --b300: #5aa7dd;
  --verde-bg: rgb(7 148 85 / 14%); --verde-borda: rgb(7 148 85 / 40%); --verde: #47cd89;
  --ambar-bg: rgb(220 104 3 / 14%); --ambar-borda: rgb(220 104 3 / 40%); --ambar: #fdb022;
  --verm-bg: rgb(217 45 32 / 14%); --verm-borda: rgb(217 45 32 / 40%); --verm: #f97066;
  --sombra-xs: 0 1px 2px rgb(0 0 0 / 30%);
  --sombra-lg: 0 12px 24px rgb(0 0 0 / 45%);
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--t1);
  font: 16px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
}
[hidden] { display: none !important; }
p { margin: 0 0 10px; }
.suave { color: var(--t2); }
.pequeno { font-size: 14px; }
.centro { text-align: center; }
code { font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--t2); word-break: break-all; }
.placa { font: 600 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--t1); }

button, .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--borda-forte); background: var(--painel); color: var(--t-rotulo);
  font: 600 14px "Inter", sans-serif; text-decoration: none; cursor: pointer;
  box-shadow: var(--sombra-xs); transition: background .12s, border-color .12s;
}
button:hover, .botao:hover { background: var(--painel-2); }
button.primario, .botao.primario { background: var(--b600); border-color: var(--b600); color: #fff; }
button.primario:hover, .botao.primario:hover { background: var(--b700); border-color: var(--b700); }
button.perigo { color: var(--verm); border-color: var(--verm-borda); }
button.perigo:hover { background: var(--verm-bg); }
button.pequeno { min-height: 36px; padding: 8px 12px; font-size: 14px; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, .botao:focus-visible, a:focus-visible { outline: none; box-shadow: var(--sombra-xs), var(--anel); }
button svg, .botao svg { width: 18px; height: 18px; }
.cheio { width: 100%; margin-top: 20px; min-height: 44px; }

label { display: block; font: 500 14px/20px "Inter", sans-serif; color: var(--t-rotulo); margin: 16px 0 6px; }
input, textarea, select {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--borda-forte); background: var(--painel); color: var(--t1);
  font: 16px/24px "Inter", sans-serif; box-shadow: var(--sombra-xs);
}
input::placeholder, textarea::placeholder { color: var(--t3); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--b300); box-shadow: var(--sombra-xs), var(--anel); }
a.link { color: var(--b600); font-weight: 600; text-decoration: none; }
a.link:hover { text-decoration: underline; }

.cartao {
  background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-xs); padding: 24px; margin-bottom: 24px;
}
.cartao h2 { font: 600 18px/28px "Inter", sans-serif; color: var(--t1); margin: 0 0 4px; }
.cartao h3 { font: 600 14px/20px "Inter", sans-serif; color: var(--t1); margin: 20px 0 8px; }

.selo {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  font: 500 12px/18px "Inter", sans-serif; color: var(--t-rotulo);
  background: var(--painel); border: 1px solid var(--borda-forte);
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--g400); }
.selo.ok::before { background: var(--verde); }
.selo.alerta::before { background: var(--ambar); }
.selo.acento::before { background: var(--b500); }
.selo.erro { color: var(--verm); border-color: var(--verm-borda); background: var(--verm-bg); }
.selo.erro::before { background: var(--verm); }

.aviso { border-radius: 8px; font-size: 14px; padding: 12px 14px; border: 1px solid var(--borda); background: var(--painel-2); color: var(--t2); }
.aviso.info { background: var(--b25); border-color: var(--b100); color: var(--t-rotulo); }
.aviso.alerta { background: var(--ambar-bg); border-color: var(--ambar-borda); color: var(--t-rotulo); }
.aviso.erro { background: var(--verm-bg); border-color: var(--verm-borda); color: var(--verm); }
.aviso.ok { background: var(--verde-bg); border-color: var(--verde-borda); color: var(--t-rotulo); }

.btn-tema { width: 40px; min-height: 40px; padding: 0; border-radius: 8px; color: var(--t2); }
.btn-tema .sol { display: none; }
:root[data-tema="escuro"] .btn-tema .sol { display: block; }
:root[data-tema="escuro"] .btn-tema .lua { display: none; }

.login {
  /* A entrada tem um tema so: o escuro. A fotografia, o circuito ao fundo e o
     quadro de vidro foram desenhados para fundo escuro, e trocar de tema ali
     entregava uma tela lavada. Os tokens escuros valem dentro do login mesmo
     quando o resto do painel esta no claro. */
  --fundo: #0c111d; --painel: #161b26; --painel-2: #1f242f;
  --borda: #1f242f; --borda-forte: #333741;
  --t1: #f5f5f6; --t2: #94969c; --t3: #85888e; --t-rotulo: #cecfd2;
  --b25: rgb(31 125 192 / 6%); --b50: rgb(31 125 192 / 12%); --b100: rgb(31 125 192 / 24%); --b300: #5aa7dd;
  --verde-bg: rgb(7 148 85 / 14%); --verde-borda: rgb(7 148 85 / 40%); --verde: #47cd89;
  --ambar-bg: rgb(220 104 3 / 14%); --ambar-borda: rgb(220 104 3 / 40%); --ambar: #fdb022;
  --verm-bg: rgb(217 45 32 / 14%); --verm-borda: rgb(217 45 32 / 40%); --verm: #f97066;
  --sombra-xs: 0 1px 2px rgb(0 0 0 / 30%);
  --sombra-lg: 0 12px 24px rgb(0 0 0 / 45%);
  color-scheme: dark;
  background: var(--fundo);
}

/* ---------- login ----------
   Mesmo desenho da area restrita do canal de denuncia: quadro de apresentacao
   a esquerda com a fotografia ocupando a metade de cima, quadro de acesso a
   direita com camadas de sombra, e as erupcoes de luz ao fundo. As cores sao
   as da Eurosono; o neon verde de la virou o ciano daqui. */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.login {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}
.login-marca, .login-form { position: relative; z-index: 1; min-height: 0; }

/* --- quadro de apresentacao --- */
.login-marca {
  order: 1; overflow: hidden; margin: 16px; border-radius: 24px; padding: 48px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; color: #fff;
  background:
    radial-gradient(90% 70% at 85% 10%, rgb(34 211 238 / 35%), transparent 60%),
    radial-gradient(80% 70% at 10% 100%, rgb(31 125 192 / 55%), transparent 60%),
    linear-gradient(160deg, #0e4f83, #061d33 70%);
  transition: box-shadow .45s ease;
  container-type: inline-size;
}
.login-marca:hover {
  box-shadow: 0 0 0 1.5px rgb(34 211 238 / 55%), 0 0 26px rgb(34 211 238 / 30%), 0 0 70px rgb(31 125 192 / 35%);
}
.login-marca::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px),
                    linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%);
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
/* A fotografia cobre a metade de cima e se dissolve no azul, em vez de terminar
   numa borda reta. */
.login-marca .ilustracao {
  position: absolute; z-index: 0; top: 0; left: 0; right: 0; width: 100%; height: 50%;
  /* A fotografia e uma faixa larga (847x320): o recorte mantem o operador a
     esquerda e os caminhoes ao centro, e a altura menor reduz a ampliacao. */
  object-fit: cover; object-position: 32% 50%;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.login-marca .logo {
  position: absolute; z-index: 2; top: 36px; left: 48px; width: auto;
  height: clamp(46px, 4.2vw, 68px);
  /* A marca e azul e some sobre a foto clara; virar branco solido e o mesmo
     recurso da referencia, que usa uma versao clara do logo. */
  filter: brightness(0) invert(1) drop-shadow(0 4px 14px rgb(0 0 0 / 55%));
}
/* veu-topo: a fotografia e clara na parte de cima e engolia o logo. */
.login-marca::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 180px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(6 29 51 / 62%), rgb(6 29 51 / 18%) 60%, transparent 100%);
}
.login-marca > div, .login-marca .rodape-marca { position: relative; z-index: 2; }
.login-marca h2 {
  /* Uma linha so. O tamanho segue a largura DO QUADRO (cqw), e nao a da janela:
     com vw o titulo era cortado sempre que a coluna ficava mais estreita do que
     a janela sugeria. A primeira linha e o retorno para navegador sem suporte. */
  font: 600 clamp(18px, 2.05vw, 38px)/1.2 "Inter", sans-serif;
  font-size: clamp(18px, 5.7cqw, 38px);
  letter-spacing: -.02em; margin: 0; max-width: none; white-space: nowrap;
}
.login-marca h2 em { font-style: normal; color: #9fe3f5; }
.login-marca p { color: rgb(255 255 255 / 80%); font-size: 17px; max-width: 30em; margin: 0; }
.login-marca ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.login-marca li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: rgb(255 255 255 / 90%); }
.login-marca li svg { flex: 0 0 20px; height: 20px; color: #9fe3f5; margin-top: 1px; }
.login-marca .rodape-marca { font-size: 13px; color: rgb(255 255 255 / 60%); }

/* --- quadro de acesso --- */
.login-form {
  order: 2; display: flex; align-items: center; justify-content: center; padding: 48px 32px;
  background: transparent; overflow: hidden auto; overscroll-behavior: contain;
}
.login-form .caixa {
  --fundo-caixa: linear-gradient(180deg, #1b2130 0%, #141925 100%);
  position: relative; z-index: 1; width: 100%; max-width: 380px;
  padding: 32px 32px 28px; border: 1px solid transparent; border-radius: 20px;
  background: var(--fundo-caixa) padding-box;
  transition: box-shadow .45s ease;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    0 30px 60px -20px rgb(31 125 192 / 30%);
}
.login-form .caixa {
  --fundo-caixa: linear-gradient(180deg, #1b2130 0%, #141925 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    0 30px 60px -20px rgb(31 125 192 / 30%);
}
/* Ao passar o mouse ou digitar, a borda vira um contorno de luz girando. */
.login-form .caixa:is(:hover, :focus-within) {
  border-width: 1.5px;
  background:
    var(--fundo-caixa) padding-box,
    conic-gradient(from var(--giro), #22d3ee, #1f7dc0, #7cd4fd, #22d3ee) border-box;
  animation: giro-neon 3.5s linear infinite;
  box-shadow:
    0 0 0 1px rgb(34 211 238 / 30%),
    0 0 22px rgb(34 211 238 / 35%),
    0 0 60px rgb(31 125 192 / 35%),
    0 30px 60px -20px rgb(18 102 169 / 40%);
}
@keyframes giro-neon { to { --giro: 360deg; } }

.login-form .logo-login { height: 40px; width: auto; margin: 0 auto 24px; display: block; }
.cabeca-login { text-align: center; }
.cabeca-login .selo-topo { margin-left: auto; margin-right: auto; }
.login-form .caixa h1 { font: 600 30px/38px "Inter", sans-serif; letter-spacing: -.02em; margin: 0 0 8px; color: var(--t1); }
.login-form .caixa .cabeca-login > p { color: var(--t2); font-size: 16px; margin: 0 0 24px; }
.login-form input { transition: border-color .2s, box-shadow .25s; }
.login-form input:hover { border-color: rgb(34 211 238 / 60%); }
.login-form input:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgb(34 211 238 / 22%), 0 0 14px rgb(34 211 238 / 45%), 0 0 30px rgb(31 125 192 / 25%);
}
.login-form .dica.centro { margin-top: 20px; }
.selo-topo {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  font: 500 12px/18px "Inter", sans-serif; background: var(--b50);
  border: 1px solid var(--b100); margin-bottom: 12px;
}
.selo-topo svg { width: 14px; height: 14px; }
.selo-topo { color: var(--b300); }
.so-celular { display: none; }

/* --- trilhas de circuito ao fundo --- */
/* Linhas que sobem em degraus, com nos de solda nas juncoes e um pulso de
   corrente percorrendo cada trilha de baixo para cima. O desenho vem do
   gerador scripts/gerar-circuito.py, com semente fixa. */
.login > .circuito {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  opacity: .5; transition: opacity .6s ease;
  /* Dissolve no alto: as trilhas somem antes de encostar na borda. */
  -webkit-mask-image: linear-gradient(to top, #000 30%, rgb(0 0 0 / 55%) 72%, transparent 100%);
  mask-image: linear-gradient(to top, #000 30%, rgb(0 0 0 / 55%) 72%, transparent 100%);
}
.circuito-svg { display: block; width: 100%; height: 100%; }

.circuito .ciano   { color: #22d3ee; }
.circuito .azul    { color: #3b82f6; }
.circuito .claro   { color: #7cd4fd; }
.circuito .violeta { color: #a78bfa; }
.circuito .ambar   { color: #f59e0b; }
.circuito .rosa    { color: #fb7185; }
.circuito .verde   { color: #34d399; }

.circuito .linha {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; opacity: .3;
}
.circuito .corrente {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
  /* O padrao soma 200: animar o deslocamento em -200 fecha o ciclo sem salto,
     qualquer que seja o comprimento da trilha. */
  stroke-dasharray: 18 182;
  animation: correnteza 7s linear infinite;
  filter: drop-shadow(0 0 5px currentColor);
}
@keyframes correnteza { to { stroke-dashoffset: -200; } }
/* Cada trilha no seu tempo: sem isto todas pulsariam juntas, como um metronomo. */
.circuito .correntes path:nth-child(5n+1) { animation-duration: 8.5s; animation-delay: -1.2s; }
.circuito .correntes path:nth-child(5n+2) { animation-duration: 6.2s; animation-delay: -3.4s; }
.circuito .correntes path:nth-child(5n+3) { animation-duration: 9.4s; animation-delay: -5.1s; }
.circuito .correntes path:nth-child(5n+4) { animation-duration: 7.3s; animation-delay: -2.2s; }
.circuito .correntes path:nth-child(5n)   { animation-duration: 10.2s; animation-delay: -6.6s; }

.circuito .junta { fill: currentColor; opacity: .5; }
.circuito .no { fill: currentColor; filter: drop-shadow(0 0 6px currentColor); }
.circuito .nos circle:nth-child(3n) { animation: pisca 4.5s ease-in-out infinite; }
.circuito .nos circle:nth-child(3n+1) { animation: pisca 6s ease-in-out infinite -2s; }
@keyframes pisca { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }


.login:has(.caixa:hover, .caixa:focus-within, .login-marca:hover) > .circuito { opacity: .85; }
.login:has(.caixa:hover, .caixa:focus-within, .login-marca:hover) .corrente { animation-duration: 3.6s; }

/* Auras paradas atras de cada quadro, para o fundo nao ficar chapado. */
.login::before, .login::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  filter: blur(46px); opacity: .5; animation: aura 5.5s ease-in-out infinite alternate;
}
.login::before { left: 4%; top: 12%; width: 44%; height: 76%; background: radial-gradient(circle, rgb(31 125 192 / 35%), transparent 70%); }
.login::after { right: 4%; top: 18%; width: 44%; height: 70%; background: radial-gradient(circle, rgb(34 211 238 / 28%), transparent 70%); animation-delay: 1.6s; }
@keyframes aura { from { transform: scale(1); } to { transform: scale(1.12); } }

@media (max-width: 960px) {
  .login { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .login-marca { display: none; }
  .login-form { align-items: flex-start; padding: 56px 20px 32px; }
  .so-celular { display: block; }
  .login > .circuito, .login::before, .login::after { display: none; }
}
/* Tela baixa: a fotografia cede espaco ao texto, em vez de espremer tudo. */
@media (min-width: 961px) and (max-height: 820px) {
  .login-marca { padding: 36px; }
  .login-marca .ilustracao { height: 42%; }
  /* So o teto desce: o calculo pela largura da coluna continua valendo. */
  .login-marca h2 { font-size: clamp(18px, 5.7cqw, 30px); }
  .login-form .caixa .cabeca-login > p { font-size: 15px; margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .circuito .corrente { animation: none; opacity: .35; }
  .circuito .nos circle { animation: none; }
  .login::before, .login::after { animation: none; }
  .login-form .caixa:is(:hover, :focus-within) { animation: none; }
}

/* ---------- casca ---------- */
.casca { display: grid; grid-template-columns: clamp(232px, 19vw, 296px) minmax(0, 1fr); min-height: 100vh; }
.lateral {
  display: flex; flex-direction: column; gap: 2px; padding: 24px 16px;
  background: var(--painel); border-right: 1px solid var(--borda);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral .marca { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; }
.lateral .marca img { height: 30px; width: auto; }
.lateral .marca strong { display: block; font: 600 15px/20px "Inter", sans-serif; color: var(--t1); }
.lateral .marca small { display: block; font-size: 12px; color: var(--t3); }
.lateral .grupo { font: 600 12px/18px "Inter", sans-serif; color: var(--t3); padding: 12px 12px 6px; }
.lateral .sep { height: 1px; background: var(--borda); margin: 12px 8px; }
.lateral nav { display: grid; gap: 2px; }
.lateral nav button {
  justify-content: flex-start; width: 100%; border: 1px solid transparent; background: transparent;
  box-shadow: none; color: var(--t-rotulo); padding: 9px 12px; font-weight: 500;
}
.lateral nav button svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--t3); }
.lateral nav button:hover { background: var(--painel-2); }
.lateral nav button.ativa { background: var(--painel-2); color: var(--t1); font-weight: 600; }
.lateral nav button.ativa svg { color: var(--b600); }
.lateral .online { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 500 12px/18px "Inter", sans-serif; color: var(--t-rotulo); padding: 1px 7px 1px 6px; border: 1px solid var(--borda-forte); border-radius: 6px; }
.lateral .online::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }
.lateral .usuario { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio); }
.lateral .avatar { flex: 0 0 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--b100); color: var(--b700); font: 600 15px "Inter", sans-serif; }
.lateral .usuario div { min-width: 0; flex: 1; }
.lateral .usuario strong { display: block; font: 600 14px/20px "Inter", sans-serif; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral .usuario small { display: block; font-size: 13px; color: var(--t2); }
.lateral .usuario button { width: 36px; min-height: 36px; padding: 0; box-shadow: none; border-color: transparent; background: transparent; color: var(--t3); }
.lateral .usuario button:hover { background: var(--painel-2); }

.conteudo { min-width: 0; display: flex; flex-direction: column; }
.topo-movel { display: none; }
.cabecalho { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 32px) 0; width: 100%; max-width: 2200px; margin-inline: auto; }
.cabecalho h1 { font: 600 24px/32px "Inter", sans-serif; letter-spacing: -.01em; margin: 0; color: var(--t1); }
.cabecalho .sub { color: var(--t2); font-size: 15px; margin-top: 4px; }
.cabecalho .espaco { flex: 1; }
.cabecalho .acoes-cab { display: flex; gap: 12px; align-items: center; }
.cabecalho .relogio { display: inline-flex; align-items: center; gap: 6px; font: 500 14px "Inter", sans-serif; color: var(--t-rotulo); padding: 9px 14px; border: 1px solid var(--borda-forte); border-radius: 8px; background: var(--painel); box-shadow: var(--sombra-xs); }
.cabecalho .relogio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.pagina { padding: clamp(16px, 1.8vw, 28px) clamp(16px, 2vw, 32px) 48px; width: 100%; max-width: 2200px; margin-inline: auto; }
.veu { display: none; position: fixed; inset: 0; z-index: 25; background: rgb(12 17 29 / 60%); }

@media (max-width: 960px) {
  .casca { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: 288px;
    transform: translateX(-100%); transition: transform .2s ease-out;
  }
  body.menu-aberto .lateral { transform: none; }
  body.menu-aberto .veu { display: block; }
  .topo-movel {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: var(--painel); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 20;
  }
  .topo-movel img { height: 26px; width: auto; }
  .topo-movel .espaco { flex: 1; }
  .cabecalho { padding: 24px 16px 0; }
  .pagina { padding: 16px 16px 40px; }
}

/* ---------- tabela ---------- */
.tabela-cartao { padding: 0 !important; overflow: hidden; }
.tabela-cartao .cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; flex-wrap: wrap; }
.tabela-cartao .cab h2 { margin: 0; }
.tabela-cartao .barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); background: var(--painel-2); }
.tabela-cartao .barra-filtros .espaco { flex: 1; }
.tabela-cartao .barra-filtros select { width: auto; min-width: 190px; }
.rolagem { overflow-x: auto; }
.dados { width: 100%; border-collapse: collapse; }
.dados th { background: var(--painel-2); padding: 12px 24px; font: 500 12px/18px "Inter", sans-serif; color: var(--t2); text-align: left; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.dados td { padding: 16px 24px; border-bottom: 1px solid var(--borda); font-size: 14px; color: var(--t2); vertical-align: middle; }
.dados tbody tr:last-child td { border-bottom: 0; }
.dados tbody tr:hover { background: var(--painel-2); }
.dados .forte { color: var(--t1); font-weight: 500; }
.dados .acao-linha { width: 1%; text-align: right; white-space: nowrap; }
.dados .acao-linha button { width: 36px; min-height: 36px; padding: 0; border-color: transparent; box-shadow: none; background: transparent; color: var(--t3); }
.dados .acao-linha button:hover { background: var(--painel-2); color: var(--t1); }
.vazio { padding: 48px 24px; text-align: center; color: var(--t2); font-size: 15px; }
/* Só o ícone solto do estado vazio: o de dentro de um botão tem estilo próprio. */
.vazio > svg { width: 24px; height: 24px; color: var(--t2); display: block; margin: 0 auto 14px; padding: 12px; box-sizing: content-box; border: 1px solid var(--borda-forte); border-radius: 10px; box-shadow: var(--sombra-xs); background: var(--painel); }
@media (max-width: 700px) {
  .dados thead { display: none; }
  .dados tr { display: block; border-bottom: 1px solid var(--borda); padding: 12px 16px; }
  .dados td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 4px 0; }
  .dados td::before { content: attr(data-rotulo); font: 500 12px/18px "Inter", sans-serif; color: var(--t3); }
  .dados .acao-linha { width: auto; justify-content: flex-end; }
}

.busca { position: relative; flex: 0 1 320px; }
.busca svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--t3); pointer-events: none; }
.busca input { padding-left: 42px; }
.grupo-botoes { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: 8px; box-shadow: var(--sombra-xs); overflow: hidden; }
.grupo-botoes button { border: 0; border-right: 1px solid var(--borda-forte); border-radius: 0; box-shadow: none; min-height: 40px; }
.grupo-botoes button:last-child { border-right: 0; }
.grupo-botoes button.ativa { background: var(--painel-2); color: var(--t1); }

/* ---------- indicadores ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 1.4vw, 24px); margin-bottom: 24px; }
.kpi { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-xs); padding: 20px; }
.kpi small { display: block; font: 500 14px/20px "Inter", sans-serif; color: var(--t2); }
.kpi strong { display: block; margin-top: 8px; font: 600 36px/44px "Inter", sans-serif; letter-spacing: -.02em; color: var(--t1); font-variant-numeric: tabular-nums; }
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 12px 0 4px; }
.ficha div { background: var(--painel-2); border: 1px solid var(--borda); border-radius: 8px; padding: 12px 14px; }
.ficha small { display: block; font: 500 12px/18px "Inter", sans-serif; color: var(--t2); }
.ficha span { display: block; margin-top: 2px; font: 600 15px "Inter", sans-serif; color: var(--t1); overflow-wrap: anywhere; }


/* ---------- modal e avisos ---------- */
dialog.modal { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: var(--raio); background: var(--painel); color: var(--t1); box-shadow: var(--sombra-lg); }
dialog.modal::backdrop { background: rgb(12 17 29 / 70%); }
.modal h2 { font: 600 18px/28px "Inter", sans-serif; margin: 0 0 4px; }
.modal .corpo { color: var(--t2); font-size: 14px; }
.modal .rodape-modal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.modal.perigo button.primario { background: var(--verm); border-color: var(--verm); color: #fff; }

.avisos { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: grid; gap: 12px; width: min(400px, calc(100vw - 32px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--raio); background: var(--painel); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-lg); font-size: 14px; }
.toast::before { content: ""; flex: 0 0 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px var(--verde-bg); }
.toast.erro::before { background: var(--verm); box-shadow: 0 0 0 4px var(--verm-bg); }
.toast strong { display: block; font-weight: 600; color: var(--t1); }
.toast span { color: var(--t2); }
.toast.saindo { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.rodape-login { margin-top: 20px; }

/* ---------- peças das telas de cadastro ---------- */
.espaco-acima { margin-top: 16px; }
.marcador-voce { margin-left: 8px; }
.modal label:first-of-type { margin-top: 0; }
.modal form > div + div label { margin-top: 16px; }
.modal .dica { margin-top: 6px; }
.tabela-cartao .cab p { margin: 2px 0 0; }
.dados .acao-linha button + button { margin-left: 4px; }

/* ---------- movimentações ---------- */
.linha-clicavel { cursor: pointer; }
.placa-extra { margin-left: 6px; }
.paginacao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: -8px; }
.paginacao .espaco { flex: 1; }
.caso-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.caso-cab .placa { font-size: 16px; }
.grade-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: start; }
.foto-entrada { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--borda); display: block; }
.barra-filtros input[type=date] { width: auto; min-width: 150px; }

/* ---------- icones, selos e etiquetas ----------
   Cada tom traz a cor do traco e a do fundo tingido. Assim o mesmo icone serve
   de selo, de etiqueta e de botao de acao sem repetir cor em cada regra. */
.tom-azul     { --tom: #1266a9; --tom-bg: rgb(18 102 169 / 12%); }
.tom-ciano    { --tom: #0891b2; --tom-bg: rgb(8 145 178 / 12%); }
.tom-violeta  { --tom: #7c3aed; --tom-bg: rgb(124 58 237 / 12%); }
.tom-verde    { --tom: #079455; --tom-bg: rgb(7 148 85 / 12%); }
.tom-ambar    { --tom: #b45309; --tom-bg: rgb(180 83 9 / 12%); }
.tom-vermelho { --tom: #d92d20; --tom-bg: rgb(217 45 32 / 12%); }
.tom-cinza    { --tom: #667085; --tom-bg: rgb(102 112 133 / 12%); }
:root[data-tema="escuro"] .tom-azul     { --tom: #5aa7dd; --tom-bg: rgb(90 167 221 / 16%); }
:root[data-tema="escuro"] .tom-ciano    { --tom: #22d3ee; --tom-bg: rgb(34 211 238 / 14%); }
:root[data-tema="escuro"] .tom-violeta  { --tom: #a78bfa; --tom-bg: rgb(167 139 250 / 16%); }
:root[data-tema="escuro"] .tom-verde    { --tom: #47cd89; --tom-bg: rgb(71 205 137 / 14%); }
:root[data-tema="escuro"] .tom-ambar    { --tom: #fdb022; --tom-bg: rgb(253 176 34 / 14%); }
:root[data-tema="escuro"] .tom-vermelho { --tom: #f97066; --tom-bg: rgb(249 112 102 / 14%); }
:root[data-tema="escuro"] .tom-cinza    { --tom: #94969c; --tom-bg: rgb(148 150 156 / 14%); }

.icone { flex: 0 0 auto; }
.selo-icone {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; color: var(--tom, var(--t2)); background: var(--tom-bg, var(--painel-2));
  box-shadow: 0 0 0 1px rgb(from var(--tom, #667085) r g b / 18%);
}
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font: 500 12px/18px "Inter", sans-serif; white-space: nowrap;
  color: var(--tom); background: var(--tom-bg);
  box-shadow: inset 0 0 0 1px rgb(from var(--tom) r g b / 22%);
}
/* Etiqueta que tambem e botao: abre a edicao do cadastro. */
button.etiqueta-acao { min-height: 0; border: 0; cursor: pointer; white-space: nowrap; }
button.etiqueta-acao:hover { background: var(--tom-bg); filter: brightness(.96); }
.etiqueta-acao svg { flex: 0 0 14px; width: 14px; height: 14px; }
.acao-icone {
  width: 36px; min-height: 36px; padding: 0; border-color: transparent; box-shadow: none;
  background: transparent; color: var(--t3); transition: color .15s, background .15s;
}
.acao-icone:hover { color: var(--tom); background: var(--tom-bg); }

/* ---------- tela de usuarios ---------- */
.resumo-usuarios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 1.2vw, 20px); margin-bottom: 24px;
}
.resumo-item {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-xs);
}
.resumo-item strong { display: block; font: 600 24px/30px "Inter", sans-serif; color: var(--t1); font-variant-numeric: tabular-nums; }
.resumo-item small { display: block; font-size: 13px; color: var(--t2); }

.pessoa-celula { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar-lista {
  flex: 0 0 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font: 600 14px "Inter", sans-serif; color: var(--tom); background: var(--tom-bg);
  box-shadow: inset 0 0 0 1px rgb(from var(--tom) r g b / 22%);
}
.pessoa-celula strong { display: flex; align-items: center; gap: 8px; font: 600 14px/20px "Inter", sans-serif; color: var(--t1); }
.pessoa-celula small { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--t2); }
.marcador-voce { margin-left: 0; padding: 1px 8px; font-size: 11px; }
.linha-inativa .avatar-lista, .linha-inativa .pessoa-celula strong { opacity: .6; }

.dica-cartao { display: flex; align-items: flex-start; gap: 14px; }
.dica-cartao strong { display: block; font: 600 14px/20px "Inter", sans-serif; color: var(--t1); margin-bottom: 2px; }
.dica-cartao p { margin: 0; }

/* ---------- formulario em janela ---------- */
dialog.modal { width: min(480px, calc(100vw - 32px)); }
.cabeca-modal { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.cabeca-modal h2 { margin: 0 0 2px; }
.cabeca-modal p { margin: 0; font-size: 14px; line-height: 20px; color: var(--t2); }
.modal .campo + .campo { margin-top: 16px; }
.modal .campo label { margin-top: 0; }
.entrada { position: relative; display: flex; align-items: center; }
.entrada input { width: 100%; }
.entrada.com-icone input { padding-left: 44px; }
.entrada .icone-campo { position: absolute; left: 15px; color: var(--t3); pointer-events: none; }
.entrada input:focus ~ .icone-campo, .entrada:focus-within .icone-campo { color: var(--b600); }
.ver-senha {
  position: absolute; right: 6px; width: 34px; min-height: 34px; padding: 0;
  border-color: transparent; box-shadow: none; background: transparent; color: var(--t3);
}
.ver-senha:hover { color: var(--t1); background: var(--painel-2); }
.modal .dica { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.modal .dica.atendida { color: var(--verde); }

/* Cartoes de escolha: substituem a lista suspensa onde a diferenca entre as
   opcoes precisa de uma linha de explicacao. */
.escolhas { display: grid; gap: 10px; }
.escolha {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda-forte);
  background: var(--painel); box-shadow: none; font-weight: 500;
}
.escolha:hover { background: var(--painel-2); }
.escolha strong { display: block; font: 600 14px/20px "Inter", sans-serif; color: var(--t1); }
.escolha small { display: block; font-size: 13px; color: var(--t2); }
.escolha.ativa { border-color: var(--b300); box-shadow: var(--anel); background: var(--b25); }
.escolha .selo-icone { width: 34px; height: 34px; border-radius: 10px; }
.modal .aviso.erro { display: flex; align-items: center; gap: 8px; margin-top: 16px; }

/* ---------- cadastros: empresa e veiculo ---------- */
.avatar-lista.quadrado { border-radius: 10px; }
.placa-etiqueta {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px;
  font: 600 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em;
  color: var(--t1); background: var(--painel-2); border: 1px solid var(--borda-forte);
}
.filtro-empresa { flex: 0 1 260px; }
.filtro-empresa select { padding-left: 44px; }
.vazio .selo-icone { margin: 0 auto 14px; }
.vazio p { margin: 0; }
.vazio .espaco-acima { display: inline-flex; }

/* ---------- estado vazio: ação centralizada ---------- */
.vazio .espaco-acima { display: inline-flex; justify-content: center; margin-inline: auto; }
.vazio button svg { padding: 0; border: 0; box-shadow: none; background: none; margin: 0; width: 18px; height: 18px; }

/* ---------- fotos do cadastro: condutor e veiculo ---------- */
.campo-foto {
  display: flex; align-items: center; gap: 14px; padding: 12px;
  border: 1px dashed var(--borda-forte); border-radius: 12px; background: var(--painel-2);
}
.campo-foto-lado { display: grid; gap: 8px; min-width: 0; }
.campo-foto-ajuda { font-size: 13px; line-height: 18px; color: var(--t3); }
.campo-foto-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.previa-foto {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; color: var(--t3);
  background: var(--painel); border: 1px solid var(--borda-forte);
}
.previa-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Veiculo: a foto e paisagem, entao a previa e um retangulo 4:3. */
.previa-foto.retangular { flex-basis: 88px; width: 88px; height: 64px; border-radius: 10px; }
.entrada-arquivo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.escolher-foto { cursor: pointer; }
.avatar-lista.foto { object-fit: cover; }
.dica.erro-dica { color: var(--verm); }

/* ---------- janela de formulario ---------- */
/* Cabecalho, miolo e rodape: so o miolo rola, e os botoes ficam sempre a
   vista, em vez de a janela inteira rolar. Vale para toda janela com campos. */
dialog.modal.estruturado { width: min(500px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.modal.estruturado form { display: flex; flex-direction: column; max-height: min(calc(100dvh - 48px), 820px); }
.modal.estruturado .cabeca-modal { margin: 0; padding: 22px 24px 18px; border-bottom: 1px solid var(--borda); }
.modal.estruturado .grade-campos {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 20px; align-content: start;
  padding: 20px 24px 24px; overflow-y: auto;
}
.modal.estruturado .grade-campos .campo + .campo { margin-top: 0; }
.modal.estruturado .grade-campos .campo { min-width: 0; }
.modal.estruturado .grade-campos .campo.inteira { grid-column: 1 / -1; }
/* Escolha de linha inteira no formulario largo: as opcoes ficam lado a lado. */
.modal.largo .campo.inteira .escolhas { grid-template-columns: 1fr 1fr; }
.modal.estruturado .secao-modal {
  grid-column: 1 / -1; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--borda);
  font: 600 12px/18px "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--t3);
}
.modal.estruturado .secao-modal:not(:first-child) { margin-top: 8px; }
.modal.estruturado .aviso.erro { margin: 0 24px 16px; }
.modal.estruturado .rodape-modal {
  display: flex; justify-content: flex-end; gap: 12px; margin: 0; padding: 16px 24px;
  border-top: 1px solid var(--borda); background: var(--painel-2);
}
.modal.estruturado .rodape-modal button { min-width: 132px; }

/* Largo: duas colunas. E o cadastro de veiculo, que tem campo demais para uma. */
dialog.modal.largo { width: min(720px, calc(100vw - 32px)); }
.modal.largo .grade-campos { grid-template-columns: 1fr 1fr; }

@media (max-width: 640px) {
  .modal.largo .grade-campos { grid-template-columns: 1fr; }
  .modal.largo .campo.inteira .escolhas { grid-template-columns: 1fr; }
  .modal.estruturado .grade-campos { padding: 16px 18px 20px; }
  .modal.estruturado .cabeca-modal { padding: 18px 18px 14px; }
  .modal.estruturado .rodape-modal { padding: 14px 18px; }
  .modal.estruturado .rodape-modal button { flex: 1; min-width: 0; }
}