/* ==========================================================================
   KmCerto — redesenho (design system Organic): creme, terracota e sálvia.
   Carrega depois do app.css: redefine as variáveis antigas (todas as telas mudam de cor juntas), traz as regras
   de forma dos componentes MudBlazor e as peças do layout novo. Só o tema claro nesta etapa.
   ========================================================================== */

/* ---------- fontes (OFL, embutidas: funcionam sem internet) ---------- */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fontes/figtree-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fontes/figtree-normal-latin.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: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fontes/figtree-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fontes/figtree-italic-latin.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: "Caprasimo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/caprasimo-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: "Caprasimo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/caprasimo-normal-latin.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;
}

/* ---------- variáveis ---------- */

/* :root repetido: vence o :root do app.css (o app só tem o tema claro). */
:root:root:root {
  --kc-accent-100: #fff2eb;
  --kc-accent-200: #ffe1d0;
  --kc-accent-300: #ffc6a5;
  --kc-accent-500: #d67f48;
  --kc-accent-600: #b2622d;
  --kc-accent-700: #8c491a;
  --kc-accent-800: #643312;
  --kc-accent2-100: #f0fae1;
  --kc-accent2-200: #e1eecc;
  --kc-accent2-300: #ccdbb2;
  --kc-accent2-400: #aebf92;
  --kc-accent2-500: #8fa073;
  --kc-accent2-600: #728157;
  --kc-accent2-700: #56633f;
  --kc-accent2-800: #3d472b;

  --kc-primaria: #c67139;
  --kc-secundaria: #7a8a5e;
  --kc-fundo: #f5ead8;
  --kc-superficie: #ebddc5;
  --kc-superficie-funda: #e2d1b3;
  --kc-texto: #201e1d;
  --kc-texto-suave: #5e574c;
  --kc-divisor: rgba(32, 30, 29, 0.16);
  --kc-sombra-flutuante: 0 12px 32px rgba(32, 30, 29, 0.16);

  --kc-fonte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kc-fonte-titulo: "Caprasimo", Georgia, serif;
  --kc-raio-cartao: 28px;
  --kc-raio-hero: 36px;
  --kc-raio-pilula: 999px;
  --kc-altura-campo: 48px;

  /* Variáveis antigas do app.css na paleta nova. */
  --cor-primaria: #c67139;
  --cor-primaria-forte: #8c491a;
  --cor-primaria-suave: #ffe1d0;
  --cor-destaque: #c67139;
  --cor-destaque-texto: #f5ead8;
  --cor-perigo: #8c491a;
  --cor-aviso: #b2622d;
  --cor-ok: #728157;
  --cor-fundo: #f5ead8;
  --cor-superficie: #ebddc5;
  --cor-superficie-2: #f5ead8;
  --cor-borda: rgba(32, 30, 29, 0.16);
  --cor-texto: #201e1d;
  --cor-texto-suave: #5e574c;
  --cor-texto-invertido: #f5ead8;
  --sombra-1: none;
  --sombra-2: var(--kc-sombra-flutuante);
  --raio: 28px;
  --raio-pequeno: 16px;
  --fonte: var(--kc-fonte);
  --altura-inferior: 82px;

  color-scheme: light;
}

/* ---------- base ---------- */

html,
body {
  background: var(--kc-fundo);
  color: var(--kc-texto);
  font-family: var(--kc-fonte);
}

body {
  font-size: 15.5px;
}

h1,
h2,
h3,
.titulo-pagina {
  font-family: var(--kc-fonte-titulo);
  font-weight: 400;
  letter-spacing: 0;
}

.titulo-pagina {
  font-size: 28px;
  line-height: 1.12;
  margin: 2px 0 4px;
}

.subtitulo-pagina {
  color: var(--kc-texto-suave);
  font-size: 15.5px;
  margin: 0 0 18px;
}

.kc-numero {
  font-family: var(--kc-fonte-titulo);
  font-weight: 400;
  letter-spacing: 0;
}

.kc-rotulo-secao {
  font-family: var(--kc-fonte);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kc-accent2-700);
}

a {
  color: var(--kc-accent-700);
}

.texto-suave,
small {
  color: var(--kc-texto-suave);
}

*:focus-visible {
  outline: 2px solid var(--kc-primaria);
  outline-offset: 2px;
}

/* ---------- layout ---------- */

.kc-app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--kc-fundo);
}

.kc-topo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: calc(var(--safe-top) + 10px) 16px 8px;
  background: var(--kc-fundo);
  position: relative;
  z-index: 20;
}

.kc-conteudo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 18px 28px;
}

.kc-conteudo__largura {
  max-width: 720px;
  margin: 0 auto;
}

.kc-rodape {
  flex: none;
  background: var(--kc-fundo);
  border-top: 1px solid var(--kc-divisor);
  padding: 12px 16px calc(var(--safe-bottom) + 12px);
  position: relative;
  z-index: 20;
}

.kc-rodape__largura {
  max-width: 720px;
  margin: 0 auto;
}

/* Botão voltar: círculo escuro no cabeçalho. */
.kc-voltar {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--kc-texto);
  color: var(--kc-fundo);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.kc-voltar .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-fundo);
  --icone-secundaria-opacidade: 0.45;
  font-size: 18px;
}

/* ---------- ícones duotone ---------- */

/* Os ícones do Font Awesome 7 vêm num quadro de 640 x 640 (tools/icones/gerar-icones.py): numa caixa de 1em o glifo tem 0,8em de
   altura, como nas figuras do redesenho. O tamanho da caixa (1em, ou o da classe icone--*) vem do .icone do app.css. */
.icone,
.icone--primaria {
  --icone-primaria: var(--kc-accent-600);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

/* Mono: as duas camadas na cor do texto, a de trás mais clara (com a mesma cor e opacidade cheia o desenho de dentro sumia). */
.icone--mono {
  --icone-primaria: currentColor;
  --icone-secundaria: currentColor;
  --icone-secundaria-opacidade: 0.45;
}

.icone--suave {
  --icone-primaria: var(--kc-texto-suave);
  --icone-secundaria: var(--kc-texto-suave);
  --icone-secundaria-opacidade: 0.45;
}

.icone--perigo {
  --icone-primaria: var(--kc-accent-700);
  --icone-secundaria: var(--kc-accent-500);
  --icone-secundaria-opacidade: 1;
}

.icone--aviso {
  --icone-primaria: var(--kc-accent-600);
  --icone-secundaria: var(--kc-accent-300);
  --icone-secundaria-opacidade: 1;
}

.icone--destaque {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent-200);
  --icone-secundaria-opacidade: 1;
}

/* Em fundo terracota (botão principal, "+") e em fundo sálvia escuro (cartões de destaque). */
.mud-button-filled-primary .icone,
.kc-sobre-terracota .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent-200);
  --icone-secundaria-opacidade: 1;
}

.kc-sobre-salvia .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent2-400);
  --icone-secundaria-opacidade: 1;
}

/* ---------- avatar (ícone dentro de círculo) ---------- */

.kc-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kc-accent-100);
  font-size: 19px;
}

.kc-avatar--salvia {
  background: var(--kc-accent2-100);
}

.kc-avatar--terracota {
  background: var(--kc-primaria);
}

.kc-avatar--salvia-escuro {
  background: var(--kc-accent2-700);
}

.kc-avatar--pequeno {
  width: 32px;
  height: 32px;
  font-size: 15px;
}

/* ---------- cartões ---------- */

.kc-cartao {
  background: var(--kc-superficie);
  border: 0;
  border-radius: var(--kc-raio-cartao);
  box-shadow: none;
  padding: 18px;
}

.kc-cartao + .kc-cartao {
  margin-top: 14px;
}

.kc-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--kc-raio-hero);
  padding: 22px 22px 20px;
  background: var(--kc-primaria);
  color: var(--kc-fundo);
}

.kc-hero::after {
  content: "";
  position: absolute;
  top: -48px;
  right: -48px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--kc-accent-500);
  opacity: 0.85;
  pointer-events: none;
}

.kc-hero > * {
  position: relative;
  z-index: 1;
}

.kc-hero--salvia {
  background: var(--kc-accent2-800);
}

.kc-hero--salvia::after {
  background: var(--kc-accent2-700);
}

.kc-hero__rotulo {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.92;
}

.kc-hero__valor {
  font-family: var(--kc-fonte-titulo);
  font-size: 38px;
  line-height: 1.1;
  margin: 6px 0 2px;
}

.kc-pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.kc-pilula {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: var(--kc-raio-pilula);
  background: rgba(100, 51, 18, 0.55);
  color: var(--kc-fundo);
  font-size: 13.5px;
}

.kc-pilula strong {
  font-weight: 700;
}

/* ---------- selos de situação ---------- */

.kc-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--kc-raio-pilula);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.kc-status--vencido {
  background: var(--kc-primaria);
  color: var(--kc-fundo);
}

.kc-status--breve {
  background: var(--kc-accent-200);
  color: var(--kc-accent-800);
}

.kc-status--dia {
  background: var(--kc-accent2-200);
  color: var(--kc-accent2-800);
}

.kc-status--neutro {
  background: var(--kc-superficie-funda);
  color: var(--kc-texto-suave);
}

/* ---------- dicas e avisos ---------- */

.kc-dica,
.kc-atencao {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 22px;
  padding: 14px 16px;
  background: var(--kc-accent2-100);
  color: var(--kc-texto);
  font-size: 14.5px;
}

.kc-atencao {
  background: var(--kc-accent-100);
}

/* ---------- links de ação (Ver todos, Histórico completo) ---------- */

.kc-link {
  color: var(--kc-accent-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- MudBlazor: forma e tipografia ---------- */

.mud-button-root.mud-button {
  border-radius: var(--kc-raio-pilula) !important;
  font-family: var(--kc-fonte-titulo);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  min-height: 44px;
  padding: 8px 20px;
  font-size: 15px;
  line-height: 1.15;
}

.mud-button-root.mud-button.mud-button-size-small {
  min-height: 36px;
  padding: 6px 16px;
  font-size: 14px;
}

.mud-button-root.mud-button.mud-button-size-large {
  min-height: 52px;
  font-size: 16px;
}

.mud-button-outlined {
  border-color: rgba(32, 30, 29, 0.28) !important;
  color: var(--kc-texto) !important;
  background: transparent;
}

.mud-button-text.mud-button-text-primary {
  color: var(--kc-accent-700) !important;
}

.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-primary:focus-visible {
  background-color: var(--kc-accent-600) !important;
}

.mud-button-root .icone {
  font-size: 1.05em;
}

.mud-button-root.kc-botao .mud-button-label {
  gap: 8px;
}

.mud-chip {
  border-radius: var(--kc-raio-pilula) !important;
}

.mud-toggle-group {
  border-radius: var(--kc-raio-pilula) !important;
}

.mud-card,
.mud-paper.kc-cartao,
.mud-dialog {
  border-radius: var(--kc-raio-cartao) !important;
}

.mud-paper.kc-hero {
  border-radius: var(--kc-raio-hero) !important;
}

.mud-typography-h4,
.mud-typography-h5 {
  font-family: var(--kc-fonte-titulo);
}

/* ---------- Snackbar (aviso rápido): pílula escura acima do rodapé ---------- */

.mud-snackbar-location-bottom-center,
.mud-snackbar-location-bottom-center.mud-snackbar-provider {
  bottom: calc(var(--altura-inferior) + var(--safe-bottom) + 12px) !important;
}

.mud-snackbar {
  border-radius: var(--kc-raio-pilula) !important;
  background: var(--kc-texto) !important;
  color: var(--kc-fundo) !important;
  font-family: var(--kc-fonte);
  min-width: 0 !important;
  box-shadow: var(--kc-sombra-flutuante) !important;
}

.mud-snackbar .mud-snackbar-icon {
  display: none;
}

/* ---------- cabeçalho: pílula do veículo e menu (tela 05) ---------- */

.kc-veiculo {
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
}

.kc-veiculo__pilula {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 44px;
  padding: 5px 12px 5px 5px;
  border: 0;
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-superficie);
  color: var(--kc-texto);
  cursor: pointer;
  text-align: left;
}

.kc-veiculo__nome {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc-veiculo__modelo {
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--kc-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc-veiculo__seta {
  margin-left: 2px;
}

.kc-veiculo__fundo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(32, 30, 29, 0.28);
}

.kc-veiculo__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -2px;
  z-index: 41;
  width: min(300px, calc(100vw - 32px));
  padding: 8px;
  border-radius: var(--kc-raio-cartao);
  background: #f8eedf;
  box-shadow: var(--kc-sombra-flutuante);
}

.kc-veiculo__opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--kc-texto);
  text-align: left;
  cursor: pointer;
}

.kc-veiculo__opcao--ativa {
  background: var(--kc-accent2-100);
}

.kc-veiculo__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 15px;
}

.kc-veiculo__texto small {
  font-size: 13px;
  margin-top: 2px;
}

.kc-veiculo__opcao--gerenciar .kc-veiculo__texto {
  color: var(--kc-accent-700);
  font-weight: 600;
}

.kc-veiculo__engrenagem {
  width: 44px;
  display: grid;
  place-items: center;
  font-size: 18px;
}

.kc-avatar--claro {
  background: var(--kc-fundo);
}

/* ---------- barra de navegação com o (+) ---------- */

.kc-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kc-nav__abas {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 6px;
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-superficie);
  overflow: hidden;
}

/* As 4 abas cabem em 360 px com a ativa mais larga ("Relatórios", "Lembretes"): inativas de 40 px, só o ícone. */
.kc-nav__aba {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  min-width: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--kc-raio-pilula);
  background: transparent;
  color: var(--kc-texto);
  font-size: 15px;
  cursor: pointer;
}

.kc-nav__aba .icone {
  font-size: 19px;
}

.kc-nav__aba--ativa {
  padding: 0 14px;
  background: var(--kc-accent-200);
  color: var(--kc-accent-800);
}

.kc-nav__rotulo {
  font-weight: 500;
  font-size: 14.5px;
  white-space: nowrap;
}

.kc-nav__novo {
  flex: none;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--kc-primaria);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.kc-nav__novo .icone {
  font-size: 22px;
}

/* ---------- barra de ações do formulário ---------- */

.kc-acoes-formulario {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kc-acoes-formulario > .mud-button-root {
  flex: 1 1 0;
  min-height: 52px;
}

.kc-acoes-formulario > .kc-acao-principal {
  flex-grow: 1.4;
}

.kc-acoes-formulario > .mud-button-text {
  flex: 0 0 auto;
  padding-left: 10px;
  padding-right: 10px;
}

/* ---------- folhas (MudDialog de baixo para cima) ---------- */

.mud-dialog.kc-folha {
  width: 100% !important;
  max-width: 640px;
  max-height: calc(100dvh - var(--safe-top) - 28px);
  margin: 0 !important;
  border-radius: var(--kc-raio-hero) var(--kc-raio-hero) 0 0 !important;
  background: var(--kc-fundo);
  color: var(--kc-texto);
  box-shadow: 0 -12px 40px rgba(32, 30, 29, 0.18);
}

.mud-dialog.kc-folha::before {
  content: "";
  display: block;
  flex: none;
  width: 44px;
  height: 5px;
  margin: 10px auto 0;
  border-radius: 3px;
  background: rgba(32, 30, 29, 0.18);
}

.mud-dialog .kc-folha__cabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 8px;
}

.kc-folha__icone {
  width: 52px;
  height: 52px;
  font-size: 22px;
}

.kc-folha__titulo {
  flex: 1;
  min-width: 0;
  font-family: var(--kc-fonte-titulo);
  font-size: 21px;
  line-height: 1.25;
}

.kc-folha__fechar {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--kc-superficie);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.kc-folha__fechar .icone {
  --icone-primaria: var(--kc-accent2-600);
  --icone-secundaria: var(--kc-accent2-600);
}

.mud-dialog .kc-folha__corpo {
  padding: 6px 18px 18px;
  overflow-y: auto;
}

.mud-dialog .kc-folha__rodape {
  padding: 12px 18px calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--kc-divisor);
}

.mud-dialog .kc-folha__rodape:empty {
  display: none;
}

/* Folha sem rodapé de ações (a grade "O que você quer registrar?"): o corpo é o fim da folha, então a última linha precisa subir pela
   barra de navegação do sistema (com rodapé, é ele quem soma a área segura). */
.mud-dialog.kc-folha:has(.kc-folha__rodape:empty) .mud-dialog-content.kc-folha__corpo {
  padding-bottom: calc(18px + var(--safe-bottom));
}

.mud-dialog .kc-folha__rodape > .kc-acoes-formulario {
  width: 100%;
}

.kc-folha__texto {
  font-size: 15.5px;
  line-height: 1.5;
}

/* ---------- grade "O que você quer registrar?" (tela 06) ---------- */

.kc-grade-acoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.kc-grade-acoes__item {
  width: 100%;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 6px 12px;
  border: 0;
  border-radius: 24px;
  background: var(--kc-superficie);
  color: var(--kc-texto);
  cursor: pointer;
}

.kc-grade-acoes__rotulo {
  font-size: 13.5px;
  line-height: 1.2;
  text-align: center;
}

/* ---------- estado vazio e aviso de erro (telas 03 e 65) ---------- */

.kc-vazio {
  padding: 36px 6px 8px;
}

.kc-vazio--centro {
  text-align: center;
  padding-top: 12px;
}

.kc-vazio__icone {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kc-accent-100);
  font-size: 18px;
}

.kc-vazio--centro .kc-vazio__icone {
  margin: 0 auto;
}

.kc-vazio__icone--salvia {
  background: var(--kc-accent2-100);
}

.kc-vazio__selo {
  position: absolute;
  right: -4px;
  bottom: 6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kc-primaria);
  border: 3px solid var(--kc-fundo);
}

.kc-vazio__titulo {
  font-family: var(--kc-fonte-titulo);
  font-size: 34px;
  line-height: 1.12;
  margin: 26px 0 14px;
}

.kc-vazio__texto {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 24px;
}

.kc-vazio__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* ---------- bloqueio (tela 02) ---------- */

.kc-bloqueio {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(var(--safe-top) + 30px) 28px 28px;
  background: var(--kc-fundo);
  color: var(--kc-texto);
}

.kc-bloqueio__icone {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kc-accent-100);
  font-size: 36px;
}

.kc-bloqueio__titulo {
  font-family: var(--kc-fonte-titulo);
  font-size: 34px;
  line-height: 1.12;
  margin: 26px 0 14px;
}

.kc-bloqueio__texto {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.kc-bloqueio__aviso {
  margin-top: 16px;
  color: var(--kc-accent-700);
}

/* ---------- botões: neutro e interruptor ---------- */

.mud-button-root.kc-botao--neutro {
  background: var(--kc-superficie-funda) !important;
  color: var(--kc-texto) !important;
}

.kc-interruptor .mud-switch-span {
  margin-right: 4px;
}

/* ---------- carregando (index.html do app, enquanto o Blazor sobe): igual à splash nativa ---------- */

.kc-carregando {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--kc-accent2-700);
}

/* ---------- campos (invólucros sobre MudBlazor): rótulo em cima, pílula de superfície ---------- */

/* .campo .kc-campo__rotulo: vence o ".campo label" do app.css. */
.kc-campo__rotulo,
.campo .kc-campo__rotulo {
  display: block;
  margin: 0 0 6px 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--kc-texto-suave);
}

.kc-campo .mud-input-control {
  margin: 0;
}

.kc-campo .mud-input.mud-input-outlined {
  min-height: var(--kc-altura-campo);
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-superficie);
  color: var(--kc-texto);
  font-family: var(--kc-fonte);
  font-size: 16px;
}

.kc-campo .mud-input.mud-input-outlined .mud-input-outlined-border {
  border-radius: var(--kc-raio-pilula);
  border-color: rgba(32, 30, 29, 0.14);
}

.kc-campo .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
  border-color: rgba(32, 30, 29, 0.3);
}

.kc-campo .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
  border-color: var(--kc-primaria);
  border-width: 2px;
}

.kc-campo .mud-input-root {
  padding: 13px 18px;
}

.kc-campo .mud-input-root::placeholder {
  color: rgba(32, 30, 29, 0.42);
  opacity: 1;
}

.kc-campo .mud-input-root-adorned-start {
  padding-left: 6px;
}

.kc-campo .mud-input-root-adorned-end {
  padding-right: 6px;
}

.kc-campo .mud-input-adornment-start {
  margin-left: 18px;
}

.kc-campo .mud-input-adornment-end {
  margin-right: 10px;
}

.kc-campo .mud-input-adornment-text {
  color: var(--kc-texto);
  font-size: 15px;
}

.kc-campo .mud-input-adornment .mud-icon-root,
.kc-campo .mud-input-adornment .mud-icon-button,
.kc-campo .mud-input-adornment .mud-icon-button .mud-icon-root {
  color: var(--kc-accent2-600) !important;
}

/* Texto de várias linhas: cantos de 24 px em vez de pílula. */
.kc-campo .mud-input.mud-input-outlined:has(textarea),
.kc-campo .mud-input.mud-input-outlined:has(textarea) .mud-input-outlined-border {
  border-radius: 24px;
}

/* Observação: 90 px de altura vazia, como nas figuras (cresce com o texto). */
.kc-campo .mud-input.mud-input-outlined:has(textarea) {
  min-height: 90px;
  align-items: flex-start;
}

/* Dentro de um cartão o campo fica mais claro (fundo creme). */
.kc-cartao .kc-campo .mud-input.mud-input-outlined,
.kc-cartao .kc-campo-datahora {
  background: var(--kc-fundo);
}

.kc-selo-calculado {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-accent2-100);
  color: var(--kc-accent2-700);
  font-size: 11.5px;
}

/* Data e hora numa pílula só: data à esquerda, hora à direita. */
.kc-campo-datahora {
  display: flex;
  align-items: center;
  min-height: var(--kc-altura-campo);
  border: 1px solid rgba(32, 30, 29, 0.14);
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-superficie);
  padding: 0 4px 0 6px;
}

.kc-campo-datahora .mud-picker {
  min-width: 0;
}

.kc-campo-datahora__data {
  flex: 1.55 1 0;
}

.kc-campo-datahora__hora {
  flex: 1 1 0;
}

.kc-campo-datahora .mud-input-root {
  padding: 12px 8px 12px 12px;
}

.kc-campo-datahora .mud-input-adornment-end {
  margin-right: 4px;
}

/* ---------- segmentado (MudToggleGroup) ---------- */

.mud-toggle-group.kc-segmentado {
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-superficie);
}

.kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  min-height: 44px;
  border: 0 !important;
  border-radius: var(--kc-raio-pilula) !important;
  background: transparent;
  color: var(--kc-texto);
  font-family: var(--kc-fonte);
  font-weight: 600;
  font-size: 15px;
  box-shadow: none;
}

.kc-segmentado .mud-button-root.mud-button.mud-toggle-item-selected {
  background: var(--kc-accent2-700) !important;
  color: var(--kc-fundo) !important;
}

.kc-segmentado .mud-toggle-item-selected .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent2-400);
}

.kc-segmentado__conteudo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
}

/* SimNao: a pergunta em negrito, como título curto. */
.sim-nao__pergunta {
  font-family: var(--kc-fonte);
  font-weight: 650;
  font-size: 15px;
  color: var(--kc-texto);
  margin-bottom: 8px;
}

/* ---------- chips (MudChipSet) ---------- */

.kc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.kc-chips .mud-chip.kc-chip {
  height: 40px;
  margin: 0;
  padding: 0 16px;
  border-radius: var(--kc-raio-pilula) !important;
  background: var(--kc-superficie);
  color: var(--kc-texto);
  font-family: var(--kc-fonte);
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid rgba(32, 30, 29, 0.1);
}

.kc-chips .mud-chip.kc-chip.mud-chip-selected,
.kc-chips .mud-chip.kc-chip[aria-checked="true"] {
  background: var(--kc-accent2-700);
  color: var(--kc-fundo);
  border-color: transparent;
}

.kc-chips .mud-chip.kc-chip.mud-chip-selected .icone,
.kc-chips .mud-chip.kc-chip[aria-checked="true"] .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent2-400);
}

.kc-chips .mud-chip .mud-chip-content {
  gap: 6px;
}

/* ---------- opções com explicação (MudRadioGroup em cartões) ---------- */

.kc-opcoes-radio {
  border: 0;
  margin: 0 0 16px;
  padding: 0;
}

.kc-opcoes-radio__grupo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kc-opcoes-radio__opcao {
  border-radius: 22px;
  background: var(--kc-superficie);
  padding: 6px 12px 6px 4px;
}

.kc-opcoes-radio__opcao--marcada {
  background: var(--kc-accent-100);
}

.kc-opcoes-radio__opcao .mud-radio {
  align-items: flex-start;
  width: 100%;
}

.kc-opcoes-radio__texto {
  display: flex;
  flex-direction: column;
  padding: 8px 0 6px;
  font-size: 15px;
}

.kc-opcoes-radio__texto small {
  font-size: 13.5px;
  line-height: 1.4;
  margin-top: 2px;
}

/* ---------- listas suspensas (popover do MudSelect/MudAutocomplete) ---------- */

.mud-popover.kc-lista-popover {
  border-radius: 22px;
  background: #f8eedf;
  box-shadow: var(--kc-sombra-flutuante);
  overflow: hidden;
}

.kc-lista-popover .mud-list-item {
  padding: 10px 16px;
  font-family: var(--kc-fonte);
  font-size: 15.5px;
}

.kc-lista-popover .mud-selected-item,
.kc-lista-popover .mud-list-item.mud-selected-item {
  background: var(--kc-accent2-100);
  color: var(--kc-accent2-800);
}

.lista-opcao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lista-opcao small {
  margin-left: 4px;
}

/* ---------- âncoras com cara de botão (class="e-btn e-primary botao-ancora"), sem depender do Syncfusion ---------- */

/* ---------- rótulos antigos (campo__rotulo) no mesmo padrão dos invólucros ---------- */

.campo__rotulo {
  display: block;
  margin: 0 0 6px 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--kc-texto-suave);
  text-transform: none;
  letter-spacing: 0;
}

.campo__dica {
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 1.45;
}

.campo__aviso {
  color: var(--kc-accent-700);
  font-size: 13px;
}

/* ---------- formulário: atalhos, valores com total em destaque, fotos ---------- */

.kc-atalhos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 18px;
}

.kc-cartao.kc-valores {
  margin: 4px 0 18px;
  padding: 16px 16px 14px;
}

.kc-valores .campo-linha {
  gap: 10px;
}

.kc-campo--total {
  margin-bottom: 0;
}

.kc-campo--total .mud-input.mud-input-outlined,
.kc-cartao .kc-campo--total .mud-input.mud-input-outlined {
  background: transparent;
  min-height: 0;
}

.kc-campo--total .mud-input.mud-input-outlined .mud-input-outlined-border {
  border-color: transparent;
}

.kc-campo--total .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
  border-color: var(--kc-primaria);
}

/* O input herda a fonte do contêiner (o MudBlazor põe font: inherit no input com seletor mais forte). */
.kc-campo--total .mud-input.mud-input-outlined {
  font-family: var(--kc-fonte-titulo);
  font-size: 30px;
  line-height: 1.2;
}

.kc-campo--total .mud-input-root {
  padding: 2px 4px 4px 2px;
}

.kc-campo--total .mud-input-adornment-start {
  margin-left: 4px;
}

.kc-campo--total .mud-input-adornment-text {
  font-family: var(--kc-fonte-titulo);
  font-size: 30px;
  color: var(--kc-texto);
}

.kc-botao-icone.mud-button-root.mud-button {
  flex: 0 0 52px !important;
  width: 52px;
  min-width: 52px;
  padding: 0;
}

/* Posto escolhido: pílula com o avatar, o nome, o endereço e "Trocar". */
.kc-posto-escolhido {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 8px;
  border-radius: 30px;
  background: var(--kc-superficie);
}

.kc-posto-escolhido__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kc-posto-escolhido__texto strong,
.kc-posto-escolhido__texto small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc-posto-escolhido__texto strong {
  font-size: 15px;
}

.kc-posto-escolhido__texto small {
  font-size: 12.5px;
}

/* Fotos: o "Adicionar foto" é um quadrado tracejado sálvia (112 px, cantos de 28). */
.anexos__adicionar {
  width: 112px !important;
  height: 112px !important;
  border: 2px dashed var(--kc-accent2-400) !important;
  border-radius: 28px !important;
  background: var(--kc-accent2-100) !important;
  color: var(--kc-texto) !important;
  font-size: 14px;
}

.anexos__item {
  width: 112px !important;
  height: 112px !important;
  border-radius: 28px !important;
}

/* ==========================================================================
   R3 · lote A: telas 03, 04, 09 a 14 e 51 (e o cartão de lembrete da 16)
   ========================================================================== */

/* ---------- padrões (lote A): folha, destaque, botão claro, chips, cabeçalho de seção, fotos, consentimento ---------- */

/* O Gutters="false" do MudDialog põe "mud-dialog-no-side-padding" (padding 12px 0, seletor mais forte que o da folha). */
.mud-dialog.kc-folha .mud-dialog-content.kc-folha__corpo {
  padding: 6px 18px 18px;
}

/* Botão Pequeno e Grande: o MudBlazor usa mud-button-{variante}-size-small/-large; as regras ".mud-button-size-small"
   e ".mud-button-size-large" lá de cima nunca pegavam (todo botão saía com 44 px e 15 px). */
.mud-button-root.mud-button.mud-button-filled-size-small,
.mud-button-root.mud-button.mud-button-outlined-size-small,
.mud-button-root.mud-button.mud-button-text-size-small {
  min-height: 36px;
  padding: 6px 16px;
  font-size: 14px;
}

.mud-button-root.mud-button.mud-button-filled-size-large,
.mud-button-root.mud-button.mud-button-outlined-size-large,
.mud-button-root.mud-button.mud-button-text-size-large {
  min-height: 52px;
  font-size: 16px;
}

/* Campos de todos os formulários: nas figuras o rótulo tem 12 px e fica a 6 px do campo; dentro de cartão o campo tem 44 px. */
.kc-campo__rotulo,
.campo .kc-campo__rotulo {
  font-size: 12px;
  margin-bottom: 0;
}

.kc-campo:not(.kc-campo--total) {
  margin-bottom: 16px;
}

.kc-cartao .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined {
  min-height: 44px;
}

/* A Observação (várias linhas) continua com 90 px também dentro de cartão. */
.kc-cartao .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined:has(textarea) {
  min-height: 90px;
}

/* Texto mais longo que o campo termina em "…" (como nas figuras), em vez de cortado. */
.kc-campo .mud-input > input.mud-input-root {
  text-overflow: ellipsis;
}

/* Prefixo ("R$"): o MudBlazor já dá 14 px à esquerda do campo com prefixo; com a margem de 18 px o "R$" ficava a 32 px. */
.kc-campo:not(.kc-campo--total) .mud-input-adornment.mud-input-adornment-start {
  margin-left: 0;
  margin-right: 5px;
}

/* Total em destaque (abastecimento, despesa): o MudBlazor põe 14 px à esquerda do campo com prefixo e 10,5 px em cima e
   embaixo do input denso, com seletores mais fortes que os do kc-campo--total; aqui o "R$" encosta no rótulo. */
.kc-campo--total .mud-input.mud-input-outlined.mud-input-adorned-start {
  padding-left: 0;
  padding-inline-start: 0;
}

.kc-campo--total .mud-input > input.mud-input-root.mud-input-root-outlined {
  padding: 0 4px 0 0;
  padding-inline-start: 0;
  padding-inline-end: 4px;
  line-height: 1.15;
}

.kc-campo--total .mud-input-adornment.mud-input-adornment-start {
  margin: 0 8px 0 0;
}

.kc-campo--total .mud-input-adornment-text {
  line-height: 1.15;
}

/* Título da tela: nas figuras ele começa 32 px abaixo do cabeçalho (aqui ficava 27). Na linha com botão (cabecalho-pagina)
   quem desce é a linha, para o título continuar centrado com o botão. */
.titulo-pagina {
  margin-top: 7px;
}

.cabecalho-pagina {
  margin-top: 5px;
}

.cabecalho-pagina .titulo-pagina {
  margin-top: 0;
}

/* Cartão de destaque terracota: o círculo e as pílulas como nas figuras 04, 15 e 43. */
.kc-hero:not(.kc-hero--salvia)::after {
  top: -60px;
  background: #e08b54;
  opacity: 1;
}

.kc-hero:not(.kc-hero--salvia) .kc-pilula {
  background: var(--kc-accent-700);
}

/* Botão claro sobre um cartão de destaque: creme com o texto terracota escuro. */
.mud-button-root.mud-button.kc-botao--claro {
  background: var(--kc-fundo) !important;
  color: var(--kc-accent-800) !important;
}

.mud-button-root.mud-button.kc-botao--claro .icone {
  --icone-primaria: var(--kc-accent-600);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

/* Chips: sem fundo, com a borda fina do divisor e texto de 14 px (figuras 11, 12 e 51); o escolhido continua sálvia escuro. */
.kc-chips .mud-chip.kc-chip {
  background: transparent;
  border-color: var(--kc-divisor);
  font-size: 14px;
}

/* O ícone do chip na cor do texto com o segundo tom em sálvia (o escolhido continua claro). */
.kc-chips .mud-chip.kc-chip .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

/* Cabeçalho de seção: rótulo em maiúsculas à esquerda, link (Ver todos, Histórico completo) à direita. */
.kc-cabecalho-secao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

/* Nas figuras o rótulo de seção tem 11 px e o link 13 px (o kc-rotulo-secao e o kc-link globais são maiores). */
.kc-cabecalho-secao .kc-rotulo-secao {
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
}

.kc-cabecalho-secao .kc-link {
  flex: none;
  font-size: 13px;
}

.kc-lista-cartoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kc-lista-cartoes > .kc-cartao + .kc-cartao {
  margin-top: 0;
}

/* "Adicionar foto" (ListaAnexos): ícone e texto em sálvia escura, como nas figuras 07 a 12. */
.anexos__adicionar {
  color: var(--kc-accent2-800) !important;
}

.anexos__adicionar .icone {
  --icone-primaria: var(--kc-accent2-800);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
  font-size: 22px;
}

/* Estado vazio (03, 65): ícone de ~45 px no círculo, texto em até 300 px e o botão grande mais largo, como nas figuras. */
.kc-vazio__icone {
  font-size: 15px;
}

.kc-vazio__titulo {
  margin-top: 18px;
}

.kc-vazio__texto {
  max-width: 300px;
  margin-bottom: 20px;
  color: #474238;
}

.kc-vazio .mud-button-root.mud-button.mud-button-filled-size-large {
  padding-left: 26px;
  padding-right: 26px;
}

/* Consentimento (foto do recibo, ganhos por foto): ícone e rótulo, o texto e a nota em terracota clara. */
.kc-cartao.kc-consentimento {
  padding: 20px 20px 20px;
}

.kc-consentimento__cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.kc-consentimento__cabeca .kc-rotulo-secao {
  margin: 0;
  font-size: 11px;
}

.kc-avatar.kc-consentimento__icone {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

.kc-consentimento > p {
  margin: 0 0 13px;
  font-size: 15px;
  line-height: 1.55;
}

.kc-consentimento > p.kc-consentimento__nota {
  margin: 18px 0 18px;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--kc-accent-100);
  color: #402310;
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- telas 03 e 04: início (primeiro uso e visão geral do veículo) ---------- */

.kc-vazio__selo.kc-sobre-terracota .icone {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-inicio-vazio .kc-vazio {
  padding-top: 26px;
}

.kc-hero.kc-inicio-mes {
  margin-top: 2px;
  padding: 24px 22px 19px;
}

.kc-inicio-mes::after {
  width: 178px;
  height: 178px;
}

.kc-inicio-mes__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: inherit;
  text-decoration: none;
}

.kc-inicio-mes .kc-hero__rotulo {
  font-size: 11px;
}

.kc-inicio-mes .kc-hero__valor {
  font-size: 42px;
  line-height: 1.1;
  margin: 13px 0 -2px;
}

.kc-inicio-mes__legenda {
  font-size: 13.5px;
}

.kc-inicio-mes .kc-pilulas {
  margin-top: 12px;
}

.kc-inicio-mes .kc-pilula {
  padding: 9px 14px;
  font-size: 12.5px;
}

.kc-inicio-mes__odometro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 13px;
}

.kc-inicio-mes__hoje {
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
}

.kc-inicio-mes__hoje strong {
  font-weight: 700;
}

.kc-inicio-mes__hoje small {
  display: block;
  color: inherit;
  opacity: 0.85;
  font-size: 12.5px;
  line-height: 1.35;
}

.mud-button-root.mud-button.kc-inicio-mes__atualizar {
  flex: 0 1 auto;
  max-width: 62%;
  min-height: 40px;
  padding: 4px 20px;
  font-size: 13px;
  white-space: normal;
  line-height: 1.1;
  text-align: center;
}

.kc-atencao.kc-inicio-aviso {
  margin-top: 16px;
  padding: 16px;
  gap: 12px;
}

.kc-inicio-aviso__corpo {
  flex: 1;
  min-width: 0;
}

.kc-inicio-aviso__corpo p,
.kc-inicio-sem-lembretes p,
.kc-inicio-sem-lancamentos p {
  margin: 2px 0 10px;
  font-size: 14.5px;
  line-height: 1.45;
}

.kc-inicio-aviso__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
}

.kc-inicio-aviso__acoes > .mud-button-root.mud-button.mud-button-text {
  padding-left: 10px;
  padding-right: 10px;
}

/* Iniciar uma viagem: pílula sálvia clara com o círculo de play. */
.kc-inicio-viagem {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 84px;
  margin-top: 22px;
  padding: 14px 18px 14px 17px;
  border-radius: 44px;
  background: var(--kc-accent2-200);
  color: #272e1b;
  text-decoration: none;
}

.kc-inicio-viagem__circulo {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kc-accent2-700);
  font-size: 16px;
}

.kc-inicio-viagem__circulo .icone {
  --icone-primaria: var(--kc-accent2-400);
  --icone-secundaria: var(--kc-accent2-400);
  --icone-secundaria-opacidade: 1;
  margin-left: 2px;
}

.kc-inicio-viagem__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kc-inicio-viagem__texto strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.kc-inicio-viagem__texto span {
  font-size: 13px;
  line-height: 1.35;
}

.icone.kc-inicio-viagem__seta {
  flex: none;
  font-size: 16px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
}

/* Gravando: a mesma pílula em terracota clara, com o ponto pulsando. */
.kc-inicio-viagem--gravando {
  background: var(--kc-accent-200);
  color: var(--kc-accent-800);
}

.kc-inicio-viagem--gravando .kc-inicio-viagem__circulo {
  background: var(--kc-primaria);
}

.kc-inicio-viagem__ponto {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--kc-fundo);
  animation: kc-pulso 1.4s ease-in-out infinite;
}

.kc-inicio-viagem--gravando .icone.kc-inicio-viagem__seta {
  --icone-primaria: var(--kc-accent-600);
  --icone-secundaria: var(--kc-accent-600);
}

@keyframes kc-pulso {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

.kc-inicio-secao {
  margin-top: 21px;
}

.kc-cartao.kc-inicio-sem-lancamentos {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* ---------- cartão de lembrete (telas 04 e 16): ícone na cor da situação, título com o selo, ações embaixo ---------- */

.kc-cartao.kc-lembrete {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px 16px 16px;
}

.kc-lembrete > .kc-lembrete__avatar {
  margin-top: 1px;
}

/* O espaço entre os cartões vem da lista (gap), não da margem do kc-cartao + kc-cartao. */
.kc-cartao.kc-lembrete + .kc-cartao.kc-lembrete {
  margin-top: 0;
}

.kc-avatar.kc-lembrete__avatar {
  font-size: 19px;
}

.kc-lembrete__corpo {
  flex: 1;
  min-width: 0;
}

.kc-lembrete__cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.kc-lembrete__titulo {
  min-width: 0;
  padding-top: 1px;
  font-size: 14.7px;
  font-weight: 600;
  line-height: 19px;
}

.kc-lembrete__cabeca .kc-status {
  flex: none;
  padding: 4px 9px;
  font-size: 11.5px;
}

.kc-lembrete__resumo {
  margin: 6px 0 0;
  color: var(--kc-texto-suave);
  font-size: 12.8px;
  line-height: 17px;
}

.kc-lembrete__detalhe {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--kc-fundo);
  color: var(--kc-texto);
  font-size: 13px;
  line-height: 1.4;
}

.kc-lembrete__acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
}

.kc-lembrete__acoes > .mud-button-root.mud-button {
  font-size: 13px;
}

.kc-lembrete__acoes > .mud-button-root.mud-button.kc-lembrete__registrar {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 37px;
  padding: 4px 17px;
  white-space: normal;
  line-height: 1.1;
  text-align: center;
}

.kc-lembrete__acoes > .mud-button-root.mud-button.kc-lembrete__editar {
  flex: none;
  padding-left: 8px;
  padding-right: 8px;
}

.kc-lembrete--vencido .kc-lembrete__avatar {
  background: var(--kc-primaria);
}

.kc-lembrete--vencido .kc-lembrete__avatar .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-lembrete--urgente .kc-lembrete__avatar,
.kc-lembrete--embreve .kc-lembrete__avatar {
  background: var(--kc-accent-200);
}

.kc-lembrete--urgente .kc-lembrete__avatar .icone,
.kc-lembrete--embreve .kc-lembrete__avatar .icone {
  --icone-primaria: var(--kc-accent-800);
}

.kc-lembrete--ok .kc-lembrete__avatar {
  background: var(--kc-accent2-200);
}

.kc-lembrete--ok .kc-lembrete__avatar .icone {
  --icone-primaria: var(--kc-accent2-800);
}

.kc-lembrete--inativo .kc-lembrete__avatar {
  background: var(--kc-superficie-funda);
}

.kc-lembrete--inativo .kc-lembrete__avatar .icone {
  --icone-primaria: var(--kc-texto-suave);
  --icone-secundaria: var(--kc-texto-suave);
  --icone-secundaria-opacidade: 0.45;
}

.kc-lembrete--inativo .kc-lembrete__titulo,
.kc-lembrete--inativo .kc-lembrete__resumo {
  opacity: 0.75;
}

/* Urgente (falta pouco): entre o "Em breve" e o "Vencido". */
.kc-status--urgente {
  background: var(--kc-accent-300);
  color: var(--kc-accent-800);
}

/* ---------- linha do tempo (telas 04 e 51): agrupada por dia, ícone num círculo, valor e km à direita ---------- */

.kc-linha-tempo {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kc-linha-tempo__dia {
  margin: 18px 4px 9px;
  color: #645c50;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 16px;
  text-transform: uppercase;
}

.kc-linha-tempo__dia:first-child {
  margin-top: 15px;
}

.kc-linha-tempo__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 4px;
  border-radius: 22px;
  color: var(--kc-texto);
  text-decoration: none;
}

.kc-linha-tempo__item:hover {
  background: rgba(235, 221, 197, 0.55);
}

.kc-avatar.kc-linha-tempo__avatar {
  width: 40px;
  height: 40px;
  font-size: 17px;
}

.kc-linha-tempo__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kc-linha-tempo__texto strong,
.kc-linha-tempo__valor strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.kc-linha-tempo__texto strong,
.kc-linha-tempo__texto small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kc-linha-tempo__texto small {
  color: var(--kc-texto-suave);
  font-size: 12.7px;
  line-height: 1.35;
}

.kc-linha-tempo__valor {
  flex: none;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.kc-linha-tempo__valor small {
  color: var(--kc-texto-suave);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

/* ---------- telas 09 e 10: serviço (itens, oficina e totais) ---------- */

.kc-servico__cadastrar-oficina {
  margin: -8px 0 12px -2px;
}

.kc-servico__cadastrar-oficina .mud-button-root.mud-button {
  padding-left: 6px;
  padding-right: 10px;
  font-size: 13px;
}

.kc-servico__cadastrar-oficina .icone,
.kc-servico__adicionar-item .icone {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-rotulo-secao.kc-servico__rotulo-itens {
  margin: 18px 2px 18px;
  font-size: 11px;
}

.kc-itens-servico {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kc-cartao.kc-item-servico {
  margin: 0;
  padding: 18px 16px 16px 17px;
}

.kc-item-servico__topo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 30px;
  margin: 0 0 14px;
}

.kc-item-servico__numero {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kc-accent2-700);
  color: var(--kc-fundo);
  font-size: 13.5px;
  font-weight: 700;
}

.kc-item-servico__topo strong {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
}

.kc-item-servico__remover {
  flex: none;
  width: 32px;
  height: 32px;
  margin-right: -4px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
}

.kc-item-servico__remover .icone {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-item-servico .campo-linha.kc-item-servico__linha {
  gap: 10px;
}

.kc-cartao.kc-item-servico .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined {
  min-height: 46px;
}

.kc-item-servico__subtotal {
  margin-top: -3px;
  line-height: 1.45;
}

.kc-item-servico__subtotal strong {
  color: var(--kc-texto);
  font-weight: 700;
}

.kc-servico__adicionar-item {
  margin: 0 0 16px;
}

.kc-servico__adicionar-item .mud-button-root.mud-button {
  min-height: 42px;
  padding: 6px 20px;
  font-size: 14px;
}

/* Totais: cartão sálvia escuro com o total grande em Caprasimo. */
.kc-totais {
  margin: 2px 0 18px;
  padding: 19px 20px 18px;
  border-radius: var(--kc-raio-cartao);
  background: var(--kc-accent2-800);
  color: var(--kc-accent2-100);
}

.kc-totais__linha,
.kc-totais__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.kc-totais__linha {
  font-size: 14px;
  line-height: 1.5;
}

.kc-totais__linha + .kc-totais__linha {
  margin-top: 6px;
}

.kc-totais__linha strong {
  font-weight: 600;
}

.kc-totais__total {
  align-items: center;
  margin-top: 19px;
}

.kc-totais__total span {
  font-size: 15.5px;
  font-weight: 700;
}

.kc-totais__total strong {
  color: var(--kc-fundo);
  font-family: var(--kc-fonte-titulo);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

/* ---------- telas 11 e 12: despesa (valor em destaque) ---------- */

.kc-cartao.kc-valores.kc-despesa__valor {
  margin: 0 0 16px;
  padding: 18px 16px 17px;
}

.kc-dica.kc-despesa__parcela {
  align-items: center;
  margin: 0 0 14px;
}

/* ---------- tela 13: foto do recibo (escolher, conferir a foto e o que a leitura achou) ---------- */

.kc-cartao.kc-captura {
  padding: 18px;
}

.kc-captura__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.kc-captura__acoes > .mud-button-root.mud-button {
  flex: 1 1 140px;
  min-height: 48px;
}

.kc-captura__arquivo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  padding: 18px;
  overflow: hidden;
  border: 2px dashed var(--kc-accent2-400);
  border-radius: var(--kc-raio-cartao);
  background: var(--kc-accent2-100);
  color: var(--kc-accent2-800);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.kc-captura__entrada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.kc-captura__icone .icone {
  --icone-primaria: var(--kc-accent2-800);
  --icone-secundaria: var(--kc-accent2-500);
}

.campo__dica.kc-captura__dica {
  margin: 12px 2px 0;
}

.kc-recibo__previa {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 20px;
  background: var(--kc-fundo);
}

.kc-recibo__acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.kc-recibo__acoes > .mud-button-root.mud-button {
  flex: 1 1 0;
  min-height: 48px;
}

.kc-recibo__acoes > .mud-button-root.mud-button.kc-acao-principal {
  flex-grow: 1.4;
}

.kc-recibo__dados {
  margin: 14px 0 0;
  padding: 2px 14px;
  border-radius: 20px;
  background: var(--kc-fundo);
}

.kc-recibo__dados > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--kc-divisor);
}

.kc-recibo__dados > div:last-child {
  border-bottom: 0;
}

.kc-recibo__dados dt {
  color: var(--kc-texto-suave);
}

.kc-recibo__dados dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.kc-recibo__avisos,
.kc-aviso-rascunho__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.45;
}

.kc-recibo__avisos li,
.kc-aviso-rascunho__lista li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.kc-recibo__avisos .icone,
.kc-aviso-rascunho__lista .icone {
  margin-top: 2px;
}

.kc-recibo__proximo {
  margin: 14px 0 0;
  color: var(--kc-texto-suave);
  font-size: 14px;
  line-height: 1.45;
}

/* Lançamento aberto a partir do recibo: a faixa sálvia no alto do formulário. */
.kc-dica.kc-aviso-rascunho {
  margin: 0 0 18px;
}

.kc-avatar.kc-aviso-rascunho__icone {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

.kc-aviso-rascunho__corpo {
  flex: 1;
  min-width: 0;
}

.kc-aviso-rascunho__corpo p {
  margin: 0;
  line-height: 1.45;
}

.kc-aviso-rascunho__lista {
  margin-top: 8px;
}

/* ---------- tela 14: atualizar o odômetro (folha) ---------- */

.mud-dialog.kc-folha--odometro .mud-dialog-content.kc-folha__corpo {
  padding-bottom: 0;
}

.mud-dialog.kc-folha--odometro .kc-folha__rodape {
  border-top: 0;
  padding-top: 0;
}

.mud-dialog.kc-folha--odometro .kc-folha__icone {
  width: 44px;
  height: 44px;
  font-size: 19px;
}

.mud-dialog.kc-folha--odometro .kc-folha__titulo {
  line-height: 35px;
}

.kc-folha__texto.kc-odometro__texto {
  margin: 0 0 16px;
  color: #474238;
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- tela 51: histórico ---------- */

.kc-historico__filtros {
  margin-top: -4px;
  margin-bottom: 19px;
}

.kc-historico__mais {
  display: flex;
  justify-content: center;
  margin: 18px 0 6px;
}

.kc-historico__mais .mud-button-root.mud-button {
  min-height: 42px;
  padding: 6px 20px;
  font-size: 14px;
}

.kc-historico__mais .icone {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
}

/* ==========================================================================
   R3 · lote B: telas 15 a 19 (os gráficos em si estão no graficos.css)
   ========================================================================== */

/* ---------- padrões (lote B): texto sem o espaçamento do MudBlazor, campo de data ---------- */

/* O MudBlazor põe no body um letter-spacing (0,01071em, ~0,17 px) que as figuras não têm: com ele as frases quebram
   antes do que nas figuras. Zerado nos blocos de texto das telas 15 a 19 (o resto do app fica como está). */
.kc-relatorio__total,
.kc-relatorio__partes,
.kc-relatorio__depreciacao,
.kc-relatorio__nota,
.kc-relatorio__preco,
.kc-relatorio__grafico,
.kc-lembretes__odometro,
.kc-lembretes__lista .kc-lembrete,
.kc-lembretes__sugestoes,
.kc-lembrete-topo,
.kc-lembrete-form__previa,
.kc-lembrete-form__aviso,
.kc-lembrete-form__tipos .campo__dica,
.kc-mais__lista,
.kc-mais__versao {
  letter-spacing: 0;
}

/* Rótulos de seção (GASTO POR MÊS, PACOTE DO MOTORISTA, VEÍCULOS…): nas figuras 15 a 19 o traço é mais forte (700). */
.kc-relatorio__secao > .kc-rotulo-secao,
.kc-lembretes__sugestoes > .kc-rotulo-secao,
.kc-rotulo-secao.kc-lembrete-form__secao,
.kc-mais__secao > .kc-rotulo-secao {
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Opções com explicação (OpcoesRadio): o espaço de 10 px entre os cartões ficava no contêiner errado (o MudRadioGroup põe
   as opções num div interno), e os cartões encostavam um no outro. */
.kc-opcoes-radio .mud-radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Data (CampoData): o calendário e o "limpar" menores e sem o respiro de 12 px do MudIconButton, para a data inteira caber
   no campo de meia largura (figuras 17 e 18; antes ficava "02/09/2…"). */
.kc-campo--data .mud-input-adornment-end .mud-icon-button,
.kc-campo--data .mud-input-clear-button {
  margin-right: -2px;
  padding: 4px;
}

.kc-campo--data .mud-icon-button .mud-icon-root {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.kc-campo .kc-campo--data .mud-input-adornment-end {
  margin-right: 0;
  margin-left: 2px;
}

.kc-campo .kc-campo--data input.mud-input-root {
  padding-left: 12px;
}

.kc-campo--data .mud-input-clear-button {
  margin-right: 0;
  padding: 1px;
}

.kc-campo--data .mud-input-clear-button .mud-icon-root {
  width: 15px;
  height: 15px;
  font-size: 15px;
}

/* ---------- tela 15: relatórios ---------- */

/* Períodos: cada opção do tamanho do texto, sem quebrar a linha, e a sobra repartida (o MudToggleGroup é uma grade de
   colunas iguais, onde "Este mês" quebrava em duas linhas). */
.campo.kc-relatorio__periodos {
  margin-bottom: 16px;
}

.kc-relatorio__periodos .mud-toggle-group.kc-segmentado {
  display: flex;
  min-height: 50px;
}

.kc-relatorio__periodos .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  margin-left: 0;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
}

.kc-relatorio__periodos .kc-segmentado__conteudo {
  white-space: nowrap;
}

.kc-hero.kc-relatorio__total {
  display: block;
  padding: 22px 20px 22px;
}

.kc-relatorio__rotulo {
  display: block;
  color: var(--kc-accent-100);
  font-size: 12.5px;
  line-height: 18px;
}

.kc-relatorio__total .kc-hero__valor {
  display: block;
  margin: 3px 0 0;
  color: var(--kc-fundo);
  font-size: 40px;
  line-height: 42px;
}

.kc-relatorio__total .kc-pilulas {
  gap: 10px 6px;
  margin-top: 14px;
}

.kc-relatorio__total .kc-pilula {
  padding: 7px 14px;
  font-size: 12.5px;
  line-height: 15px;
}

.kc-cartao.kc-relatorio__partes {
  margin-top: 16px;
  padding: 15px 18px 16px;
}

.kc-relatorio__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9.7px;
}

.kc-relatorio__lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 22px;
}

.kc-relatorio__lista .kc-grafico__marca {
  width: 12px;
  height: 12px;
}

.kc-relatorio__nome {
  flex: 1;
  min-width: 0;
}

.kc-relatorio__lista strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kc-relatorio__barra {
  display: flex;
  height: 12px;
  margin-top: 13px;
  border-radius: var(--kc-raio-pilula);
  overflow: hidden;
}

.kc-relatorio__barra > span {
  display: block;
  flex-basis: 0;
  min-width: 2px;
}

.kc-relatorio__nota {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 19px;
}

.kc-dica.kc-relatorio__depreciacao {
  margin-top: 16px;
  padding: 17px 18px 19px;
  border-radius: var(--kc-raio-cartao);
  color: #272e1b;
}

.kc-relatorio__depreciacao p {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
}

.kc-relatorio__depreciacao p:first-child {
  margin-bottom: 7px;
  font-size: 15px;
  line-height: 23px;
}

.kc-relatorio__depreciacao strong {
  font-weight: 700;
}

.kc-relatorio__secao {
  margin-top: 17px;
}

.kc-relatorio__secao > .kc-rotulo-secao {
  margin: 0 0 19px;
  font-size: 11px;
  line-height: 14px;
}

.kc-cartao.kc-relatorio__grafico--colunas {
  padding: 5px 9px 21px;
}

.kc-cartao.kc-relatorio__grafico--rosca {
  padding: 25px 18px 25px 25px;
}

/* As linhas de grade vão até 14 px da borda direita: o gráfico avança sobre a margem direita do Radzen (GraficoLinhas). */
.kc-cartao.kc-relatorio__grafico--linhas {
  padding: 29px 0 10px 7px;
  overflow: hidden;
}

.kc-relatorio__secao > .kc-relatorio__nota {
  margin-top: 16px;
}

.kc-relatorio__precos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kc-relatorio__preco {
  display: flex;
  flex-direction: column;
  padding: 17px 16px 18px;
  border-radius: var(--kc-raio-cartao);
  background: var(--kc-superficie);
}

.kc-relatorio__preco > strong {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 20px;
}

.kc-relatorio__preco-valor {
  margin: 4px 0 3px;
  color: var(--kc-texto);
  font-family: var(--kc-fonte-titulo);
  font-size: 25px;
  line-height: 32px;
}

.kc-relatorio__preco small {
  color: #474238;
  font-size: 12px;
  line-height: 19px;
}

.kc-relatorio__preco--terracota {
  background: var(--kc-accent-100);
}

.kc-relatorio__preco--terracota .kc-relatorio__preco-valor {
  color: var(--kc-accent-800);
}

.kc-relatorio__preco--salvia {
  background: var(--kc-accent2-100);
}

.kc-relatorio__preco--salvia .kc-relatorio__preco-valor {
  color: var(--kc-accent2-800);
}

/* ---------- tela 16: lembretes ---------- */

.cabecalho-pagina.kc-lembretes__cabecalho {
  margin-bottom: 15px;
}

.mud-button-root.mud-button.kc-lembretes__novo {
  min-height: 42px;
  padding: 6px 21px 6px 19px;
  font-size: 15px;
}

.kc-lembretes__novo .icone {
  font-size: 13px;
}

.kc-dica.kc-lembretes__odometro {
  align-items: center;
  gap: 10px;
  margin: 0 0 15px;
  padding: 11px 16px 11px 17px;
  border-radius: 30px;
  color: #272e1b;
}

.kc-lembretes__odometro p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.kc-lembretes__odometro strong {
  font-weight: 700;
}

.icone.kc-lembretes__odometro-icone {
  flex: none;
  font-size: 15px;
  --icone-primaria: var(--kc-accent2-800);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-lembretes__atualizar {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.campo.kc-lembretes__filtros {
  margin-bottom: 14px;
}

/* Os filtros quebram em três linhas no celular, com 6 px entre elas (figura 16). */
.kc-lembretes__filtros .kc-chips {
  gap: 6px;
}

/* Nas figuras 16 a 18 o texto dos chips é negrito (700). */
.kc-lembretes__filtros .kc-chips .mud-chip.kc-chip,
.kc-lembrete-form__tipos .kc-chips .mud-chip.kc-chip {
  font-weight: 700;
}

.kc-lembretes__filtros .kc-chips .mud-chip.kc-chip {
  padding: 0 15px;
}

.kc-lista-cartoes.kc-lembretes__lista {
  gap: 14px;
}

.kc-lembretes__sugestoes {
  margin-top: 26px;
}

.kc-lembretes__sugestoes > .kc-rotulo-secao {
  margin: 0 0 16px;
  font-size: 11px;
  line-height: 14px;
}

.kc-lembretes__texto {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 20.5px;
}

.mud-button-root.mud-button.kc-lembretes__criar {
  min-height: 44px;
  margin-bottom: 15px;
  padding: 6px 20px 6px 18px;
  font-size: 14px;
}

.kc-lembretes__criar .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-cartao.kc-lembretes__modelos {
  list-style: none;
  margin: 0;
  padding: 5.5px 16px 6px;
}

.kc-lembretes__modelo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11.5px 0;
  border-bottom: 1px solid var(--kc-divisor);
  color: var(--kc-texto);
  text-decoration: none;
}

.kc-avatar.kc-lembretes__modelo-avatar {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.kc-lembretes__modelo-avatar .icone {
  --icone-primaria: var(--kc-accent2-700);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-lembretes__modelo-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kc-lembretes__modelo-texto strong {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 20px;
}

.kc-lembretes__modelo-texto small {
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18px;
}

.kc-lembretes__nota {
  margin: 15px 0 0;
  color: var(--kc-texto-suave);
  font-size: 12.5px;
  line-height: 18.5px;
}

/* ---------- telas 17 e 18: criar e editar lembrete ---------- */

/* Situação do lembrete (18): cartão claro na cor da situação, o ícone num círculo e as ações embaixo. */
.kc-lembrete-topo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 30px;
  background: var(--kc-accent2-100);
}

.kc-avatar.kc-lembrete-topo__avatar {
  background: var(--kc-accent2-700);
}

.kc-lembrete-topo__avatar .icone {
  --icone-primaria: var(--kc-accent2-100);
  --icone-secundaria: var(--kc-accent2-400);
  --icone-secundaria-opacidade: 1;
}

.kc-lembrete-topo__corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kc-lembrete-topo__titulo {
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.kc-lembrete-topo__texto {
  color: #474238;
  font-size: 13px;
  line-height: 17.5px;
}

.kc-lembrete-topo__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.mud-button-root.mud-button.kc-lembrete-topo__feito {
  min-height: 38px;
  padding: 4px 22px 4px 18px;
  font-size: 13px;
}

.mud-button-root.mud-button.kc-lembrete-topo__pausar {
  padding-left: 8px;
  padding-right: 8px;
  color: var(--kc-accent2-800) !important;
  font-size: 13px;
}

.kc-lembrete-topo__pausar .icone {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-lembrete-topo--vencido,
.kc-lembrete-topo--urgente,
.kc-lembrete-topo--embreve {
  background: var(--kc-accent-100);
}

.kc-lembrete-topo--vencido .kc-lembrete-topo__avatar,
.kc-lembrete-topo--urgente .kc-lembrete-topo__avatar,
.kc-lembrete-topo--embreve .kc-lembrete-topo__avatar {
  background: var(--kc-primaria);
}

.kc-lembrete-topo--vencido .kc-lembrete-topo__avatar .icone,
.kc-lembrete-topo--urgente .kc-lembrete-topo__avatar .icone,
.kc-lembrete-topo--embreve .kc-lembrete-topo__avatar .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent-200);
}

.kc-lembrete-topo--vencido .mud-button-root.mud-button.kc-lembrete-topo__pausar,
.kc-lembrete-topo--urgente .mud-button-root.mud-button.kc-lembrete-topo__pausar,
.kc-lembrete-topo--embreve .mud-button-root.mud-button.kc-lembrete-topo__pausar {
  color: var(--kc-accent-800) !important;
}

.kc-lembrete-topo--inativo {
  background: var(--kc-superficie);
}

.kc-lembrete-topo--inativo .kc-lembrete-topo__avatar {
  background: var(--kc-superficie-funda);
}

.kc-lembrete-topo--inativo .kc-lembrete-topo__avatar .icone {
  --icone-primaria: var(--kc-texto-suave);
  --icone-secundaria: var(--kc-texto-suave);
  --icone-secundaria-opacidade: 0.45;
}

/* "O que conclui o lembrete": os cinco chips em duas linhas, como na figura (com 16 px de cada lado o "Outro" caía numa
   terceira linha). */
.kc-lembrete-form__tipos .kc-chips .mud-chip.kc-chip {
  padding: 0 14px;
}

/* "Vence": texto de 14 px e menos respiro, para "Por km" e "Por data" ficarem numa linha só. */
.kc-lembrete-form__gatilho .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  min-height: 52px;
  padding: 4px 8px;
  font-size: 14px;
}

/* Os intervalos ficam num cartão; os campos dentro dele são creme (regra geral do kc-cartao). O "Repete depois de feito?"
   termina com as duas margens do campo (32 px); na figura o cartão vem 20 px abaixo. */
.kc-cartao.kc-lembrete-form__intervalos {
  margin: 0 0 16px;
  padding: 16px 16px 2px;
}

.sim-nao + .kc-cartao.kc-lembrete-form__intervalos {
  margin-top: -12px;
}

/* "O próximo vencimento conta": o rádio menor, o título escuro, o detalhe de 13 px e mais respiro dos lados (figuras 17 e 18). */
.kc-lembrete-form__modo .kc-opcoes-radio__opcao {
  padding: 4px 20px 4px 9px;
}

/* No legend do fieldset a margem de baixo não afasta o conteúdo: vai como respiro interno. */
.kc-lembrete-form__modo > legend {
  padding-bottom: 5px;
}

.kc-lembrete-form__modo .kc-opcoes-radio__texto {
  color: var(--kc-texto);
  font-size: 14.5px;
  letter-spacing: 0;
}

.kc-lembrete-form__modo .kc-opcoes-radio__texto strong {
  font-weight: 700;
}

.kc-lembrete-form__modo .kc-opcoes-radio__texto small {
  color: #474238;
  font-size: 13px;
  line-height: 18px;
}

.kc-lembrete-form__modo .mud-radio .mud-icon-root {
  width: 19px;
  height: 19px;
  font-size: 19px;
}

.kc-lembrete-form__modo .kc-opcoes-radio__opcao:not(.kc-opcoes-radio__opcao--marcada) .mud-radio .mud-icon-root {
  color: rgba(32, 30, 29, 0.18);
}

.kc-campo.kc-lembrete-form__obs .mud-input.mud-input-outlined {
  min-height: 88px;
}

.kc-rotulo-secao.kc-lembrete-form__secao {
  margin: 24px 0 18px;
  font-size: 11px;
  line-height: 14px;
}

.kc-dica.kc-lembrete-form__previa {
  margin: 0 0 16px;
  padding: 14px 18px 14px 18px;
  border-radius: 24px;
  color: #272e1b;
}

.kc-lembrete-form__previa p {
  margin: 0;
  font-size: 13.5px;
  line-height: 20.5px;
}

.kc-lembrete-form__previa strong {
  font-weight: 700;
}

.icone.kc-lembrete-form__previa-icone {
  flex: none;
  margin-top: 3px;
  font-size: 15px;
  --icone-primaria: var(--kc-accent2-800);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-lembrete-form__previa p.kc-lembrete-form__previa-nota {
  margin-top: 6px;
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18px;
}

.kc-lembrete-form__ajustar {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.kc-lembrete-form__recalcular {
  margin: 0 0 18px -6px;
}

.kc-lembrete-form__recalcular .mud-button-root.mud-button {
  padding-left: 8px;
  padding-right: 8px;
  font-size: 13px;
}

.kc-lembrete-form__recalcular .icone {
  --icone-primaria: var(--kc-accent2-600);
  --icone-secundaria: var(--kc-accent2-600);
}

/* "Avisar antes do vencimento": um cartão que abre e fecha (details), com o ícone e o título em terracota escuro. */
details.kc-cartao.kc-lembrete-form__aviso {
  margin: 0 0 16px;
  padding: 14px 16px 16px;
}

.kc-lembrete-form__aviso > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
}

.kc-lembrete-form__aviso > summary::-webkit-details-marker {
  display: none;
}

.kc-lembrete-form__aviso[open] > summary {
  margin-bottom: 12px;
}

.icone.kc-lembrete-form__aviso-icone {
  flex: none;
  font-size: 16px;
  --icone-primaria: var(--kc-accent2-800);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-lembrete-form__aviso-titulo {
  flex: 1;
  min-width: 0;
  color: var(--kc-accent-800);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.icone.kc-lembrete-form__aviso-seta {
  flex: none;
  font-size: 13px;
  --icone-primaria: var(--kc-accent2-600);
  --icone-secundaria: var(--kc-accent2-600);
  transition: transform 0.15s ease;
}

/* Aberto, como nas figuras 17 e 18, o cartão não mostra a seta. */
.kc-lembrete-form__aviso[open] .kc-lembrete-form__aviso-seta {
  display: none;
}

.kc-lembrete-form__aviso .campo__dica {
  display: block;
  margin-top: -4px;
}

/* ---------- tela 19: mais ---------- */

.kc-mais__secao > .kc-rotulo-secao {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 14px;
}

.kc-mais__secao:first-of-type {
  margin-top: 25px;
}

.kc-mais__secao + .kc-mais__secao {
  margin-top: 24px;
}

.kc-mais__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kc-mais__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-radius: 22px;
  color: var(--kc-texto);
  text-decoration: none;
}

.kc-mais__item:hover {
  background: rgba(235, 221, 197, 0.55);
}

.kc-avatar.kc-mais__avatar {
  width: 42px;
  height: 42px;
  font-size: 17px;
}

.kc-mais__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kc-mais__texto strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
}

.kc-mais__texto small {
  color: var(--kc-texto-suave);
  font-size: 12.8px;
  line-height: 17.5px;
}

.icone.kc-mais__seta {
  flex: none;
  margin-left: -4px;
  margin-right: 5px;
  font-size: 13px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-mais__versao {
  margin: 18px 0 0;
  color: var(--kc-texto-suave);
  font-size: 13px;
}

/* ==========================================================================
   R3 · lote C1: telas 20 a 25 (veículos, detalhe, calibragem e galeria)
   ========================================================================== */

/* ---------- padrões (lote C1): selo claro, interruptor, segmentado em cartão, expansível, cartão com link, lista de dados ---------- */

/* Selo sálvia clara: "Em uso", "Em uso no app", "No ponto" (figuras 20 e 23). */
.kc-status--claro {
  background: var(--kc-accent2-100);
  color: var(--kc-accent2-800);
}

/* Folhas encostadas embaixo: o MudBlazor põe 32 px de folga no contêiner "bottomcenter", e a folha alta ficava solta da
   borda (figuras 14 e 24). */
.mud-dialog-container.mud-dialog-bottomcenter:has(.kc-folha) {
  padding-bottom: 0;
}

/* Interruptor (MudSwitch): trilho em pílula de 48 × 28 com a bolinha de 20 px. Desligado, superfície com a borda do divisor e a
   bolinha cinza; ligado, sálvia escura com a bolinha creme (figuras 21, 22 e 59). */
.kc-interruptor .mud-switch-span.mud-switch-span-medium {
  width: 48px;
  height: 28px;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.kc-interruptor .mud-switch-span .mud-switch-track {
  box-sizing: border-box;
  border: 1px solid rgba(32, 30, 29, 0.16);
  border-radius: var(--kc-raio-pilula);
  background-color: var(--kc-superficie);
  opacity: 1;
}

.kc-interruptor .mud-switch-base.mud-switch-base-medium {
  padding: 4px;
}

.kc-interruptor .mud-switch-base:hover,
.kc-interruptor .mud-switch-base.mud-checked:hover {
  background-color: transparent;
}

.kc-interruptor .mud-switch-button .mud-switch-thumb-medium {
  background-color: #a19786;
  box-shadow: none;
}

.kc-interruptor .mud-switch-base.mud-checked .mud-switch-thumb-medium {
  background-color: var(--kc-fundo);
}

.kc-interruptor .mud-switch-base.mud-checked + .mud-switch-track {
  border-color: transparent;
  background-color: var(--kc-accent2-700) !important;
  opacity: 1;
}

.kc-interruptor:has(.mud-switch-input:focus-visible) .mud-switch-track {
  outline: 2px solid var(--kc-primaria);
  outline-offset: 2px;
}

/* Linha com o interruptor à esquerda, o título e a explicação ao lado ("Tem kit GNV"). */
.kc-interruptor-linha {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
}

.kc-interruptor-linha > .kc-interruptor {
  flex: none;
  margin-top: 3px;
}

.kc-interruptor-linha__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kc-interruptor-linha__texto strong {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 20px;
}

.kc-interruptor-linha__texto small {
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18px;
}

/* Segmentado dentro de cartão: a pílula de fundo fica creme, como os campos (figuras 22 e 63). */
.kc-cartao .mud-toggle-group.kc-segmentado {
  background: var(--kc-fundo);
}

/* Expansível (details): cartão de superfície com a seta sálvia e o título terracota escuro; aberto, o conteúdo vem dentro do
   mesmo cartão e a seta aponta para baixo (figuras 21 e 22: "Compra", "Motorista de aplicativo"). */
details.kc-cartao.kc-expansivel {
  margin: 0 0 16px;
  padding: 0 16px;
}

details.kc-cartao.kc-expansivel[open] {
  padding-bottom: 16px;
}

details.kc-expansivel[open] > :last-child,
details.kc-expansivel[open] > .campo-linha:last-child > .campo {
  margin-bottom: 0;
}

.kc-expansivel__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 51px;
  padding: 0 4px;
  list-style: none;
  color: var(--kc-accent-800);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}

.kc-expansivel__titulo::-webkit-details-marker {
  display: none;
}

.icone.kc-expansivel__seta {
  flex: none;
  font-size: 13px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
  transition: transform 0.15s ease;
}

.kc-expansivel[open] > .kc-expansivel__titulo .kc-expansivel__seta {
  transform: rotate(90deg);
}

/* Cartão que leva a outra tela: o ícone num círculo, o título terracota escuro, o resumo e a seta sálvia (figura 23). */
.kc-cartao.kc-cartao-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 14px;
  color: var(--kc-texto);
  text-decoration: none;
}

.kc-avatar.kc-cartao-link__avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.kc-cartao-link__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kc-cartao-link__texto strong {
  color: var(--kc-accent-800);
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
}

.kc-cartao-link__texto small {
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18px;
}

.icone.kc-cartao-link__seta {
  flex: none;
  font-size: 13px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

.icone.kc-cartao-link__icone--salvia {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 0.6;
}

/* Lista de dados (chave à esquerda, valor em negrito à direita) com a divisória embaixo de cada linha, inclusive da última. */
.kc-dados {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.kc-dados > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kc-divisor);
  font-size: 14px;
  line-height: 17.5px;
}

/* O valor ocupa até pouco mais da metade da linha: um valor longo quebra em duas linhas, alinhado à direita (figura 23,
   "Compra"). */
.kc-dados dt {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--kc-texto);
}

.kc-dados dd {
  flex: 0 1 auto;
  max-width: 52%;
  margin: 0;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- tela 20: meus veículos ---------- */

.kc-lista-cartoes.kc-veiculos {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 12px;
}

.titulo-pagina + .kc-veiculos {
  margin-top: 18px;
}

.kc-cartao.kc-veiculos__cartao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 17px 16px;
}

.kc-veiculos__link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--kc-texto);
  text-decoration: none;
}

.kc-avatar.kc-veiculos__avatar {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.kc-veiculos__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kc-veiculos__texto strong {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 21px;
}

.kc-veiculos__texto small {
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18px;
}

.kc-status.kc-veiculos__selo {
  flex: none;
  padding: 3px 8.5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

.mud-button-root.mud-button.kc-veiculos__usar {
  flex: none;
  margin-right: -1px;
  padding-left: 6px;
  padding-right: 6px;
}

.mud-button-root.mud-button.kc-veiculos__adicionar {
  margin-top: 18px;
  min-height: 50px;
  padding: 8px 25px;
  font-size: 14.5px;
}

.kc-dica.kc-veiculos__limite {
  margin-top: 18px;
}

.kc-veiculos__limite p {
  margin: 0;
  line-height: 1.45;
}

.icone.kc-veiculos__limite-icone {
  margin-top: 3px;
  --icone-primaria: var(--kc-accent2-800);
  --icone-secundaria: var(--kc-accent2-500);
}

/* ---------- telas 21 e 22: cadastrar e editar veículo ---------- */

.titulo-pagina.kc-veiculo-form__titulo {
  margin-bottom: 21px;
}

/* Tipo: ícone e texto pequenos em negrito; cada opção do tamanho do conteúdo, com a sobra repartida (a escolhida fica justa,
   como na figura; a grade de colunas iguais do MudToggleGroup alargava o "Carro"). */
.kc-veiculo-form__tipo .mud-toggle-group.kc-segmentado {
  display: flex;
}

.kc-veiculo-form__tipo .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  margin-left: 0;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 700;
}

.kc-veiculo-form__tipo .kc-segmentado__conteudo {
  white-space: nowrap;
}

.kc-veiculo-form__tipo .kc-segmentado .mud-toggle-item:not(.mud-toggle-item-selected) .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-veiculo-form__fipe {
  margin: 0 0 18px;
}

.mud-button-root.mud-button.kc-veiculo-form__buscar {
  min-height: 42px;
  padding: 6px 16px 6px 17px;
  font-size: 13.75px;
}

.kc-veiculo-form__buscar .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-veiculo-form__valor-fipe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: -7px 0 17px 2px;
  color: #474238;
  font-size: 13px;
  line-height: 18px;
}

.kc-veiculo-form__valor-fipe strong {
  margin: 0 2px;
  color: var(--kc-texto);
  font-weight: 700;
}

.kc-veiculo-form__valor-fipe .icone {
  margin-right: 4px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-cartao.kc-veiculo-form__painel-fipe {
  margin: -1px 0 16px;
  padding: 16px 16px 2px;
}

.kc-fipe__dica {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: -6px 0 14px 2px;
  color: #474238;
  font-size: 13px;
  line-height: 18px;
}

.kc-fipe__dica .icone {
  margin-top: 2px;
  --icone-primaria: var(--kc-accent2-600);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-fipe__aviso {
  margin: 0 0 12px;
}

.campo-linha > .campo.kc-veiculo-form__uf {
  flex: 0 0 121px;
}

/* Os campos dentro dos cartões do formulário têm 48 px, como fora (figuras 21 e 22). */
.kc-veiculo-form__pneus .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined,
.kc-expansivel .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined {
  min-height: var(--kc-altura-campo);
}

.kc-cartao.kc-veiculo-form__pneus {
  margin: 1px 0 17px;
  padding: 17px 16px 0;
}

.kc-veiculo-form__pneus > .kc-rotulo-secao {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 14px;
}

.kc-veiculo-form__pneus-texto {
  margin: 13px 0 10px;
  color: #474238;
  font-size: 13px;
  line-height: 18px;
}

.kc-veiculo-form__pneus-campos {
  gap: 10px;
}

.kc-veiculo-form__foto {
  margin-bottom: 16px;
}

/* Motorista de aplicativo: a pergunta, os dois segmentados de 50 px com texto de 13 px e as explicações mais juntas. */
.kc-expansivel .sim-nao {
  margin-bottom: 12px;
}

.kc-expansivel .sim-nao__pergunta {
  margin-bottom: 0;
  padding-bottom: 13px;
  line-height: 20px;
}

.kc-expansivel .sim-nao .campo__dica {
  margin: 12px 0 0;
}

.kc-expansivel .campo__dica {
  line-height: 18px;
}

.kc-expansivel .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  min-height: 42px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
}

/* A data de compra inteira cabe no campo de meia largura do cartão, como na figura 22: sem o ícone do calendário (tocar no
   campo já abre a janela da data) e sem os 14 px vazios que o MudBlazor deixava à direita; o "limpar" continua. */
.kc-expansivel .kc-campo--data .mud-input.mud-input-adorned-end {
  padding-right: 10px;
}

.kc-expansivel .kc-campo--data .mud-input-adornment-end {
  display: none;
}

.kc-veiculo-form__dica {
  display: block;
  margin: -6px 0 16px;
}

.kc-veiculo-form__sugestao .kc-link {
  font-size: inherit;
  font-weight: 700;
}

/* ---------- tela 23: detalhe do veículo ---------- */

.kc-veiculo__foto {
  display: block;
  width: 100%;
  max-height: 220px;
  margin: 4px 0 14px;
  object-fit: cover;
  border-radius: var(--kc-raio-cartao);
}

.subtitulo-pagina.kc-veiculo__subtitulo {
  margin: 7px 0 13px;
  font-size: 13.5px;
  line-height: 19.5px;
}

.kc-veiculo__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 19px;
}

.mud-button-root.mud-button.kc-veiculo__editar {
  min-height: 39px;
  padding: 6px 20px 6px 18px;
}

.kc-veiculo__editar .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-texto);
  --icone-secundaria-opacidade: 0.45;
}

.kc-status.kc-veiculo__em-uso {
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

/* Odômetro: cartão de destaque sálvia com o círculo no canto, o km em Caprasimo e o botão creme. */
.kc-hero.kc-veiculo__odometro {
  padding: 22px 20px 20px;
  color: var(--kc-fundo);
}

.kc-veiculo__odometro::after {
  top: -61px;
  right: -50px;
  width: 160px;
  height: 160px;
}

.kc-veiculo__odometro .kc-hero__rotulo {
  margin: 0;
  font-family: var(--kc-fonte);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 14px;
}

.kc-veiculo__km {
  margin: 18px 0 0;
  font-family: var(--kc-fonte-titulo);
  font-size: 38px;
  line-height: 44px;
  white-space: nowrap;
}

/* O "≈" na fonte do texto (mais fina), do tamanho do número. */
.kc-veiculo__aprox {
  margin-right: 1px;
  font-family: var(--kc-fonte);
  font-weight: 400;
  line-height: 1;
}

.kc-veiculo__km small {
  color: inherit;
  font-family: var(--kc-fonte);
  font-size: 14.5px;
  line-height: 1;
}

.kc-veiculo__leituras {
  margin-top: 14px;
}

.kc-veiculo__leituras p {
  margin: 0;
  font-size: 12.7px;
  line-height: 19.2px;
}

.kc-veiculo__leituras strong {
  font-weight: 700;
}

.mud-button-root.mud-button.kc-veiculo__atualizar {
  margin-top: 12px;
  min-height: 40px;
  padding: 6px 22px 6px 20px;
  color: #272e1b !important;
}

.kc-veiculo__atualizar .icone {
  --icone-primaria: #272e1b;
  --icone-secundaria: var(--kc-accent2-500);
}

/* Seções: rótulo em maiúsculas e o cartão; entre os cartões com link (documentos, parcelas, fotos, computador de bordo)
   o espaço é menor, como na figura. */
.kc-veiculo__secao {
  margin-top: 24px;
}

.kc-veiculo__secao--junta {
  margin-top: 14px;
}

.kc-veiculo__secao > .kc-cabecalho-secao {
  align-items: center;
  margin-bottom: 14px;
}

.kc-veiculo__secao > .kc-rotulo-secao,
.kc-veiculo__secao > .kc-cabecalho-secao > .kc-rotulo-secao {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 14px;
}

.kc-veiculo__secao > .kc-rotulo-secao {
  margin-bottom: 16px;
}

.kc-veiculo__secao .kc-cabecalho-secao .kc-link {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

/* Pneus: o carrinho compacto à esquerda e o texto à direita. */
.kc-cartao.kc-veiculo__pneus {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
}

.kc-carrinho--compacto {
  flex: none;
  width: 72px;
  height: auto;
  margin-left: -5px;
}

.kc-veiculo__pneus-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.kc-veiculo__recomendado {
  margin: 0;
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18px;
}

.kc-veiculo__situacao-pneus {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
}

.kc-veiculo__ultima {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 18.75px;
}

.kc-veiculo__pneus-texto > .mud-button-root.mud-button {
  margin-top: 8px;
  min-height: 38px;
  padding: 6px 22px 6px 18px;
}

.kc-veiculo__titulo-lista {
  margin: 18px 0 13px;
  font-family: var(--kc-fonte);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.kc-cartao.kc-veiculo__calibragens {
  list-style: none;
  margin: 0;
  padding: 3px 16px 1px;
}

.kc-veiculo__calibragem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--kc-divisor);
  background: transparent;
  color: var(--kc-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kc-veiculo__calibragem-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kc-veiculo__calibragem-texto strong {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 20px;
}

.kc-veiculo__calibragem-texto small {
  color: var(--kc-texto-suave);
  font-size: 12.3px;
  line-height: 19px;
}

.kc-veiculo__calibragem .kc-status {
  flex: none;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
}

.kc-veiculo__mais {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* Consumo: três números em Caprasimo com a legenda embaixo. */
.kc-cartao.kc-veiculo__consumo {
  padding: 18px 16px 16px;
}

/* Três colunas iguais, nos mesmos lugares da figura; a legenda quebra dentro da coluna (na figura ela vazava sobre a vizinha). */
.kc-veiculo__numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 6px;
}

.kc-veiculo__numero {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kc-veiculo__numero strong {
  font-size: 23px;
  line-height: 28px;
}

.kc-veiculo__numero small {
  margin-top: 3px;
  color: var(--kc-texto-suave);
  font-size: 12.5px;
  line-height: 16px;
}

.kc-veiculo__por-combustivel {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 18px;
}

.kc-veiculo__nota {
  margin: 0;
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18.5px;
}

/* Valor do veículo: o valor da FIPE em Caprasimo, as notas, o botão e o histórico dos meses. */
.kc-cartao.kc-veiculo__valor {
  padding: 22px 18px 18px;
}

.kc-veiculo__fipe {
  margin: 0;
  line-height: 36px;
}

.kc-veiculo__fipe .kc-numero {
  font-size: 28px;
}

.kc-veiculo__fipe small {
  color: var(--kc-texto-suave);
  font-size: 13px;
}

.kc-veiculo__valor > .kc-veiculo__fipe + .kc-veiculo__nota {
  margin-top: 12px;
}

.kc-veiculo__perda {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 20px;
}

.kc-veiculo__perda strong {
  font-weight: 700;
}

.kc-veiculo__perda + .kc-veiculo__nota {
  margin-top: 11px;
}

.kc-veiculo__valor > .mud-button-root.mud-button,
.kc-veiculo__recall > .mud-button-root.mud-button {
  margin-top: 8px;
  min-height: 40px;
  padding: 6px 22px 6px 18px;
}

.kc-veiculo__recall > .mud-button-root.mud-button {
  margin-top: 10px;
}

.kc-veiculo__botao-salvia .icone {
  --icone-primaria: var(--kc-accent2-600);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-veiculo__valor > .kc-veiculo__nota[role="status"] {
  margin-top: 10px;
}

.kc-dados.kc-veiculo__historico-fipe {
  margin-top: 10px;
}

.kc-veiculo__historico-fipe > div {
  padding: 10px 0;
  line-height: 17px;
}

/* Recall: cartão terracota claro. */
.kc-cartao.kc-veiculo__recall {
  padding: 19px 18px 18px;
  background: var(--kc-accent-100);
}

.kc-veiculo__recall > p:first-child {
  margin: 0;
  font-size: 13.5px;
  line-height: 19.5px;
}

.kc-veiculo__recall > .kc-veiculo__nota {
  margin-top: 11px;
}

.kc-cartao.kc-dados.kc-veiculo__dados {
  padding: 3px 16px 4px 18px;
}

.kc-veiculo__dados > div {
  padding: 12px 0 11.5px;
}

/* ---------- tela 24: calibrar os pneus (folha) ---------- */

/* Cabeçalho numa linha só: o ícone de 44 px, o título um pouco menor e o fechar de 40 px (figura 24). */
.mud-dialog.kc-folha--calibragem .kc-folha__icone {
  width: 44px;
  height: 44px;
  font-size: 19px;
}

.mud-dialog.kc-folha--calibragem .kc-folha__titulo {
  font-size: 20.3px;
  line-height: 35px;
}

.mud-dialog.kc-folha--calibragem .kc-folha__fechar {
  width: 40px;
  height: 40px;
}

/* O rodapé sem a linha: uma sombra leve sobre o conteúdo que rola por baixo. */
.mud-dialog.kc-folha--calibragem .kc-folha__rodape {
  border-top: 0;
  box-shadow: 0 -10px 16px -10px rgba(32, 30, 29, 0.22);
}

.kc-calibragem__recomendada {
  margin: 0 0 14px;
  color: #474238;
  font-size: 14px;
  line-height: 21px;
}

.kc-calibragem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
  margin: 0 0 15px;
}

.kc-calibragem__coluna {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kc-calibragem__desenho {
  display: flex;
  justify-content: center;
}

.kc-carrinho:not(.kc-carrinho--compacto) {
  display: block;
  width: 94px;
  height: auto;
}

.kc-calibragem__estepe {
  width: 60%;
  margin: 0 0 17px;
}

/* Campo de pressão: o número em negrito e o "PSI" pequeno juntos no meio da pílula; embaixo, "no ponto" em sálvia ou a
   diferença em terracota. */
.kc-campo.kc-pressao {
  gap: 0;
  margin-bottom: 0;
}

.kc-campo.kc-pressao .kc-campo__rotulo {
  margin: 0 0 4px;
  color: #645c50;
  font-size: 11.7px;
  font-weight: 700;
  line-height: 16px;
}

.kc-pressao .mud-input.mud-input-outlined {
  min-height: 46px;
  font-size: 18px;
  font-weight: 700;
}

.kc-pressao .mud-input > input.mud-input-root.mud-input-root-outlined {
  flex: 1 1 50%;
  min-width: 0;
  padding: 0 1px 0 0;
  text-align: right;
}

.kc-pressao .mud-input-adornment.mud-input-adornment-end {
  flex: 1 1 50%;
  justify-content: flex-start;
  margin: 0;
  padding-left: 2px;
}

.kc-pressao .mud-input-adornment-text {
  color: #645c50;
  font-size: 11px;
  font-weight: 400;
}

.kc-pressao .campo__dica {
  display: block;
  margin-top: 3px;
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 17px;
}

.kc-pressao--ok .campo__dica {
  color: var(--kc-accent2-700);
}

.kc-pressao--atencao .campo__dica,
.kc-pressao--critico .campo__dica {
  color: var(--kc-accent-700);
}

.kc-calibragem__atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 8px;
  margin: 0 0 20px;
}

.kc-calibragem__atalhos > .mud-button-root.mud-button {
  min-height: 40px;
  padding: 6px 15px;
  font-size: 12.75px;
}

.kc-calibragem__atalhos .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-accent2-500);
}

/* O carrinho: carroceria em pílula com contorno fino e as rodas por cima, meio para fora (figuras 23 e 24). */
.kc-carrinho__carroceria {
  fill: var(--kc-superficie);
  stroke: #cabeaa;
  stroke-width: 2;
}

.kc-carrinho--compacto .kc-carrinho__carroceria {
  fill: var(--kc-fundo);
  stroke: #d2c9ba;
}

.kc-carrinho__teto {
  fill: var(--kc-fundo);
}

.kc-carrinho__frente {
  fill: #645c50;
  font-family: var(--kc-fonte);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.6px;
}

.kc-carrinho__roda {
  fill: var(--kc-superficie-funda);
  stroke: transparent;
  stroke-width: 2.5;
  transition: fill 0.15s ease;
}

.kc-carrinho__roda--ok {
  fill: var(--kc-accent2-500);
}

.kc-carrinho__roda--atencao {
  fill: var(--kc-accent-300);
}

.kc-carrinho__roda--critico {
  fill: var(--kc-accent-600);
}

.kc-carrinho__roda--destaque {
  stroke: var(--kc-primaria);
}

/* ---------- tela 25: fotos e vídeos do carro ---------- */

.kc-cartao.kc-galeria__nova {
  margin: 0 0 15px;
  padding: 18px 16px 16px;
}

.kc-galeria__nova .kc-campo .campo__dica {
  display: block;
  margin-top: 9px;
}

.kc-galeria__acoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.kc-galeria__acoes > .mud-button-root.mud-button {
  min-height: 52px;
  padding: 6px 12px;
  font-size: 14px;
  white-space: normal;
  line-height: 1.15;
}

.kc-galeria__acoes--galeria > .mud-button-root.mud-button {
  border-color: rgba(32, 30, 29, 0.12) !important;
  background: var(--kc-fundo);
}

.kc-galeria__acoes--galeria .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-galeria__acoes--galeria > .mud-button-root.mud-button:last-child .icone {
  --icone-primaria: var(--kc-accent2-500);
}

.campo__dica.kc-galeria__dica {
  margin: 14px 2px 14px;
}

.kc-galeria__nova > .kc-galeria__dica:last-child {
  margin-bottom: 0;
}

.kc-captura__arquivo.kc-galeria__arquivo {
  min-height: 132px;
}

.campo.kc-galeria__filtros {
  margin: 0 0 15px;
}

.kc-galeria__filtros .kc-chips {
  gap: 6px;
}

.kc-galeria__filtros .kc-chips .mud-chip.kc-chip {
  padding: 0 15px;
  font-weight: 700;
}

.kc-galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.kc-galeria__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--kc-accent2-200);
  cursor: pointer;
}

.kc-galeria__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kc-galeria__sem-imagem {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
}

.kc-galeria__sem-imagem .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-galeria__selo {
  position: absolute;
  left: 6px;
  right: 5px;
  bottom: 6px;
  padding: 3px 8px;
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-fundo);
  color: var(--kc-texto);
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc-galeria__duracao {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--kc-raio-pilula);
  background: rgba(32, 30, 29, 0.72);
  color: var(--kc-fundo);
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
}

.kc-galeria__duracao .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-fundo);
}

/* Folha de uma foto ou vídeo: a imagem grande com cantos de 22, os dados, as ações e os campos. */
.kc-galeria__grande {
  display: block;
  width: 100%;
  max-height: 55vh;
  object-fit: contain;
  border-radius: 22px;
  background: var(--kc-superficie);
}

.kc-galeria__meta {
  margin: 12px 0 0;
  color: var(--kc-texto-suave);
  font-size: 13.5px;
}

.kc-galeria__item-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.kc-galeria__nuvem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--kc-texto-suave);
  font-size: 13.5px;
  line-height: 1.45;
}

.kc-galeria__nuvem .icone {
  margin-top: 2px;
  --icone-primaria: var(--kc-accent2-700);
  --icone-secundaria: var(--kc-accent2-500);
}

/* ==========================================================================
   R3 · lote C2: telas 37 a 45 (documentos, parcelas e IPVA)
   ========================================================================== */

/* ---------- padrões (lote C2): título com "Novo", seção com rótulo, cartão de vencimento, lista de links, vazio em cartão, folha compacta ---------- */

/* Título com o botão "+ Novo" ao lado: o botão (42 px) não empurra o subtítulo, que fica onde fica nas telas sem botão
   (figuras 37 e 40 × 38 e 43). */
.cabecalho-pagina.kc-cabecalho-novo {
  margin: 7px 0 4px;
}

.mud-button-root.mud-button.kc-botao-novo {
  flex: none;
  min-height: 42px;
  margin: -6px 0;
  padding: 6px 17px 6px 19px;
  font-size: 15px;
}

.mud-button-root.kc-botao-novo .mud-button-label {
  gap: 7px;
}

.kc-botao-novo .icone {
  font-size: 12px;
}

/* Seção com o rótulo em maiúsculas (A PAGAR, PLANOS, ADICIONAR): 26 px do bloco de cima até as letras e 20 px delas ao
   cartão de baixo. */
.kc-secao-lista {
  margin-top: 23px;
}

.kc-secao-lista > .kc-rotulo-secao {
  margin: 0 0 17px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 14px;
}

/* Cartão de vencimento (CartaoVencimento): o desenho do cartão de lembrete com o círculo mais claro (terracota 100 em breve,
   sálvia 100 em dia, terracota cheio vencido) e 14 px entre os cartões. Paga: cartão sálvia 100 com o círculo creme. */
.kc-lista-cartoes.kc-vencimentos {
  gap: 14px;
}

.kc-cartao.kc-vencimento {
  padding: 16px;
  letter-spacing: 0;
}

.kc-vencimento > .kc-lembrete__avatar {
  margin-top: 0;
}

/* O selo com 24 px de altura, como nas figuras (com a altura de linha do corpo ficava 24,7 e cada cartão crescia). */
.kc-vencimento .kc-lembrete__cabeca .kc-status {
  line-height: 16px;
}

.kc-vencimento--ok > .kc-lembrete__avatar {
  background: var(--kc-accent2-100);
}

.kc-vencimento--vencido > .kc-lembrete__avatar {
  background: var(--kc-primaria);
}

.kc-vencimento--vencido > .kc-lembrete__avatar .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent-200);
}

.kc-cartao.kc-vencimento--concluido {
  background: var(--kc-accent2-100);
}

.kc-vencimento--concluido > .kc-lembrete__avatar {
  background: var(--kc-fundo);
}

.kc-vencimento .kc-lembrete__acoes {
  gap: 6px;
}

.kc-vencimento .kc-lembrete__acoes > .mud-button-root.mud-button.kc-lembrete__registrar {
  min-height: 38px;
}

/* Nas figuras o ícone das ações é menor que o do botão comum (11 px) e fica mais perto do texto. */
.kc-vencimento .kc-lembrete__acoes .mud-button-root.kc-botao .mud-button-label,
.kc-documento__validade .kc-lembrete__acoes .mud-button-root.kc-botao .mud-button-label {
  gap: 7px;
}

.kc-vencimento .kc-lembrete__acoes .mud-button-root .icone,
.kc-documento__validade .kc-lembrete__acoes .mud-button-root .icone {
  font-size: 11px;
}

/* Ação de texto neutra ("Desfazer"): cinza quente, com o ícone sálvia. */
.mud-button-root.mud-button.mud-button-text.kc-botao--suave {
  color: #645c50 !important;
}

.kc-botao--suave .icone {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-400);
}

/* Lista de links num cartão (ADICIONAR, PLANOS): círculo de 40 px, título, resumo e a seta sálvia; a divisória fica embaixo de
   cada item (figuras 40 e 41) ou só entre eles (--entre, figura 37). */
.kc-cartao.kc-lista-links {
  list-style: none;
  margin: 0;
  padding: 4px 14px;
  letter-spacing: 0;
}

.kc-lista-links__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  border-bottom: 1px solid var(--kc-divisor);
  color: var(--kc-texto);
  text-decoration: none;
}

.kc-lista-links--entre > li:last-child > .kc-lista-links__item {
  border-bottom: 0;
}

.kc-avatar.kc-lista-links__avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

.kc-lista-links__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kc-lista-links__texto strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 21px;
}

.kc-lista-links__texto small {
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18px;
}

.icone.kc-lista-links__seta {
  flex: none;
  margin-right: 4px;
  font-size: 13px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

/* Cartão com link em destaque (IPVA e licenciamento, figura 40): fundo terracota 100, círculo creme de 44 px e título escuro. */
.kc-cartao.kc-cartao-link.kc-cartao-link--destaque {
  padding: 14px 16px 16px 14px;
  background: var(--kc-accent-100);
  letter-spacing: 0;
}

.kc-cartao-link--destaque .kc-avatar.kc-cartao-link__avatar {
  width: 44px;
  height: 44px;
  font-size: 16px;
}

.kc-cartao-link--destaque .kc-cartao-link__texto {
  padding-right: 12px;
}

.kc-cartao-link--destaque .kc-cartao-link__texto strong {
  color: var(--kc-texto);
  font-weight: 650;
}

.kc-cartao-link--destaque .kc-cartao-link__texto small {
  line-height: 17px;
}

/* Estado vazio dentro de um cartão (figura 41): círculo de 72 px, título de 22 px e o texto de 14 px. */
.kc-cartao.kc-vazio-cartao {
  padding: 28px 22px 26px;
  letter-spacing: 0;
}

.kc-vazio-cartao .kc-vazio {
  padding: 0;
}

.kc-vazio-cartao .kc-vazio__icone {
  width: 72px;
  height: 72px;
  font-size: 8.7px;
}

.kc-vazio-cartao .kc-vazio__titulo {
  margin: 9.5px 0 10.5px;
  font-size: 22px;
  line-height: 34px;
}

.kc-vazio-cartao .kc-vazio__texto {
  max-width: none;
  margin: 0;
  font-size: 14px;
  line-height: 21px;
}

.kc-vazio-cartao .kc-vazio .mud-button-root.mud-button {
  margin-top: 18px;
}

/* Folha compacta (pagar, ajustar, renovar): o ícone e o fechar de 40 px, como na figura 44; --salvia pinta o círculo do ícone. */
.mud-dialog.kc-folha--compacta .kc-folha__icone {
  width: 40px;
  height: 40px;
  font-size: 10px;
}

.mud-dialog.kc-folha--compacta .kc-folha__titulo {
  line-height: 35px;
}

.mud-dialog.kc-folha--compacta .kc-folha__fechar {
  width: 40px;
  height: 40px;
  font-size: 12px;
}

.mud-dialog.kc-folha--salvia .kc-folha__icone {
  background: var(--kc-accent2-100);
}

.mud-dialog.kc-folha--compacta .kc-folha__rodape .icone {
  font-size: 12px;
}

/* O último campo já deixa 16 px até o rodapé (com o respiro da folha ficavam 34). */
.mud-dialog.kc-folha--compacta .mud-dialog-content.kc-folha__corpo {
  padding-bottom: 0;
}

.kc-folha__texto.kc-folha__explicacao {
  margin: 0 0 16px;
  color: var(--kc-texto-suave);
  font-size: 14px;
}

/* Chips em linhas mais juntas: 6 px entre eles (figuras 38, 39 e 42), texto em negrito. */
.kc-chips-juntos .kc-chips {
  gap: 6px;
}

.kc-chips-juntos .kc-chips .mud-chip.kc-chip {
  padding: 0 15px;
  font-weight: 700;
}

/* Duas datas lado a lado: a data inteira cabe no campo de meia largura com o "limpar" e o calendário (antes "20/04/20…"). */
.kc-datas-meia-largura .kc-campo--data .mud-input.mud-input-adorned-end {
  padding-right: 6px;
}

/* Link em negrito no meio do texto ("assistente", "Abrir o plano"). */
.kc-link.kc-link--forte {
  font-size: inherit;
  font-weight: 700;
}

/* ---------- tela 37: documentos do veículo ---------- */

.kc-lista-cartoes.kc-vencimentos + .kc-secao-lista {
  margin-top: 23px;
}

/* ---------- telas 38 e 39: cadastrar e editar documento ---------- */

/* Validade (edição): o cartão na cor da situação, com o ícone sem o círculo, o resumo e "Renovar". */
.kc-cartao.kc-documento__validade {
  margin: 0 0 17px;
  padding: 16.5px 16px 16px;
  background: var(--kc-accent-100);
  letter-spacing: 0;
}

.kc-documento__validade--ok.kc-cartao {
  background: var(--kc-accent2-100);
}

.kc-documento__validade--vencido.kc-cartao {
  background: var(--kc-accent-200);
}

.kc-documento__validade > .kc-avatar.kc-lembrete__avatar {
  margin-top: -4px;
  background: transparent;
}

.kc-documento__validade .kc-lembrete__titulo {
  display: block;
  font-size: 15px;
  line-height: 20px;
}

.kc-documento__validade .kc-lembrete__resumo {
  margin-top: 9px;
}

.kc-documento__validade .kc-lembrete__acoes {
  margin-top: 8px;
}

.kc-documento__validade .kc-lembrete__acoes > .mud-button-root.mud-button.kc-lembrete__registrar {
  min-height: 38px;
}

.kc-dica.kc-documento__dica {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
}

.kc-documento__dica > .icone {
  flex: none;
  margin-top: 2px;
  --icone-primaria: var(--kc-accent2-800);
  --icone-secundaria: var(--kc-accent2-500);
}

/* 22 px: a margem se junta (não soma) com os 16 px do campo de cima. */
.kc-documento__fotos {
  margin-top: 22px;
}

.kc-documento__fotos > .kc-rotulo-secao {
  margin: 0 0 21px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 14px;
}

/* ---------- telas 40 e 41: parcelas e IPVA ---------- */

.kc-cartao-link--destaque + .kc-secao-lista {
  margin-top: 23px;
}

/* ---------- tela 42: criar parcelamento ---------- */

.kc-parcelas-form__intro {
  margin: -2px 0 15px;
  color: var(--kc-texto);
  font-size: 13.5px;
  line-height: 21px;
  letter-spacing: 0;
}

/* Prévia das parcelas: cartão sálvia escuro com o resumo e a lista (data e valor em negrito), divisória clara em cada linha. */
.kc-cartao.kc-previa-parcelas {
  margin: 0 0 16px;
  padding: 16px 20px 18px;
  background: var(--kc-accent2-800);
  color: var(--kc-fundo);
  letter-spacing: 0;
}

.kc-previa-parcelas__resumo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  line-height: 21px;
}

.kc-previa-parcelas__resumo strong {
  font-weight: 600;
}

.kc-previa-parcelas__resumo > .icone {
  flex: none;
  margin: 3px 0 0 2px;
}

.kc-dados.kc-previa-parcelas__lista > div {
  padding: 13px 0;
  border-bottom-color: rgba(245, 234, 216, 0.18);
}

.kc-previa-parcelas__lista dt {
  color: inherit;
}

/* A data e o valor numa linha só (o kc-dados limita o valor a pouco mais da metade da linha). */
.kc-previa-parcelas__lista dd,
.kc-ipva__parcelas dd {
  max-width: none;
  white-space: nowrap;
}

.kc-previa-parcelas__mais {
  margin: 12px 0 0;
  font-size: 13px;
  opacity: 0.85;
}

/* ---------- tela 43: plano de parcelamento ---------- */

.kc-hero.kc-plano__resumo {
  padding: 20px;
  letter-spacing: 0;
}

/* Os três valores lado a lado, com a sobra repartida; numa tela estreita (ou com valores grandes) o último desce de linha. */
.kc-plano__valores {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 4px;
}

.kc-plano__valores > p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.kc-plano__valores strong {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.kc-plano__valores small {
  color: var(--kc-accent-100);
  font-size: 12px;
  line-height: 16px;
}

.kc-plano__barra {
  height: 10px;
  margin-top: 16px;
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-accent-700);
  overflow: hidden;
}

.kc-plano__barra > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--kc-fundo);
}

.kc-plano__proxima {
  margin: 11px 0 0;
  font-size: 13.5px;
  line-height: 20px;
}

.kc-plano__proxima--atraso {
  font-weight: 700;
}

.mud-button-root.mud-button.kc-plano__pagar {
  min-height: 42px;
  margin-top: 14px;
  padding: 6px 22px 6px 20px;
  font-size: 14px;
}

.kc-secao-lista.kc-plano__secao {
  margin-top: 21px;
}

.kc-plano__secao > .kc-rotulo-secao {
  margin-bottom: 16px;
}

/* Nas parcelas do plano o cartão é mais baixo (14 px em cima e embaixo) e o círculo da parcela a pagar é terracota 100. */
.kc-plano__parcelas .kc-cartao.kc-vencimento {
  padding: 14px 16px;
}

.kc-plano__parcelas .kc-lembrete__acoes {
  margin-top: 6px;
}

.kc-plano__parcelas .kc-vencimento--ok > .kc-lembrete__avatar {
  background: var(--kc-accent-100);
}

.kc-plano__observacao {
  margin: 14px 0 0;
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 19px;
  letter-spacing: 0;
}

.kc-plano__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.mud-button-root.mud-button.kc-plano__excluir {
  margin-left: -8px;
  padding-left: 8px;
  padding-right: 8px;
}

.kc-plano__excluir .icone {
  font-size: 12px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-400);
}

/* ---------- tela 44: pagar parcela (folha) ---------- */

.kc-folha__texto.kc-pagar-parcela__alvo {
  margin: 0 0 16px;
  color: var(--kc-texto);
  font-size: 15px;
  line-height: 21px;
}

.kc-pagar-parcela__alvo strong {
  font-weight: 600;
}

/* ---------- tela 45: assistente do IPVA ---------- */

.kc-ipva {
  letter-spacing: 0;
}

.kc-cartao.kc-ipva__local {
  margin: 0 0 14px;
  padding: 18px 18px 5px;
}

.kc-ipva .campo__dica {
  line-height: 18px;
}

.kc-ipva__local .kc-campo:not(.kc-campo--total) {
  margin-bottom: 12px;
}

/* Os campos do cartão têm 48 px, como fora dele (figura 45). */
.kc-ipva__local .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined {
  min-height: var(--kc-altura-campo);
}

/* Segmentados de 54 px (botões de 46), com o texto em negrito de 14 px. */
.kc-ipva .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  min-height: 46px;
  font-size: 14px;
  font-weight: 700;
}

.kc-ipva .kc-segmentado .mud-toggle-item:not(.mud-toggle-item-selected) .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-ipva .campo.campo--segmentado {
  margin-bottom: 14px;
}

/* "Já paguei o que venceu?": a explicação mais perto dos botões e menos espaço até a fonte (figura 45). */
.kc-ipva .sim-nao .campo.campo--segmentado {
  margin-bottom: 8px;
}

.kc-ipva .sim-nao .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  min-height: 44px;
}

.kc-ipva .sim-nao__pergunta {
  margin-bottom: 7px;
}

.kc-ipva .sim-nao {
  margin-bottom: 8px;
}

.kc-ipva .sim-nao .campo__dica {
  margin-bottom: 8px;
}

.kc-ipva__nota {
  margin: 0 0 14px;
  color: var(--kc-texto-suave);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Proposta (cota única, parcelas, licenciamento): cartão sálvia 100 com o ícone ao lado do título. */
.kc-cartao.kc-ipva__proposta {
  margin: 0 0 16px;
  padding: 16px 20px 19px;
  background: var(--kc-accent2-100);
  color: #272e1b;
}

.kc-ipva__proposta-titulo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
}

.kc-ipva__proposta-titulo strong {
  font-weight: 700;
}

.kc-ipva__proposta-titulo > .icone {
  flex: none;
  margin: 4px 0 0 2px;
}

.kc-ipva__proposta-texto {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 20.3px;
}

.kc-dados.kc-ipva__parcelas {
  margin-top: 8px;
}

.kc-dados.kc-ipva__parcelas > div {
  border-bottom-color: rgba(39, 46, 27, 0.14);
}

.kc-atencao.kc-ipva__existente {
  margin: 0 0 14px;
  align-items: flex-start;
  font-size: 14px;
}

.kc-ipva__existente > .icone {
  flex: none;
  margin-top: 2px;
}

.kc-ipva__fonte {
  margin: 0 0 10px;
  color: var(--kc-texto-suave);
  font-size: 12.5px;
  line-height: 18.5px;
}

.kc-ipva__acoes {
  display: flex;
  justify-content: flex-end;
}

.kc-ipva__acoes > .mud-button-root.mud-button {
  min-height: 50px;
  padding: 8px 24px;
  font-size: 15px;
}

/* ==========================================================================
   R3 · lote D: telas 30 a 36 (modo motorista)
   ========================================================================== */

/* ---------- padrões (lote D): período, título de seção com ícone, progresso, cartões com link, listas, cartão numerado, total, tabela ---------- */

/* Texto de abertura das telas (o que a tela faz), mais escuro que o subtítulo (figuras 31, 34, 35 e 36). */
.kc-intro {
  margin: 0 0 14px;
  color: #474238;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0;
}

/* Consentimento (padrão do lote A, telas 13 e 32): nas figuras o texto do botão tem 15 px. */
.kc-consentimento > .mud-button-root.mud-button.mud-button-filled-size-large {
  padding-left: 22px;
  padding-right: 22px;
  font-size: 15px;
}

/* Navegação de período (figuras 30 e 33): os botões redondos de 40 px nas pontas e o período em negrito no meio. */
.kc-navegacao-periodo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  letter-spacing: 0;
}

.kc-navegacao-periodo__botao {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kc-superficie);
  font-size: 13px;
  cursor: pointer;
}

.kc-navegacao-periodo__botao .icone {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

.kc-navegacao-periodo__botao:disabled {
  background: #efe3cf;
  cursor: default;
}

.kc-navegacao-periodo__botao:disabled .icone {
  opacity: 0.5;
}

.kc-navegacao-periodo__rotulo {
  flex: 1;
  min-width: 0;
  color: var(--kc-texto);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* Título de seção fora de cartão, com o ícone na frente (GANHOS DO DIA, COMO CHEGAMOS A ESSE VALOR, ACRESCENTAR À LISTA). */
.kc-titulo-secao {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 16px;
  color: var(--kc-accent2-700);
  font-family: var(--kc-fonte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.125em;
  line-height: 14px;
  text-transform: uppercase;
}

.kc-titulo-secao > .icone {
  flex: none;
  font-size: 13px;
}

/* Barra de progresso (meta): trilho creme, terracota até o percentual; batida, sálvia. */
.kc-progresso {
  height: 12px;
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-fundo);
  overflow: hidden;
}

.kc-progresso > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--kc-primaria);
}

.kc-progresso--completo > span {
  background: var(--kc-accent2-600);
}

/* Cartão com link de título escuro (os atalhos do painel, figura 30): círculo terracota claro de 40 px, título, resumo e seta. */
.kc-cartao.kc-cartao-link.kc-cartao-link--simples {
  min-height: 80px;
  padding: 11.5px 14px 11.5px 12px;
  letter-spacing: 0;
}

.kc-cartao-link--simples .kc-cartao-link__texto strong {
  color: var(--kc-texto);
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;
}

.kc-cartao-link--simples .kc-cartao-link__texto small {
  font-size: 13px;
  line-height: 17px;
}

.kc-cartao-link--simples .kc-avatar.kc-cartao-link__avatar {
  font-size: 15px;
}

/* Lista sem cartão (Dias fechados): círculo sálvia de 38 px, título em negrito, a linha de baixo e a seta. */
.kc-lista-simples {
  list-style: none;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}

.kc-lista-simples__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-radius: 22px;
  color: var(--kc-texto);
  text-decoration: none;
}

.kc-lista-simples__item:hover {
  background: rgba(235, 221, 197, 0.55);
}

.kc-avatar.kc-lista-simples__avatar {
  width: 38px;
  height: 38px;
  font-size: 15px;
}

.kc-lista-simples__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kc-lista-simples__texto strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.kc-lista-simples__texto small {
  color: var(--kc-texto-suave);
  font-size: 12px;
  line-height: 16px;
}

.icone.kc-lista-simples__seta {
  flex: none;
  margin-right: 6px;
  font-size: 13px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

/* Cartões numerados (os ganhos do dia, figura 31): o número num círculo sálvia, o título e "Remover" à direita; os campos
   dentro do cartão com 46 px. */
.kc-numerados {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.kc-cartao.kc-numerado {
  margin: 0;
  padding: 20px 18px 7px;
  letter-spacing: 0;
}

.kc-numerado .kc-campo:not(.kc-campo--total) {
  margin-bottom: 11px;
}

.kc-numerado__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  margin: 0 0 18px;
}

.kc-numerado__numero {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kc-accent2-700);
  color: var(--kc-fundo);
  font-size: 14px;
  font-weight: 700;
}

.kc-numerado__titulo {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.mud-button-root.mud-button.kc-numerado__remover {
  flex: none;
  min-height: 32px;
  margin-right: 0;
  padding: 4px 8px;
  font-size: 13px;
}

/* Listas de meia largura no cartão: o texto inteiro ("No aplicativo") cabe com a seta menor e mais perto da borda. */
.kc-numerado .kc-campo--lista .mud-input.mud-input-outlined.mud-input-adorned-end {
  padding-right: 4px;
}

.kc-numerado .kc-campo--lista .mud-input > input.mud-input-root.mud-input-root-outlined {
  padding-left: 12px;
}

.kc-numerado .kc-campo--lista .mud-input-adornment-end {
  margin-right: 6px;
}

.kc-numerado .kc-campo--lista .mud-input-adornment-end .mud-icon-root {
  width: 20px;
  height: 20px;
}

.kc-numerado__remover .icone {
  font-size: 11px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-400);
}

.kc-numerado .campo-linha {
  gap: 12px;
}

.kc-cartao.kc-numerado .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined {
  min-height: 46px;
}

/* Total numa faixa sálvia escura, com o valor em Caprasimo no meio do texto (figura 31). */
.kc-faixa-total {
  margin: 0 0 16px;
  padding: 12px 18px;
  border-radius: var(--kc-raio-cartao);
  background: var(--kc-accent2-800);
  color: var(--kc-accent2-100);
  font-size: 15px;
  line-height: 30px;
  letter-spacing: 0;
}

.kc-faixa-total strong {
  color: var(--kc-fundo);
  font-weight: 700;
}

.kc-faixa-total strong.kc-faixa-total__valor {
  font-family: var(--kc-fonte-titulo);
  font-size: 21px;
  font-weight: 400;
}

/* Números do cartão de destaque: três colunas iguais, o valor em negrito e a legenda clara embaixo (figura 30). */
.kc-hero__numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 6px;
  margin: 12px 0 0;
}

.kc-hero__numeros > p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 0;
}

.kc-hero__numeros strong {
  color: var(--kc-fundo);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  white-space: nowrap;
}

.kc-hero__numeros small {
  color: var(--kc-accent2-100);
  font-size: 12px;
  line-height: 16px;
}

.kc-hero__valor.kc-hero__valor--negativo {
  color: var(--kc-accent-300);
}

/* O círculo dos destaques sálvia destas telas tem 158 px (figuras 30, 33 e 36). */
.kc-motorista__lucro::after,
.kc-imposto__resumo::after,
.kc-vale__veredito::after {
  width: 158px;
  height: 158px;
}

/* Tabela de valores (figuras 33 e 34): cabeçalho pequeno em negrito, números à direita, linha do total em negrito; --linhas põe a
   divisória embaixo de cada linha. As colunas têm largura fixa (o total grande quebra em duas linhas, como na figura 34). */
.kc-tabela {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--kc-texto);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}

.kc-tabela th,
.kc-tabela td {
  padding: 10.5px 0;
  font-weight: 400;
  text-align: right;
  vertical-align: top;
}

.kc-tabela th:first-child,
.kc-tabela td:first-child {
  text-align: left;
}

.kc-tabela thead th {
  padding: 0 0 13px;
  border-bottom: 1px solid var(--kc-divisor);
  color: #645c50;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 14px;
}

.kc-tabela tfoot th,
.kc-tabela tfoot td,
.kc-tabela .kc-tabela__atual td {
  font-weight: 700;
}

.kc-tabela--linhas {
  font-size: 13px;
}

.kc-tabela--linhas th:not(:first-child),
.kc-tabela--linhas td:not(:first-child) {
  padding-left: 10px;
}

.kc-tabela--linhas tbody td,
.kc-tabela--linhas tfoot th,
.kc-tabela--linhas tfoot td {
  padding: 10px 0 9px;
  border-bottom: 1px solid var(--kc-divisor);
}

.kc-tabela--linhas tfoot th,
.kc-tabela--linhas tfoot td {
  line-height: 20.5px;
}

/* Selo e círculo creme do que ainda não foi cadastrado (CartaoVencimento com SemCadastro, figura 35). */
.kc-status--creme {
  background: #eee7db;
  color: var(--kc-texto);
}

.kc-vencimento--sem > .kc-lembrete__avatar {
  background: #f9f4ed;
}

.kc-vencimento--sem > .kc-lembrete__avatar .icone {
  --icone-primaria: var(--kc-accent-600);
  --icone-secundaria: var(--kc-accent2-500);
}

/* O parágrafo a mais do cartão de vencimento (a dica do item). */
.kc-vencimento__detalhe {
  margin: 8px 0 0;
  color: #474238;
  font-size: 13px;
  line-height: 17px;
}

/* Data e hora compactas (CampoDataHora Compacto): "19/10 08:00" numa pílula de meia largura, sem os ícones (figura 31). */
.kc-campo--datahora-compacto .kc-campo-datahora {
  padding: 0 12px 0 13px;
}

/* "19/10" tem 39 px em 16 px: com 4 px a mais, a hora vem logo depois, como se fosse um espaço. */
.kc-campo--datahora-compacto .kc-campo-datahora__data {
  flex: 0 0 auto;
  width: 43px;
}

.kc-campo--datahora-compacto .kc-campo-datahora__hora {
  flex: 1 1 0;
}

.kc-campo--datahora-compacto .kc-campo-datahora .mud-input-root {
  padding: 12px 0;
  cursor: pointer;
}

/* ---------- tela 30: painel do motorista de aplicativo ---------- */

/* Título em duas linhas com o "Fechar o dia" alinhado à primeira; o botão tem 41 px e o texto de 13 px (figura 30). */
.cabecalho-pagina.kc-motorista__cabecalho {
  align-items: flex-start;
}

.kc-motorista__cabecalho .mud-button-root.mud-button.kc-botao-novo {
  min-height: 41px;
  margin: -3px 0 0;
  padding: 6px 15px 6px 17px;
  font-size: 13px;
}

.kc-motorista__cabecalho .kc-botao-novo .mud-button-label {
  gap: 9px;
}

.kc-motorista__cabecalho .kc-botao-novo .icone {
  font-size: 11px;
}

.campo.kc-motorista__periodos {
  margin-bottom: 17px;
}

.kc-motorista__periodos .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  min-height: 42px;
  font-weight: 700;
}

.kc-motorista__darf {
  margin: 0 0 16px;
  align-items: flex-start;
  letter-spacing: 0;
}

.kc-motorista__darf-corpo {
  flex: 1;
  min-width: 0;
}

.kc-motorista__darf-corpo p {
  margin: 2px 0 10px;
  font-size: 14px;
  line-height: 1.45;
}

.kc-motorista__darf-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
}

.kc-hero.kc-motorista__lucro {
  display: block;
  padding: 21px 20px 20px;
  color: var(--kc-accent2-100);
  letter-spacing: 0;
}

.kc-motorista__lucro-rotulo {
  display: block;
  font-size: 13px;
  line-height: 18px;
}

.kc-motorista__lucro .kc-hero__valor {
  display: block;
  margin: 2px 0 0;
  color: var(--kc-fundo);
  font-size: 40px;
  line-height: 44px;
}

.kc-motorista__lucro-texto,
.kc-motorista__lucro-nota {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 18.5px;
}

.kc-motorista__lucro-nota {
  color: var(--kc-accent2-300);
}

/* Cartões do painel: 17 px entre eles, o rótulo de seção de 11,5 px e a nota cinza de 13 px. */
.kc-cartao.kc-motorista__cartao {
  margin-top: 17px;
  padding: 19px 18px 18px;
  letter-spacing: 0;
}

.kc-motorista__cartao > .kc-rotulo-secao,
.kc-motorista__cartao .kc-cabecalho-secao .kc-rotulo-secao {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.125em;
  line-height: 14px;
}

.kc-motorista__nota {
  margin: 10px 0 0;
  color: #645c50;
  font-size: 13px;
  line-height: 18.5px;
}

.kc-motorista__meta .kc-cabecalho-secao {
  align-items: center;
  margin: 0 0 10px;
}

.kc-motorista__meta .kc-cabecalho-secao .kc-rotulo-secao {
  margin: 0;
}

.kc-motorista__meta-percentual {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.kc-motorista__meta .kc-motorista__nota {
  margin-top: 10px;
}

.kc-cartao.kc-motorista__custo {
  background: var(--kc-accent-100);
}

.kc-motorista__custo > .kc-rotulo-secao {
  margin-bottom: 9px;
  color: var(--kc-accent-800);
}

.kc-motorista__custo-valor {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;
}

.kc-motorista__custo-texto {
  margin: 9px 0 0;
  color: #474238;
  font-size: 13px;
  line-height: 19.5px;
}

.kc-motorista__dias .kc-colunas {
  margin-top: 7px;
}

.kc-motorista__reserva .kc-motorista__nota {
  margin-top: 9px;
}

.kc-motorista__reserva-valor {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}

.kc-motorista__reserva-valor .kc-numero {
  font-size: 34px;
  line-height: 40px;
}

.kc-motorista__reserva-valor small {
  font-size: 13.5px;
}

.kc-motorista__secao {
  margin-top: 19px;
}

.kc-motorista__secao > .kc-rotulo-secao {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.125em;
  line-height: 14px;
}

.kc-motorista__secao > .kc-rotulo-secao + .kc-lista-simples {
  margin-top: -4px;
}

.kc-lista-cartoes.kc-motorista__atalhos {
  gap: 8px;
}

.kc-motorista__vazio {
  margin-bottom: 4px;
}

/* ---------- tela 31: fechar o dia ---------- */

.kc-dica.kc-fechar__editando {
  align-items: center;
  margin: 0 0 16px;
}

.kc-atalhos.kc-fechar__copiar,
.kc-atalhos.kc-fechar__outro {
  margin: 0 0 16px;
}

.kc-fechar__copiar .mud-button-root.mud-button,
.kc-fechar__outro .mud-button-root.mud-button {
  min-height: 41px;
  padding: 6px 18px;
}

.kc-fechar__copiar .icone,
.kc-fechar__outro .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-fechar__copiar + .kc-titulo-secao {
  margin-top: 21px;
}

.kc-titulo-secao + .kc-intro {
  margin-top: -2px;
  font-size: 14px;
  line-height: 21.5px;
}

/* As datas da jornada lado a lado, cada uma em meia largura, e a dica embaixo da segunda. */
.campo-linha.kc-fechar__horario {
  gap: 10px;
}

/* Na edição, com o Excluir no rodapé, "Fechar o dia" continua numa linha só. */
.kc-acoes-formulario > .mud-button-root.mud-button.kc-fechar__acao {
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

/* A explicação do Sim/Não logo embaixo dos botões (figuras 31 e 36). */
.kc-fechar__horario-pergunta .sim-nao .campo.campo--segmentado,
.kc-vale__tipo .sim-nao .campo.campo--segmentado {
  margin-bottom: 5px;
}

.kc-fechar__horario-pergunta .sim-nao .campo__dica,
.kc-vale__tipo .sim-nao .campo__dica {
  margin-bottom: 0;
}

/* ---------- tela 32: importar ganhos por foto ---------- */

/* Imagem escolhida: "Trocar a imagem" e "Ler os ganhos" lado a lado, cada um numa linha (com 15 px e a folga de 20 px quebravam). */
.kc-ganhos__foto .kc-recibo__acoes > .mud-button-root.mud-button,
.kc-ganhos__foto .kc-recibo__acoes > .mud-button-root.mud-button.kc-acao-principal {
  flex: 1 1 0;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 14px;
  white-space: nowrap;
}

.kc-ganhos__lido {
  margin: 0 0 16px;
}

.kc-ganhos__lido > .kc-titulo-secao {
  margin-top: 0;
}

.kc-ganhos__dado {
  margin: 0 0 6px;
  color: #474238;
  font-size: 14px;
  line-height: 20px;
}

.kc-atencao.kc-ganhos__aviso {
  margin: 0 0 16px;
}

/* ---------- tela 33: estimativa do imposto (Carnê-Leão) ---------- */

.kc-navegacao-periodo + .kc-hero.kc-imposto__resumo {
  margin-top: -2px;
}

.kc-hero.kc-imposto__resumo {
  display: block;
  padding: 20px 20px 20px;
  color: var(--kc-accent2-100);
  letter-spacing: 0;
}

.kc-imposto__rotulo {
  display: block;
  font-size: 13px;
  line-height: 18px;
}

.kc-imposto__resumo .kc-hero__valor {
  display: block;
  margin: 10px 0 0;
  color: var(--kc-fundo);
  font-size: 42px;
  line-height: 46px;
}

.kc-imposto__texto {
  margin: 7.5px 0 0;
  font-size: 14px;
  line-height: 19px;
}

.kc-imposto__secao {
  letter-spacing: 0;
}

.kc-imposto__secao > .kc-titulo-secao {
  margin: 23px 0 17px;
}

.kc-cartao.kc-imposto__conta {
  padding: 2px 18px 4px;
}

.kc-imposto__conta .kc-dados > div {
  padding: 12px 0 11.5px;
  font-size: 14px;
  line-height: 17.5px;
}

.kc-imposto__conta .kc-dados .kc-imposto__total dt {
  font-weight: 700;
}

.kc-imposto__nota {
  margin: 15px 0 0;
  color: #645c50;
  font-size: 13px;
  line-height: 18px;
}

.kc-imposto__cartao p {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
}

.kc-imposto__cartao p + p {
  margin-top: 11px;
}

.kc-imposto__cartao p.kc-imposto__nota,
.kc-imposto__cartao p.kc-imposto__fonte {
  color: #645c50;
  font-size: 13px;
  line-height: 17.5px;
}

.mud-button-root.mud-button.kc-imposto__pago {
  margin-top: 12px;
}

.kc-cartao.kc-imposto__nao-abate {
  padding: 17px 18px 18px;
  background: var(--kc-accent-100);
}

.kc-atencao.kc-imposto__entregas {
  margin: 18px 0 0;
}

.kc-cartao.kc-imposto__ano {
  padding: 18px 18px 17px;
}

/* A linha do mês sobressai 8 px para cada lado, numa pílula sálvia clara (figura 33). */
.kc-imposto__ano .kc-tabela {
  width: calc(100% + 16px);
  margin: 0 -8px;
}

.kc-imposto__ano .kc-tabela th:first-child,
.kc-imposto__ano .kc-tabela td:first-child {
  padding-left: 8px;
}

.kc-imposto__ano .kc-tabela th:last-child,
.kc-imposto__ano .kc-tabela td:last-child {
  padding-right: 8px;
}

.kc-imposto__ano .kc-tabela thead th {
  border-bottom: 0;
  background: linear-gradient(var(--kc-divisor), var(--kc-divisor)) no-repeat;
  background-size: 100% 1px;
  background-position: left bottom;
}

.kc-imposto__ano .kc-tabela thead th:first-child {
  background-size: calc(100% - 8px) 1px;
  background-position: right bottom;
}

.kc-imposto__ano .kc-tabela thead th:last-child {
  background-size: calc(100% - 8px) 1px;
  background-position: left bottom;
}

.kc-imposto__ano .kc-tabela__mes {
  width: 46%;
}

.kc-imposto__ano .kc-tabela__recebido {
  width: 25.5%;
}

.kc-tabela .kc-tabela__atual td {
  background: var(--kc-accent2-100);
}

.kc-tabela .kc-tabela__atual td:first-child {
  border-radius: 14px 0 0 14px;
}

.kc-tabela .kc-tabela__atual td:last-child {
  border-radius: 0 14px 14px 0;
}

.kc-imposto__ano .kc-imposto__nota {
  margin-top: 9px;
}

.kc-atalhos.kc-imposto__acoes {
  gap: 10px;
  margin: 16px 0 16px;
}

.kc-imposto__acoes .mud-button-root.mud-button {
  min-height: 42px;
  padding: 6px 17px 6px 18px;
  font-size: 14px;
}

.kc-imposto__acoes .mud-button-root.kc-botao .mud-button-label {
  gap: 10px;
}

.kc-imposto__acoes .mud-button-root .icone {
  font-size: 11px;
}

.kc-imposto__acoes .mud-button-outlined .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-imposto__aviso {
  margin: 0;
  color: #645c50;
  font-size: 13px;
  line-height: 17.5px;
  letter-spacing: 0;
}

/* ---------- tela 34: comprovante de renda ---------- */

.campo.kc-comprovante__periodo {
  margin-bottom: 16px;
}

.kc-cartao.kc-comprovante__previa {
  margin: 4px 0 16px;
  padding: 17px 16px 10px;
}

.kc-comprovante__previa .kc-tabela__mes {
  width: 16%;
}

.kc-comprovante__acoes {
  display: flex;
}

.kc-comprovante__acoes > .mud-button-root.mud-button {
  min-height: 50px;
  padding: 8px 24px 8px 22px;
  font-size: 15px;
}

.kc-comprovante__vazio {
  margin: 4px 0 16px;
  color: #645c50;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}

/* ---------- tela 35: documentos do motorista ---------- */

.kc-intro.kc-checklist__intro {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 21px;
}

.kc-checklist__resumo {
  margin: 0 0 17px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}

.kc-checklist__resumo strong {
  font-weight: 700;
}

.kc-checklist .kc-lembrete__titulo {
  margin-top: -3px;
  font-size: 15px;
  line-height: 19px;
}

.kc-checklist .kc-lembrete__resumo {
  margin-top: 8px;
  font-size: 13px;
}

.kc-checklist .kc-lembrete__cabeca .kc-status {
  padding: 4px 11px;
}

/* As ações em duas linhas: Renovar e Abrir em cima, "Tirar da lista" sozinho embaixo. */
.kc-checklist .kc-lembrete__acoes {
  flex-wrap: wrap;
  row-gap: 4px;
}

.kc-checklist__tirar {
  flex: 0 0 100%;
  display: flex;
}

.kc-checklist__tirar > .mud-button-root.mud-button {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 13px;
}

.kc-checklist__vazio {
  margin: 0;
  color: #645c50;
  font-size: 14px;
  line-height: 20px;
}

.kc-secao-lista.kc-checklist__acrescentar {
  margin-top: 0;
}

.kc-checklist__acrescentar > .kc-titulo-secao {
  margin: 23px 0 15px;
}

.kc-checklist__acrescentar > .kc-titulo-secao > .icone {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-cartao.kc-checklist__novo {
  padding: 20px 18px 18px;
}

.kc-checklist__acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 2px;
}

.kc-checklist__acoes > .mud-button-root.mud-button.mud-button-text {
  margin-left: -2px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 13px;
}

.kc-checklist__acoes > .mud-button-root.mud-button.mud-button-filled {
  min-height: 42px;
  padding: 6px 17px 6px 19px;
  font-size: 14px;
}

.kc-checklist__acoes > .mud-button-root.kc-botao.mud-button-filled .mud-button-label {
  gap: 9px;
}

/* ---------- tela 36: vale a pena a corrida ---------- */

/* "Rota de entregas" numa linha só: as opções do tamanho do texto, em 14 px. */
.kc-vale__tipo .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
}

.kc-vale__tipo .kc-segmentado__conteudo {
  white-space: nowrap;
}

.kc-vale__tipo .sim-nao__pergunta {
  font-weight: 700;
}

/* Veredito: destaque sálvia 700 (vale a pena), terracota claro (no limite) ou terracota (não vale). */
.kc-hero.kc-vale__veredito {
  display: block;
  margin: -2px 0 15px;
  padding: 20px 20px 19px;
  background: var(--kc-accent2-700);
  color: var(--kc-accent2-100);
  letter-spacing: 0;
}

.kc-hero.kc-vale__veredito::after {
  top: -48px;
  background: var(--kc-accent2-600);
  opacity: 1;
}

.kc-vale__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--kc-fundo);
  font-family: var(--kc-fonte-titulo);
  font-size: 32px;
  line-height: 40px;
}

.kc-vale__sinal {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kc-fundo);
  font-size: 16px;
}

.kc-vale__sinal .icone {
  --icone-primaria: var(--kc-accent2-800);
  --icone-secundaria: var(--kc-accent2-300);
  --icone-secundaria-opacidade: 1;
}

.kc-vale__veredito .kc-hero__numeros {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 13px;
}

.kc-vale__veredito .kc-hero__numeros > p {
  gap: 5px;
}

.kc-vale__veredito .kc-hero__numeros strong {
  font-size: 18px;
  line-height: 22px;
}

.kc-vale__veredito .kc-hero__numeros small {
  font-size: 13px;
}

.kc-vale__custo {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 20px;
}

.kc-hero.kc-vale__veredito--amarelo {
  background: var(--kc-accent-200);
  color: var(--kc-accent-800);
}

.kc-hero.kc-vale__veredito--amarelo::after {
  background: var(--kc-accent-300);
}

.kc-vale__veredito--amarelo .kc-vale__titulo,
.kc-vale__veredito--amarelo .kc-hero__numeros strong {
  color: var(--kc-accent-800);
}

.kc-vale__veredito--amarelo .kc-hero__numeros small {
  color: var(--kc-accent-700);
}

.kc-vale__veredito--amarelo .kc-vale__sinal .icone {
  --icone-primaria: var(--kc-accent-800);
  --icone-secundaria: var(--kc-accent-300);
}

.kc-hero.kc-vale__veredito--vermelho {
  background: var(--kc-primaria);
  color: var(--kc-accent-100);
}

/* "Não vale a pena" numa linha só, ao lado do círculo. */
.kc-vale__veredito--vermelho .kc-vale__titulo {
  font-size: 28px;
}

.kc-hero.kc-vale__veredito--vermelho::after {
  background: #e08b54;
}

.kc-vale__veredito--vermelho .kc-hero__numeros small {
  color: var(--kc-accent-100);
}

.kc-vale__veredito--vermelho .kc-vale__sinal .icone {
  --icone-primaria: var(--kc-accent-700);
  --icone-secundaria: var(--kc-accent-300);
}

.kc-atencao.kc-vale__sem-custo {
  margin: 2px 0 15px;
}

.kc-cartao.kc-vale__custo-km {
  padding: 20px 18px 20px;
  letter-spacing: 0;
}

.kc-vale__custo-km > .kc-titulo-secao {
  margin: 0 0 13px;
}

.kc-vale__custo-km > .kc-titulo-secao > .icone {
  --icone-primaria: var(--kc-accent-600);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-vale__texto {
  margin: 0 0 14px;
  color: var(--kc-texto);
  font-size: 15px;
  line-height: 21.5px;
}

.kc-vale__texto strong {
  font-weight: 700;
}

.kc-vale__texto.kc-vale__minimo {
  margin: 14px 0 0;
  color: #474238;
  font-size: 14px;
  line-height: 19.5px;
}

.kc-link.kc-vale__ajustar {
  display: block;
  width: fit-content;
  font-size: 14px;
  line-height: 20px;
}

/* ==========================================================================
   R3 · lote E: telas 26 a 29 (computador de bordo) e 46 a 50 (viagens e mapas offline)
   ========================================================================== */

/* ---------- padrões (lote E): botões creme, escuro e de excluir, cartão escuro, passos numerados, selo com ponto, ponto gravando, lista de pontos, seção com rótulo, lista de dados ---------- */

/* Botão de contorno com o fundo creme (figuras 27, 49 e 50: "Abrir o painel ao vivo", "Compartilhar a conversa", "Guardar só o
   resumo", "Baixar"): a borda do divisor, o texto escuro e o ícone escuro com o segundo tom sálvia; 41 px e texto de 14 px. */
.mud-button-root.mud-button.mud-button-outlined.kc-botao--creme {
  min-height: 41px;
  padding: 6px 16px 6px 14px;
  background: var(--kc-fundo);
  border-color: var(--kc-divisor) !important;
  color: var(--kc-texto) !important;
  font-size: 14px;
}

.mud-button-root.mud-button.kc-botao--creme .mud-button-label {
  gap: 7px;
}

.mud-button-root.mud-button.kc-botao--creme .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

/* Botão cheio escuro ("Parar e salvar", figura 48). */
.mud-button-root.mud-button.mud-button-filled.kc-botao--escuro,
.mud-button-root.mud-button.mud-button-filled.kc-botao--escuro:hover,
.mud-button-root.mud-button.mud-button-filled.kc-botao--escuro:focus-visible {
  background: var(--kc-texto) !important;
  color: var(--kc-fundo) !important;
}

.mud-button-root.mud-button.kc-botao--escuro .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent2-400);
  --icone-secundaria-opacidade: 1;
}

/* Ação de excluir em texto ("Esquecer este adaptador", "Excluir viagem"): terracota escuro com a lixeira sálvia. */
.mud-button-root.mud-button.mud-button-text.kc-botao--excluir {
  min-height: 32px;
  padding: 4px 8px 4px 4px;
  color: var(--kc-accent-700) !important;
  font-size: 14px;
}

.mud-button-root.mud-button.kc-botao--excluir .mud-button-label {
  gap: 8px;
}

.mud-button-root.mud-button.kc-botao--excluir .icone {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-300);
  --icone-secundaria-opacidade: 1;
}

/* Cartão escuro (consumo do painel, figura 28; gravação ao vivo, figura 48); --circulo põe o círculo sálvia 800 no canto. */
.kc-cartao.kc-cartao--escuro {
  background: var(--kc-texto);
  color: var(--kc-fundo);
}

.kc-cartao.kc-cartao--circulo {
  position: relative;
  overflow: hidden;
}

.kc-cartao--circulo::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--kc-accent2-800);
  pointer-events: none;
}

.kc-cartao--circulo > * {
  position: relative;
  z-index: 1;
}

/* Passos numerados num cartão (figura 26): o número no círculo sálvia escuro de 28 px e o texto ao lado. */
.kc-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  letter-spacing: 0;
}

.kc-passos > li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  color: var(--kc-texto);
  font-size: 13.75px;
  line-height: 20.6px;
}

.kc-passos__numero {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kc-accent2-700);
  color: var(--kc-fundo);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* Selo com o ponto na frente ("Lendo o carro", figura 28). */
.kc-status.kc-status--ponto {
  gap: 7px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.kc-status--ponto::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kc-accent2-600);
}

/* Ponto terracota que pulsa ("Gravando agora", figura 48), com o halo claro. */
.kc-ponto-gravando {
  flex: none;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kc-primaria);
  box-shadow: 0 0 0 3px var(--kc-accent-200);
  animation: kc-pulso 1.4s ease-in-out infinite;
}

/* Lista com o ponto terracota de 8 px (as causas da falha, figura 29; a dica da bateria e o consentimento das viagens). */
.kc-lista-pontos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  letter-spacing: 0;
}

.kc-lista-pontos > li {
  position: relative;
  padding-left: 18px;
  color: var(--kc-texto);
  font-size: 13.75px;
  line-height: 20.5px;
}

.kc-lista-pontos > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kc-primaria);
}

/* Seção com o rótulo em maiúsculas fora do cartão (MOTOR, O QUE O CARRO RESPONDEU, NÚMEROS…): 52 px entre os cartões. */
.kc-obd__secao {
  margin-top: 22px;
}

.kc-obd__secao > .kc-rotulo-secao {
  margin: 0 0 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 14px;
}

/* Lista de dados num cartão (kc-dados com LinhaDado): o valor curto não quebra; o longo vai até a metade da linha e quebra. */
.kc-cartao.kc-obd__lista {
  padding: 3px 18px 4px;
}

.kc-dados.kc-obd__dados > div {
  padding: 10px 0 10.5px;
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: 0;
}

.kc-dados.kc-obd__dados dd {
  flex-shrink: 0;
}

.kc-dados > .kc-dados__alerta dd {
  color: var(--kc-accent-700);
}

.kc-obd__lista > .kc-obd__nota {
  margin: 12px 0 10px;
}

/* Nota de rodapé de cartão (13 px, cinza quente). */
.kc-obd__nota {
  margin: 14px 0 0;
  color: #645c50;
  font-size: 13px;
  line-height: 18.5px;
  letter-spacing: 0;
}

/* Rótulo de campo com ícone (CampoTexto IconeRotulo: partida e destino, figura 47). */
.kc-campo__rotulo.kc-campo__rotulo--icone {
  display: flex;
  align-items: center;
  gap: 7px;
}

.icone.kc-campo__icone-rotulo {
  flex: none;
  font-size: 11px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
}

/* ---------- telas 26 e 27: conectar o adaptador OBD e adaptador conectado ---------- */

.kc-obd__aviso {
  margin: 0 0 14px;
}

.kc-obd__aviso > .icone {
  flex: none;
  margin-top: 3px;
}

.kc-cartao.kc-obd__conectar {
  padding: 20px 18px 19px;
}

.kc-obd__conectar > .kc-rotulo-secao {
  margin: 0 0 17px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 14px;
}

.kc-obd__conectar > .kc-obd__nota {
  margin-top: 14px;
}

/* O botão grande do cartão ("Procurar adaptadores", "Testar o carro de novo"): 52 px e texto de 15 px. */
.kc-obd__conectar > .mud-button-root.mud-button,
.kc-obd__adaptador > .mud-button-root.mud-button {
  min-height: 51px;
  font-size: 15px;
}

.kc-obd__conectar > .mud-button-root.mud-button {
  margin-top: 13px;
}

.kc-obd__secao > .kc-obd__nota {
  margin-top: 12px;
}

.kc-obd__secao:has(> .kc-obd__achados) {
  margin-top: 18px;
}

/* Adaptador encontrado: cartão em pílula com o círculo sálvia clara, o nome, o sinal e "Usar este". */
.kc-lista-cartoes.kc-obd__achados {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kc-cartao.kc-obd__achado {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 14px 14px 14px 12px;
  border-radius: var(--kc-raio-hero);
  letter-spacing: 0;
}

.kc-obd__achado > .kc-avatar {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.icone.kc-obd__icone-salvia {
  --icone-primaria: var(--kc-accent2-600);
  --icone-secundaria: var(--kc-accent2-400);
}

.kc-obd__achado-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kc-obd__achado-texto strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.kc-obd__achado-texto small {
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 17px;
}

.mud-button-root.mud-button.kc-obd__usar {
  flex: none;
  min-height: 40px;
  padding: 6px 17px;
  font-size: 14px;
}

/* Adaptador conectado: o círculo sálvia escuro com o nome, a lista de dados, "Testar o carro", o painel e "Esquecer". */
.kc-cartao.kc-obd__adaptador {
  padding: 18px 18px 22px;
}

.kc-obd__cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.kc-avatar.kc-obd__avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.kc-obd__cabeca > .kc-rotulo-secao {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 14px;
}

.kc-obd__adaptador > .kc-dados {
  margin-bottom: 12px;
}

/* No cartão do adaptador as linhas têm 38 px; nas listas (O QUE O CARRO RESPONDEU, VALORES LIDOS AGORA), 41,5 px. */
.kc-obd__adaptador .kc-dados.kc-obd__dados > div {
  padding: 10px 0 9.5px;
}

.kc-obd__lista .kc-dados.kc-obd__dados > div {
  padding: 11.5px 0;
}

.kc-obd__adaptador > .kc-obd__nota {
  margin-top: 13px;
}

.kc-obd__progresso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
  color: var(--kc-texto-suave);
  font-size: 14px;
}

.kc-obd__acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
}

.kc-cartao.kc-obd__motor {
  padding: 17px 18px 14px;
}

.kc-obd__motor .kc-campo:not(.kc-campo--total) {
  margin-bottom: 0;
}

.kc-cartao.kc-obd__motor .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined {
  min-height: 48px;
}

.kc-obd__motor .campo__dica {
  display: block;
  margin-top: 2px;
  line-height: 18px;
}

.kc-cartao.kc-obd__conversa {
  padding: 20px 18px 18px;
}

.kc-obd__conversa > p {
  margin: 0 0 14px;
  color: var(--kc-texto);
  font-size: 13.75px;
  line-height: 20.5px;
  letter-spacing: 0;
}

/* ---------- tela 28: computador de bordo ao vivo ---------- */

.kc-painel__estado {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 17px;
  color: var(--kc-texto);
  font-size: 14.5px;
  letter-spacing: 0;
}

.kc-painel__medidores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

/* O ".kc-cartao + .kc-cartao" global empurrava o segundo medidor 14 px para baixo. */
.kc-painel__medidores > .kc-cartao + .kc-cartao {
  margin-top: 0;
}

.kc-cartao.kc-painel__medidor {
  display: flex;
  justify-content: center;
  padding: 21px 8px 15px;
}

.kc-painel__medidor .kc-medidor__numero {
  font-size: 27px;
}

.kc-painel__medidor .kc-medidor__unidade {
  margin-top: 3px;
}

.kc-painel__medidor .kc-medidor__rotulo {
  margin-top: 9px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 18px;
}

/* O consumo no cartão escuro: o número grande em Caprasimo, a unidade em sálvia clara e os quatro números em duas colunas. */
.kc-cartao.kc-painel__consumo {
  padding: 22px 20px 18px;
  letter-spacing: 0;
}

.kc-painel__agora {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
}

.kc-painel__agora .kc-numero {
  font-size: 52px;
  line-height: 54px;
}

.kc-painel__unidade {
  color: var(--kc-accent2-300);
  font-size: 18.5px;
  font-weight: 600;
}

.kc-painel__legenda {
  margin: 2px 0 0;
  color: rgba(245, 234, 216, 0.82);
  font-size: 12.5px;
  line-height: 16px;
}

.kc-painel__numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
  margin: 18px 0 0;
}

.kc-painel__numeros > p {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  min-width: 0;
}

.kc-painel__numeros strong {
  color: var(--kc-fundo);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.kc-painel__numeros small {
  color: rgba(245, 234, 216, 0.82);
  font-size: 11.5px;
  line-height: 15px;
}

.kc-painel__estimativa {
  margin: 14px 0 0;
  color: rgba(245, 234, 216, 0.82);
  font-size: 13px;
  line-height: 18.5px;
}

.kc-painel__cilindrada {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(245, 234, 216, 0.1);
  font-size: 13px;
  line-height: 19px;
}

.kc-painel__cilindrada a {
  color: var(--kc-accent-300);
}

/* As listas do painel têm linhas mais altas (47 px) e o valor pode ir longe ("14,2 V · carregando normalmente"). */
.kc-cartao.kc-painel__lista .kc-dados.kc-obd__dados > div {
  padding: 14.25px 0;
}

.kc-painel__lista .kc-dados.kc-obd__dados dd {
  flex-shrink: 1;
  max-width: 76%;
}

.kc-cartao.kc-painel__lista {
  padding: 4px 18px 4px;
}

.kc-painel__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 15px 0 16px;
}

.kc-painel__acoes > .mud-button-root.mud-button.kc-painel__botao {
  min-height: 39px;
  padding: 6px 16px 6px 16px;
  font-size: 14px;
}

.kc-painel__botao .mud-button-label {
  gap: 7px;
}

.kc-painel__botao .icone {
  --icone-primaria: var(--kc-accent2-600);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-cartao.kc-painel__aviso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.kc-painel__aviso > .mud-button-root.mud-button.mud-button-filled-size-large {
  align-self: stretch;
}

.kc-painel__mensagem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 14.5px;
  line-height: 21px;
}

/* ---------- tela 29: diagnóstico de falhas ---------- */

.kc-obd__falhas {
  margin-top: 30px;
}

.kc-obd__falhas > .kc-titulo-secao {
  margin: 0 0 18px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
}

.kc-obd__falhas > .kc-titulo-secao > .icone {
  --icone-primaria: var(--kc-accent-700);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-lista-cartoes.kc-falhas {
  gap: 14px;
}

.kc-falhas__aviso {
  margin-top: 14px;
}

/* Cada falha num cartão: o código em Caprasimo, o tipo, o selo da gravidade e o título; aberta, a explicação. Fechada, a que pede
   oficina (ou parar) fica em terracota clara. */
details.kc-cartao.kc-falha {
  padding: 22px 18px 22px;
  letter-spacing: 0;
}

details.kc-falha--oficina:not([open]) {
  background: var(--kc-accent-100);
}

details.kc-falha--pare:not([open]) {
  background: var(--kc-accent-200);
}

.kc-falha__resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 9px;
  list-style: none;
  cursor: pointer;
}

.kc-falha__resumo::-webkit-details-marker {
  display: none;
}

.kc-falha__codigo {
  color: var(--kc-texto);
  font-family: var(--kc-fonte-titulo);
  font-size: 23px;
  line-height: 28px;
}

.kc-falha__tipo {
  color: var(--kc-texto-suave);
  font-size: 14.5px;
  line-height: 20px;
}

.kc-falha__resumo > .kc-status {
  padding: 4px 12px;
  font-size: 12px;
  line-height: 16px;
}

.kc-status.kc-status--pare {
  background: var(--kc-accent-700);
  color: var(--kc-fundo);
}

.kc-falha__titulo {
  flex-basis: 100%;
  color: var(--kc-texto);
  font-size: 15px;
  line-height: 21px;
}

.kc-falha[open] .kc-falha__titulo {
  margin-top: 1px;
  font-weight: 700;
  line-height: 23px;
}

.kc-falha__corpo {
  padding-top: 10px;
}

.kc-falha__corpo > p {
  margin: 0;
  color: var(--kc-texto);
  font-size: 13.75px;
  line-height: 21px;
}

.kc-falha__corpo > p + p {
  margin-top: 14px;
}

.kc-falha__corpo > .kc-falha__orientacao {
  padding: 13px 14px 15px;
  border-radius: 22px;
  background: var(--kc-accent2-100);
}

.kc-falha--oficina .kc-falha__orientacao {
  background: var(--kc-accent-100);
}

.kc-falha--pare .kc-falha__orientacao {
  background: var(--kc-accent-200);
}

.kc-falha__orientacao strong {
  font-weight: 700;
}

.kc-falha__corpo > .kc-falha__nota {
  color: var(--kc-texto-suave);
}

.kc-falha__corpo > .kc-rotulo-secao {
  margin: 20px 0 15px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 14px;
}

/* ---------- tela 46: viagens gravadas ---------- */

.mud-button-root.mud-button.kc-viagens__iniciar {
  min-height: 54px;
  margin: 0 0 14px;
}

.kc-viagens__gravando,
.kc-viagens__aviso {
  margin: 0 0 14px;
}

.kc-viagens__filtros {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 14px;
}

.kc-viagens__filtro.campo {
  margin: 0;
}

.kc-viagens__filtro .kc-chips {
  gap: 8px;
}

.kc-viagens__filtro .kc-chips .mud-chip.kc-chip {
  height: 38px;
  padding: 0 15px 0 16px;
  font-size: 13px;
}

.kc-viagens__filtro .kc-chips .mud-chip .mud-chip-content {
  gap: 7px;
}

.kc-cartao.kc-viagens__resumo {
  padding: 20px 18px 18px;
  letter-spacing: 0;
}

.kc-viagens__numeros {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.kc-viagens__numeros > p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  min-width: 0;
}

.kc-viagens__numeros > p:last-child {
  align-items: flex-end;
}

.kc-viagens__numeros strong {
  color: var(--kc-texto);
  font-size: 18px;
  line-height: 24px;
  white-space: nowrap;
}

.kc-viagens__numeros small {
  color: var(--kc-texto-suave);
  font-size: 12px;
  line-height: 16px;
}

.kc-viagens__divisao {
  display: flex;
  height: 10px;
  margin: 15px 0 0;
  border-radius: var(--kc-raio-pilula);
  overflow: hidden;
  background: var(--kc-fundo);
}

.kc-viagens__parte {
  display: block;
  flex: 0 1 0;
  min-width: 4px;
}

.kc-viagens__parte--pessoal {
  background: var(--kc-accent2-500);
}

.kc-viagens__parte--trabalho {
  background: var(--kc-primaria);
}

.kc-viagens__legenda {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 15px 0 0;
  color: var(--kc-texto);
  font-size: 13px;
  line-height: 17px;
}

.kc-viagens__legenda strong {
  font-weight: 700;
}

.kc-lista-cartoes.kc-viagens__lista {
  gap: 14px;
  margin-top: 14px;
}

.kc-cartao.kc-viagens__vazio {
  margin-top: 4px;
}

/* Uma viagem da lista (CartaoViagem): círculo sálvia 200 (pessoal) ou terracota 200 (trabalho) com a estrada, os textos e a seta. */
.kc-cartao.kc-viagem {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 91px;
  padding: 14px 18px 14px 12px;
  color: var(--kc-texto);
  text-decoration: none;
  letter-spacing: 0;
}

.kc-avatar.kc-viagem__avatar {
  width: 40px;
  height: 40px;
  font-size: 13.5px;
}

.kc-viagem--pessoal .kc-viagem__avatar {
  background: var(--kc-accent2-200);
}

.kc-viagem--trabalho .kc-viagem__avatar {
  background: var(--kc-accent-200);
}

.kc-viagem__avatar .icone {
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

.kc-viagem--pessoal .kc-viagem__avatar .icone {
  --icone-primaria: var(--kc-accent2-800);
}

.kc-viagem--trabalho .kc-viagem__avatar .icone {
  --icone-primaria: var(--kc-accent-800);
}

.kc-viagem__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 12px;
}

.kc-viagem__texto strong {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 21px;
  font-variant-numeric: tabular-nums;
}

.kc-viagem__trajeto {
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kc-viagem__texto small {
  color: var(--kc-texto-suave);
  font-size: 12px;
  line-height: 17px;
}

.kc-status.kc-viagem__selo {
  margin-left: 4px;
  padding: 1px 8px;
  font-size: 11.5px;
}

.icone.kc-viagem__seta {
  flex: none;
  font-size: 13px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

/* ---------- telas 47 e 48: gravar viagem (antes de iniciar e em andamento) ---------- */

.kc-gravar__aviso {
  margin: 0 0 14px;
}

.kc-gravar__aviso > .icone,
.kc-gravar__eventos > .icone {
  flex: none;
  margin-top: 3px;
}

.kc-gravar__classificacao.campo {
  margin: 0 0 16px;
}

.kc-gravar__classificacao .kc-campo__rotulo {
  margin-bottom: 0;
}

/* Os segmentados da tela (classificação e "Guardar a rota"): pílula de 54 px com as opções de 44 e o texto de 14 px. */
.kc-gravar__classificacao .mud-toggle-group.kc-segmentado,
.kc-gravar__rota .mud-toggle-group.kc-segmentado {
  padding: 5px;
}

.kc-gravar__classificacao .kc-segmentado .mud-button-root.mud-button.mud-toggle-item,
.kc-gravar__rota .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  min-height: 44px;
  font-size: 14px;
}

.kc-gravar__classificacao .kc-segmentado .icone {
  --icone-primaria: var(--kc-texto);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-gravar__classificacao .kc-segmentado .mud-toggle-item-selected .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent2-400);
}

.kc-gravar__rota .sim-nao__pergunta {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
}

.kc-gravar__rota .campo.campo--segmentado {
  margin-bottom: 0;
}

.kc-gravar__rota .campo__dica {
  margin: 5px 0 0;
  line-height: 18.5px;
}

.kc-cartao.kc-gravar__enderecos {
  margin-top: 12px;
  padding: 18px 16px 16px;
}

.kc-gravar__campo--destino .icone.kc-campo__icone-rotulo {
  --icone-primaria: var(--kc-accent-600);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-gravar__enderecos .kc-campo:not(.kc-campo--total) {
  margin-bottom: 0;
}

.kc-cartao.kc-gravar__enderecos .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined,
.kc-cartao.kc-gravar__trajeto .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined,
.kc-cartao.kc-viagem-detalhe__classificacao .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined:not(:has(textarea)) {
  min-height: 46px;
}

.kc-gravar__enderecos .campo__dica {
  display: block;
  margin-top: 4px;
}

.mud-button-root.mud-button.kc-gravar__posicao {
  min-height: 30px;
  margin: 8px 0 13px;
  padding: 2px 8px 2px 6px;
  font-size: 13px;
}

.kc-gravar__posicao .icone {
  --icone-primaria: var(--kc-accent-600);
  --icone-secundaria: var(--kc-accent2-500);
}

/* "Para a gravação não ser interrompida": expansível em terracota clara, o ícone de informação e a seta para baixo. */
details.kc-cartao.kc-expansivel.kc-gravar__dica {
  margin: 17px 0 0;
  padding: 0 16px;
  border-radius: var(--kc-raio-hero);
  background: var(--kc-accent-100);
}

details.kc-cartao.kc-expansivel.kc-gravar__dica[open] {
  padding-bottom: 16px;
}

.kc-gravar__dica > .kc-expansivel__titulo {
  min-height: 50px;
  gap: 10px;
  padding: 0 2px;
}

.icone.kc-gravar__dica-icone {
  flex: none;
  font-size: 14px;
  --icone-primaria: var(--kc-accent-800);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-gravar__dica-titulo {
  flex: 1;
  min-width: 0;
  color: var(--kc-accent-800);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 18px;
}

.kc-gravar__dica[open] > .kc-expansivel__titulo .kc-gravar__dica-seta {
  transform: rotate(180deg);
}

.kc-gravar__dica > p {
  margin: 4px 0 12px;
  font-size: 13.75px;
  line-height: 20px;
}

/* Consentimento das viagens (sem figura): o padrão da tela de consentimento do lote A, com a lista de pontos. */
.kc-gravar__regras {
  margin: 0 0 20px;
}

/* Em andamento (figura 48): o ponto, o cartão escuro com a distância, o cronômetro e os números, o mapa e os eventos. */
.subtitulo-pagina.kc-gravar__subtitulo {
  display: flex;
  align-items: center;
  gap: 9px;
}

.kc-cartao.kc-gravar__painel {
  padding: 22px 22px 20px;
  letter-spacing: 0;
}

.kc-gravar__distancia {
  margin: 0;
  color: var(--kc-fundo);
  font-size: 57px;
  line-height: 58px;
}

.kc-gravar__tempo {
  margin: 6px 0 0;
  color: var(--kc-accent2-300);
  font-size: 22.5px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.kc-gravar__numeros {
  display: flex;
  gap: 22px;
  margin: 22px 0 0;
}

.kc-gravar__numeros > p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.kc-gravar__numeros strong {
  color: var(--kc-fundo);
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.kc-gravar__numeros small {
  color: rgba(245, 234, 216, 0.82);
  font-size: 12px;
  line-height: 16px;
}

/* Os avisos da gravação (sem sinal, parado) ficam entre o cartão escuro e o mapa. */
.kc-gravar__alerta {
  margin: 14px 0 0;
}

.kc-gravar__alerta > .icone {
  flex: none;
  margin-top: 3px;
}

.kc-atencao.kc-gravar__eventos {
  align-items: center;
  min-height: 41px;
  margin: 14px 0 0;
  padding: 10px 16px 10px 18px;
  border-radius: var(--kc-raio-cartao);
  color: var(--kc-accent-800);
  font-size: 14px;
  line-height: 20px;
}

.kc-gravar__eventos > .icone {
  margin-top: 0;
  --icone-primaria: var(--kc-accent-700);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-cartao.kc-gravar__trajeto {
  margin-top: 14px;
  padding: 15px 16px 16px;
}

.kc-gravar__trajeto .kc-campo:not(.kc-campo--total) {
  margin-bottom: 0;
}

.kc-gravar__trajeto .campo__dica {
  display: block;
  margin-top: 2px;
}

.kc-gravar__partida {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--kc-texto);
  font-size: 14px;
  line-height: 20px;
}

.icone.kc-gravar__icone-partida {
  flex: none;
  margin-top: 3px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-gravar__partida strong {
  font-weight: 700;
}

.kc-gravar__nota {
  margin: 16px 0 0;
  color: #474238;
  font-size: 13px;
  line-height: 19px;
  letter-spacing: 0;
}

/* ---------- tela 49: detalhe da viagem ---------- */

/* O mapa (MapLibre ou, sem ele, o desenho em SVG): cantos de 28 px, sem borda, fundo sálvia clara. */
.mapa-viagem.kc-viagem-detalhe__mapa,
.mapa-viagem.kc-gravar__mapa {
  margin: 0;
  border-radius: var(--kc-raio-cartao);
  overflow: hidden;
  background: var(--kc-accent2-100);
}

.mapa-viagem.kc-viagem-detalhe__mapa {
  aspect-ratio: 324 / 180;
}

.mapa-viagem.kc-gravar__mapa {
  margin-top: 14px;
  aspect-ratio: 324 / 170;
}

.kc-viagem-detalhe__mapa .mapa-viagem__svg,
.kc-gravar__mapa .mapa-viagem__svg,
.kc-viagem-detalhe__mapa .mapa-viagem__vazio,
.kc-gravar__mapa .mapa-viagem__vazio {
  border: 0;
  border-radius: var(--kc-raio-cartao);
}

.mapa-viagem.kc-viagem-detalhe__mapa .mapa-viagem__gl,
.mapa-viagem.kc-gravar__mapa .mapa-viagem__gl {
  border: 0;
  border-radius: var(--kc-raio-cartao);
}

.kc-viagem-detalhe__mapa .mapa-viagem__fundo,
.kc-gravar__mapa .mapa-viagem__fundo {
  fill: var(--kc-accent2-100);
}

.kc-viagem-detalhe__mapa .mapa-viagem__rota,
.kc-gravar__mapa .mapa-viagem__rota {
  stroke: var(--kc-accent2-700);
  stroke-width: 5;
}

.kc-viagem-detalhe__mapa .mapa-viagem__inicio,
.kc-gravar__mapa .mapa-viagem__inicio {
  fill: var(--kc-accent2-700);
  stroke: var(--kc-fundo);
  stroke-width: 3;
}

.kc-viagem-detalhe__mapa .mapa-viagem__fim,
.kc-gravar__mapa .mapa-viagem__fim {
  fill: var(--kc-primaria);
  stroke: var(--kc-fundo);
  stroke-width: 3;
}

.kc-viagem-detalhe__mapa .mapa-viagem__evento,
.kc-gravar__mapa .mapa-viagem__evento {
  stroke: var(--kc-fundo);
  stroke-width: 2.5;
}

.kc-viagem-detalhe__mapa .mapa-viagem__evento--frenagem,
.kc-gravar__mapa .mapa-viagem__evento--frenagem {
  fill: var(--kc-accent-600);
}

.kc-viagem-detalhe__mapa .mapa-viagem__evento--aceleracao,
.kc-gravar__mapa .mapa-viagem__evento--aceleracao {
  fill: var(--kc-accent-300);
}

/* Onde o carro estava ao receber a solicitação e ao pegar o passageiro (modo Motorista): maiores que as frenagens, em cores à parte. */
.kc-viagem-detalhe__mapa .mapa-viagem__evento--aceite,
.kc-gravar__mapa .mapa-viagem__evento--aceite {
  fill: var(--kc-accent-800);
  stroke-width: 3;
}

.kc-viagem-detalhe__mapa .mapa-viagem__evento--embarque,
.kc-gravar__mapa .mapa-viagem__evento--embarque {
  fill: var(--kc-accent2-500);
  stroke-width: 3;
}

.kc-viagem-detalhe__mapa .mapa-viagem__regua line,
.kc-gravar__mapa .mapa-viagem__regua line {
  stroke: var(--kc-accent2-700);
}

.kc-viagem-detalhe__mapa .mapa-viagem__regua text,
.kc-gravar__mapa .mapa-viagem__regua text {
  fill: var(--kc-accent2-800);
}

.kc-viagem-detalhe__mapa .mapa-viagem__vazio,
.kc-gravar__mapa .mapa-viagem__vazio {
  background: var(--kc-accent2-100);
  color: var(--kc-texto-suave);
}

/* Os botões do MapLibre (ampliar, créditos) no desenho do app: creme, sem sombra dura. */
.mapa-viagem .maplibregl-ctrl-group {
  border-radius: 14px;
  background: var(--kc-fundo);
  box-shadow: 0 2px 8px rgba(32, 30, 29, 0.16);
}

.kc-viagem-detalhe__aviso {
  margin: 0 0 14px;
}

.kc-viagem-detalhe__aviso > .icone {
  flex: none;
  margin-top: 3px;
}

.kc-cartao.kc-viagem-detalhe__sem-rota {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.kc-viagem-detalhe__sem-rota > .icone {
  flex: none;
  margin-top: 3px;
}

.kc-viagem-detalhe__sem-rota > p {
  margin: 0;
  font-size: 13.75px;
  line-height: 20.5px;
}

/* Partida e destino: cada um com o círculo (sálvia clara com o alfinete, terracota clara com a bandeira), o rótulo e o endereço. */
.kc-cartao.kc-trajeto {
  list-style: none;
  margin: 15px 0 0;
  padding: 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  letter-spacing: 0;
}

.kc-trajeto > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kc-avatar.kc-trajeto__avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.icone.kc-trajeto__icone-partida {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-trajeto__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
}

.kc-trajeto__texto small {
  color: var(--kc-texto-suave);
  font-size: 11.5px;
  line-height: 15px;
}

.kc-trajeto__texto strong {
  color: var(--kc-texto);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
}

/* Os números da viagem: linhas de 42 px. */
.kc-cartao.kc-viagem-detalhe__numeros .kc-dados.kc-obd__dados > div {
  padding: 11.75px 0;
}

.kc-cartao.kc-viagem-detalhe__classificacao {
  padding: 18px 18px 22px;
}

.kc-viagem-detalhe__classificacao .campo--segmentado {
  margin: 0 0 13px;
}

.kc-viagem-detalhe__classificacao .campo__dica,
.kc-gravar__enderecos .campo__dica,
.kc-gravar__trajeto .campo__dica {
  line-height: 18px;
}

/* A observação com os 90 px das figuras (o campo de 44 px dentro de cartão, do lote A, vencia a regra do texto de várias linhas). */
.kc-cartao.kc-viagem-detalhe__classificacao .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined:has(textarea) {
  min-height: 90px;
}

.kc-viagem-detalhe__classificacao .mud-toggle-group.kc-segmentado {
  padding: 5px;
}

.kc-viagem-detalhe__classificacao .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  min-height: 42px;
  font-size: 13px;
}

.mud-button-root.mud-button.kc-viagem-detalhe__salvar {
  min-height: 40px;
  padding: 6px 21px;
  font-size: 14px;
}

.kc-cartao.kc-viagem-detalhe__privacidade {
  padding: 20px 18px 22px;
}

.kc-viagem-detalhe__privacidade > p {
  margin: 0;
  color: var(--kc-texto);
  font-size: 13.75px;
  line-height: 21px;
  letter-spacing: 0;
}

.kc-viagem-detalhe__privacidade > .kc-obd__acoes {
  margin-top: 12px;
  gap: 15px;
}

/* ---------- tela 50: mapas offline ---------- */

.kc-cartao.kc-mapas__resumo {
  padding: 18px 18px 15px;
  letter-spacing: 0;
}

.kc-mapas__instalados {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--kc-texto);
  font-size: 14.5px;
  line-height: 20px;
}

.kc-mapas__instalados strong {
  font-weight: 700;
}

.kc-avatar.kc-mapas__avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.kc-mapas__resumo .sim-nao {
  margin: 0;
  padding: 0;
  border: 0;
}

.kc-mapas__resumo .sim-nao__pergunta {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
}

.kc-mapas__resumo .mud-toggle-group.kc-segmentado {
  padding: 4px;
}

.kc-mapas__resumo .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  min-height: 40px;
  font-size: 13.5px;
}

.kc-mapas__resumo .campo__dica {
  display: block;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 19px;
}

.kc-mapas__aviso {
  margin: 14px 0 0;
}

.kc-mapas__aviso > .icone {
  flex: none;
  margin-top: 3px;
}

.kc-mapas__aviso-corpo p {
  margin: 0 0 10px;
}

.kc-mapas__nota {
  margin: 14px 0 0;
  color: #474238;
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: 0;
}

.kc-lista-cartoes.kc-mapas__lista {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  gap: 12px;
}

.kc-cartao.kc-mapas__regiao {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 12px 12px 12px 18px;
  border-radius: var(--kc-raio-hero);
  letter-spacing: 0;
}

.kc-mapas__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kc-mapas__texto strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.kc-mapas__texto strong small {
  margin-left: 2px;
  color: var(--kc-texto-suave);
  font-size: 11px;
  font-weight: 700;
}

.kc-mapas__tamanho {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--kc-texto-suave);
  font-size: 12.5px;
  line-height: 17px;
}

.kc-mapas__tamanho > .kc-status {
  padding: 2px 9px;
  font-size: 11.5px;
  line-height: 15px;
}

.kc-progresso.kc-mapas__progresso {
  display: block;
  height: 8px;
  margin: 6px 0 2px;
}

.kc-mapas__acoes {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kc-mapas__acoes > .mud-button-root.mud-button.kc-mapas__baixar {
  min-height: 40px;
  padding: 6px 15px 6px 14px;
  font-size: 13px;
}

.kc-mapas__baixar .icone {
  font-size: 11px;
}

.kc-mapas__acoes > .mud-button-root.mud-button.kc-mapas__excluir {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
}

.mud-button-root.mud-button.kc-botao--creme.kc-mapas__excluir .icone {
  --icone-primaria: var(--kc-accent-600);
  --icone-secundaria: var(--kc-accent2-500);
}

/* ==========================================================================
   R3 · lote F1: telas 52 a 59 (etanol ou gasolina, oficinas, especialidades e aditivos)
   ========================================================================== */

/* ---------- padrões (lote F1): ação de texto sob o campo, campo com botão, link no fim da lista, selo "catálogo", folha de cadastro ---------- */

/* Ação de texto logo abaixo de um campo ("+ Nova especialidade", "+ Novo aditivo"): o desenho do "+ Cadastrar oficina" do serviço. */
.kc-acao-texto {
  margin: -8px 0 16px -2px;
}

.kc-acao-texto > .mud-button-root.mud-button {
  padding-left: 6px;
  padding-right: 10px;
  font-size: 13px;
}

.kc-acao-texto .icone {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

/* Campo com o botão ao lado (CNPJ e "Buscar dados", link e "Usar"): o botão creme da altura do campo, na linha do campo. */
.kc-campo-com-botao {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.kc-campo-com-botao > .kc-campo {
  flex: 1 1 auto;
  min-width: 0;
}

.kc-campo-com-botao > .mud-button-root.mud-button.kc-campo-com-botao__botao {
  flex: none;
  min-height: 48px;
  margin-top: 24px;
  padding: 6px 16px;
  font-size: 13px;
}

/* Link no fim da lista ("Gerenciar especialidades", "Ver oficinas"): centrado, com o ícone na cor do link e o segundo tom sálvia. */
.kc-rodape-link {
  margin: 20px 0 4px;
  text-align: center;
  letter-spacing: 0;
}

.kc-rodape-link > .kc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.kc-rodape-link > .kc-link .icone {
  font-size: 15px;
  --icone-primaria: currentColor;
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

/* "+ Nova" e "+ Aplicação": nas figuras 53, 55 e 57 o botão fica 4 px abaixo do centro do título. */
.kc-cabecalho-novo.kc-cabecalho-novo--baixo > .mud-button-root.mud-button.kc-botao-novo {
  margin: -2px 0 -10px;
}

/* Selo "catálogo" (e "inativa") nas listas de cadastro: pílula creme clara (figuras 55 e 57). */
.kc-selo-catalogo {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--kc-raio-pilula);
  background: #f9f4ed;
  color: #474238;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1;
}

/* Linhas da lista de links feitas de botão (abrem uma folha): sem o visual de botão do navegador. */
button.kc-lista-links__item {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--kc-divisor);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Folhas de cadastro (56, 58 e a frequência): 2 px a mais em cima e embaixo do cabeçalho e 18 px sob os botões. */
.mud-dialog.kc-folha-cadastro .kc-folha__cabecalho {
  padding-top: 14px;
  padding-bottom: 10px;
}

.mud-dialog.kc-folha-cadastro .kc-folha__rodape {
  padding-top: 10px;
  padding-bottom: calc(18px + var(--safe-bottom));
}

/* Mensagem da folha ou do formulário (cadastro repetido, não deu para excluir), com "Usar a existente". */
.kc-folha-cadastro__mensagem,
.kc-oficina-form__mensagem {
  margin: 0 0 16px;
  letter-spacing: 0;
}

.kc-folha-cadastro__mensagem > .icone,
.kc-oficina-form__mensagem > .icone {
  flex: none;
  margin-top: 3px;
}

.kc-folha-cadastro__mensagem p,
.kc-oficina-form__mensagem p {
  margin: 0;
}

.kc-folha-cadastro__mensagem p + .mud-button-root,
.kc-oficina-form__mensagem p + .mud-button-root {
  margin-top: 10px;
}

/* ---------- tela 52: calculadora flex (etanol ou gasolina) ---------- */

.subtitulo-pagina.kc-flex__subtitulo {
  margin-bottom: 14px;
  line-height: 23.5px;
}

.campo-linha.kc-flex__precos {
  gap: 10px;
}

.kc-flex__sugeridos {
  margin: -6px 0 14px;
}

.mud-button-root.mud-button.kc-flex__comparar {
  display: flex;
  width: 100%;
  margin: 0 0 15px;
}

/* Resultado: destaque sálvia (etanol), terracota (gasolina) ou sálvia escuro (tanto faz), com o ícone dentro do círculo. */
.kc-hero.kc-flex__resultado {
  margin: 0 0 15px;
  padding: 25px 22px 24px;
  background: var(--kc-accent2-700);
  color: var(--kc-accent2-100);
  letter-spacing: 0;
}

.kc-hero.kc-flex__resultado::after {
  top: -28px;
  right: -28px;
  width: 148px;
  height: 148px;
  background: var(--kc-accent2-600);
  opacity: 1;
}

.kc-flex__icone {
  position: absolute;
  top: 30px;
  right: 28px;
  z-index: 1;
  font-size: 37px;
  line-height: 0;
}

.kc-flex__icone .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent2-300);
  --icone-secundaria-opacidade: 1;
}

.kc-flex__rotulo {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
}

.kc-flex__escolha {
  display: block;
  margin: 11px 0 9px;
  color: var(--kc-fundo);
  font-family: var(--kc-fonte-titulo);
  font-size: 52px;
  font-weight: 400;
  line-height: 50px;
}

.kc-flex__vantagem {
  margin: 0 0 10px;
  font-size: 15.5px;
  line-height: 22px;
}

.kc-flex__vantagem strong,
.kc-flex__limite strong {
  color: var(--kc-fundo);
  font-weight: 700;
}

.kc-flex__limite {
  margin: 0;
  color: var(--kc-accent2-200);
  font-size: 14px;
  line-height: 20px;
}

/* "Gasolina" e "Tanto faz" são mais longos que "Etanol": menores, terminam antes do ícone do círculo. */
.kc-flex__resultado--gasolina .kc-flex__escolha {
  font-size: 46px;
}

.kc-flex__resultado--indiferente .kc-flex__escolha {
  margin-top: 4px;
  font-size: 42px;
}

.kc-hero.kc-flex__resultado--gasolina {
  background: var(--kc-primaria);
  color: var(--kc-accent-100);
}

.kc-hero.kc-flex__resultado--gasolina::after {
  background: #e08b54;
}

.kc-flex__resultado--gasolina .kc-flex__limite {
  color: var(--kc-accent-200);
}

.kc-flex__resultado--gasolina .kc-flex__icone .icone {
  --icone-secundaria: var(--kc-accent-200);
}

.kc-hero.kc-flex__resultado--indiferente {
  background: var(--kc-accent2-800);
}

.kc-hero.kc-flex__resultado--indiferente::after {
  background: var(--kc-accent2-700);
}

/* Como foi calculado: o texto, os dois custos por km lado a lado (terracota claro e sálvia claro) e a nota. */
.kc-cartao.kc-flex__explicacao {
  padding: 18px 18px 16px;
  letter-spacing: 0;
}

.kc-flex__texto {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
}

.kc-flex__custos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 11.5px 0 13px;
}

.kc-flex__custo {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 13px 14px 12px;
  border-radius: 20px;
  background: var(--kc-accent-100);
}

.kc-flex__custo--etanol {
  background: var(--kc-accent2-100);
}

.kc-flex__custo span {
  color: var(--kc-texto);
  font-size: 12.5px;
  line-height: 17px;
}

.kc-flex__custo strong {
  font-size: 17px;
  font-weight: 700;
  line-height: 25px;
}

.kc-flex__custo small {
  color: var(--kc-texto-suave);
  font-size: 12.5px;
  line-height: 17px;
}

.kc-flex__nota {
  margin: 0;
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18.5px;
}

.kc-flex__explicacao .kc-flex__texto + .kc-flex__nota {
  margin-top: 10px;
}

.kc-flex__aguardando {
  color: var(--kc-texto-suave);
}

/* ---------- tela 53: oficinas ---------- */

.kc-campo.kc-oficinas__busca {
  margin: 21.5px 0 12px;
}

.kc-oficinas__busca input[type="search"]::-webkit-search-cancel-button,
.kc-oficinas__busca input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* O texto da busca em 15 px: o exemplo inteiro cabe, como na figura (com 16 px saía "…ou end…"). */
.kc-oficinas__busca .mud-input.mud-input-outlined {
  font-size: 15px;
}

.kc-campo-chips.kc-oficinas__filtro {
  margin-bottom: 12px;
}

.kc-lista-cartoes.kc-oficinas {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 12px;
}

.kc-cartao.kc-oficina {
  padding: 18px 18px 20px;
  letter-spacing: 0;
}

.kc-oficina__cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--kc-texto);
  text-decoration: none;
}

.kc-avatar.kc-oficina__avatar {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

.kc-oficina__nome {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
}

.icone.kc-oficina__seta {
  flex: none;
  margin-right: 4px;
  font-size: 13px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

.kc-oficina__especialidades {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 5px;
  margin: 13px 0 0;
  padding: 0;
}

.kc-oficina__especialidades > li {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-accent2-100);
  color: var(--kc-accent2-800);
  font-size: 11px;
  font-weight: 600;
}

.kc-oficina__dados {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 0;
}

.kc-oficina__dados > div {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  font-size: 14px;
  line-height: 18.7px;
}

.kc-oficina__dados dt {
  color: #645c50;
  font-weight: 400;
}

.kc-oficina__dados dd {
  margin: 0;
  color: var(--kc-texto);
}

.kc-oficina__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.kc-oficina__acoes > .mud-button-root.mud-button.kc-botao--creme {
  min-height: 38px;
  padding: 6px 15px 6px 14px;
  font-size: 13px;
}

.kc-oficina--inativa .kc-oficina__nome,
.kc-oficina--inativa .kc-oficina__dados {
  opacity: 0.75;
}

.kc-oficinas__nenhuma {
  margin: 4px 0 0;
  color: var(--kc-texto-suave);
  text-align: center;
}

.kc-interruptor-linha.kc-oficinas__inativas,
.kc-interruptor-linha.kc-especialidades__inativas,
.kc-interruptor-linha.kc-aditivos__inativos {
  align-items: center;
  margin: 16px 0 0;
}

/* ---------- tela 54: cadastrar oficina (página) e a folha "Nova oficina" do serviço ---------- */

/* Sem subtítulo, o primeiro rótulo fica 32 px abaixo do título (figura 54); com o subtítulo ("Inativa…"), o de sempre. */
.titulo-pagina.kc-oficina-form__titulo {
  margin-bottom: 21.5px;
}

.kc-oficina-form__titulo + .subtitulo-pagina {
  margin-top: -17.5px;
}

.kc-campo-chips.kc-oficina-form__especialidades {
  margin-bottom: 14px;
}

/* A especialidade escolhida tem o sinal de "feito" na frente: o círculo sálvia com o traço creme (figura 54). */
.kc-oficina-form__especialidades .mud-chip.kc-chip.mud-chip-selected .icone,
.kc-oficina-form__especialidades .mud-chip.kc-chip[aria-checked="true"] .icone {
  font-size: 12px;
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent2-500);
}

/* O endereço tem duas linhas à vista (a observação, vazia, fica com os 90 px de sempre). */
.kc-oficina-form__endereco .mud-input.mud-input-outlined:has(textarea) {
  min-height: 76px;
}

.kc-campo.kc-oficina-form__endereco {
  margin-bottom: 24px;
}

.kc-cartao.kc-oficina-form__posicao {
  margin: 0 0 16px;
  padding: 21.5px 18px 18px;
  letter-spacing: 0;
}

.kc-oficina-form__posicao-titulo {
  margin: 0 0 13.5px;
  color: var(--kc-texto);
  font-family: var(--kc-fonte);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.kc-oficina-form__posicao-texto {
  margin: 0 0 9px;
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18.5px;
}

.kc-oficina-form__posicao-atual {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kc-oficina-form__botoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.kc-oficina-form__botoes + .kc-oficina-form__botoes {
  margin-top: 14px;
}

.kc-oficina-form__botoes > .mud-button-root.mud-button.kc-botao--creme {
  min-height: 41px;
}

.kc-campo-com-botao.kc-oficina-form__link {
  margin-top: 14px;
}

.kc-oficina-form__link .kc-campo {
  margin-bottom: 0;
}

.kc-oficina-form__aviso {
  margin: 12px 0 0;
}

/* ---------- tela 55: especialidades das oficinas ---------- */

/* O subtítulo fica na coluna do título, ao lado do "+ Nova" (por isso quebra em três linhas na figura). */
.cabecalho-pagina.kc-cabecalho-novo.kc-especialidades__cabecalho {
  align-items: flex-start;
  margin-bottom: 13px;
}

.kc-especialidades__titulo {
  flex: 1;
  min-width: 0;
}

.kc-especialidades__titulo > .subtitulo-pagina {
  margin: 4px 0 0;
  line-height: 23.5px;
}

.kc-especialidades__cabecalho > .mud-button-root.mud-button.kc-botao-novo {
  margin: -1px 0 0;
}

.kc-cartao.kc-lista-links.kc-especialidades {
  padding: 4px 14px;
}

.kc-especialidades .kc-lista-links__item {
  gap: 12px;
  padding: 11px 0 11.5px;
}

.kc-especialidades .kc-lista-links__texto strong {
  font-weight: 650;
}

.kc-especialidades .kc-lista-links__texto small {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 22px;
}

.kc-especialidades__inativa .kc-lista-links__texto strong {
  opacity: 0.7;
}

/* ---------- telas 56 e 58: cadastrar especialidade e aditivo (folhas) ---------- */

.kc-aditivo-form__embalagem {
  gap: 10px;
}

.kc-campo.kc-aditivo-form__unidade {
  flex: 0 0 131px;
  min-width: 0;
}

/* ---------- tela 57: aditivos ---------- */

.kc-aditivos__secao {
  margin-top: 22px;
}

.kc-aditivos__secao:first-of-type {
  margin-top: 23px;
}

.kc-aditivos__secao > .kc-rotulo-secao,
.kc-aditivos__secao > .kc-cabecalho-secao > .kc-rotulo-secao {
  margin: 0 0 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 14px;
}

.kc-aditivos__secao > .kc-cabecalho-secao {
  align-items: center;
  margin: 0 0 12px;
}

.kc-aditivos__secao > .kc-cabecalho-secao > .kc-rotulo-secao {
  margin: 0;
}

.kc-link.kc-aditivos__novo {
  font-size: 14px;
  font-weight: 600;
}

.kc-dica.kc-aditivos__vazio > .icone {
  flex: none;
  margin-top: 3px;
}

/* Aditivo em uso no veículo: o círculo na cor da situação, o título com o selo, a última aplicação, a frequência, a próxima numa
   caixa creme e as ações. */
.kc-lista-cartoes.kc-aditivos__usos {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 12px;
}

.kc-cartao.kc-aditivo-uso {
  padding: 18px;
  letter-spacing: 0;
}

.kc-aditivo-uso__topo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kc-avatar.kc-aditivo-uso__avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
  background: var(--kc-accent2-100);
}

.kc-aditivo-uso--embreve .kc-aditivo-uso__avatar,
.kc-aditivo-uso--urgente .kc-aditivo-uso__avatar {
  background: var(--kc-accent-100);
}

.kc-aditivo-uso--vencido .kc-aditivo-uso__avatar {
  background: var(--kc-primaria);
}

.kc-aditivo-uso--vencido .kc-aditivo-uso__avatar .icone {
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent-200);
}

.kc-aditivo-uso--sem .kc-aditivo-uso__avatar {
  background: var(--kc-fundo);
}

.kc-aditivo-uso__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* O selo estica na altura do título (na figura, com o título em duas linhas, ele fica alto). */
.kc-aditivo-uso__cabeca {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 1px;
}

.kc-aditivo-uso__titulo {
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
}

.kc-status.kc-aditivo-uso__selo {
  flex: none;
  justify-content: center;
  min-height: 22px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.kc-aditivo-uso__texto > small {
  color: #645c50;
  font-size: 13px;
  line-height: 19px;
}

.kc-aditivo-uso__proxima {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 10px 16px;
  border-radius: 20px;
  background: var(--kc-fundo);
  color: var(--kc-texto);
  font-size: 13px;
  font-weight: 600;
  line-height: 17.5px;
}

.kc-aditivo-uso__proxima > .icone {
  flex: none;
  margin-top: 3px;
  font-size: 12px;
}

.kc-aditivo-uso__acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
}

.kc-aditivo-uso__acoes > .mud-button-root.mud-button.kc-aditivo-uso__registrar {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 4px 16px;
  font-size: 13px;
  line-height: 1.05;
  white-space: normal;
  text-align: center;
}

.kc-aditivo-uso__acoes > .mud-button-root.mud-button.kc-aditivo-uso__frequencia {
  flex: none;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 13px;
}

.kc-aditivo-uso__frequencia .icone {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-400);
  --icone-secundaria-opacidade: 1;
}

/* Histórico e cadastro: listas num cartão com a divisória embaixo de cada linha, o ícone solto (sem círculo) e o valor à direita. */
.kc-cartao.kc-lista-links.kc-aditivos__lista {
  padding: 3px 14px;
}

.kc-aditivos__lista .kc-lista-links__item {
  gap: 14px;
  padding: 11px 0;
}

.icone.kc-aditivos__icone {
  flex: none;
  margin-left: 4px;
  font-size: 14px;
}

.kc-aditivos__lista .kc-lista-links__texto strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.kc-aditivos__lista .kc-lista-links__texto small {
  font-size: 12px;
  line-height: 18px;
}

/* No cadastro, o detalhe ao lado do selo quebra em linhas de 16 px e as linhas da lista são mais baixas (figura 57). */
.kc-aditivos__lista button.kc-lista-links__item {
  padding: 10px 0 10.5px;
}

.kc-aditivos__lista .kc-aditivos__detalhe {
  min-height: 22px;
}

.kc-aditivos__lista .kc-aditivos__detalhe > small {
  line-height: 16px;
}

.kc-aditivos__valor {
  flex: none;
  margin-right: 2px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kc-aditivos__detalhe {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.kc-aditivos__detalhe > small {
  min-width: 0;
}

.kc-aditivos__inativo .kc-lista-links__texto strong {
  opacity: 0.7;
}

/* A folha da frequência no mesmo desenho das folhas de cadastro. */
.kc-frequencia__aditivo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 20px;
  background: var(--kc-superficie);
  font-size: 15px;
  letter-spacing: 0;
}

.kc-frequencia__aditivo > .icone {
  flex: none;
}

.campo__dica.kc-frequencia__dica {
  margin: -8px 0 16px;
}

details.kc-cartao.kc-expansivel.kc-frequencia__antes .campo__dica.kc-frequencia__dica {
  margin: -6px 0 0;
}

.kc-dica.kc-frequencia__base {
  margin: 0 0 16px;
  letter-spacing: 0;
}

.kc-dica.kc-frequencia__base > .icone {
  flex: none;
  margin-top: 3px;
}

.kc-frequencia__base p {
  margin: 0;
}

.kc-frequencia__base p + p {
  margin-top: 6px;
}

/* ---------- tela 59: registrar aplicação de aditivo (página) ---------- */

.kc-acao-texto.kc-aplicacao__novo {
  margin-top: -12px;
}

/* A orientação e a última leitura do odômetro em linhas seguidas, como na figura (o campo põe 6 px entre elas). */
.kc-aplicacao__odometro .campo__dica + .campo__dica {
  margin-top: -6px;
}

.campo-linha.kc-aplicacao__valores {
  gap: 10px;
}

.kc-aplicacao__sugestao {
  margin: -8px 0 16px;
}

.kc-aplicacao__sugestao > .kc-link {
  margin-left: 4px;
  font-size: inherit;
}

.kc-interruptor-linha.kc-aplicacao__embalagem {
  align-items: center;
  margin: -3px 0 20px;
}

.kc-aplicacao__embalagem .kc-interruptor-linha__texto strong {
  font-size: 15px;
  font-weight: 700;
}

/* ---------- fim do lote F1 ---------- */

/* ==========================================================================
   R3 · lote F2: telas 60 a 64 (importar, exportar e backup, conta, configurações e sobre)
   ========================================================================== */

/* ---------- padrões (lote F2): área de arquivo, aviso na tela, chips marcados, botões de 46 px, lista de dados com ícone ---------- */

/* Área tracejada para escolher um arquivo (importar e restaurar, figuras 60 e 61): o círculo creme com o ícone, o título e o
   texto, alinhados à esquerda; 188 px de altura com o texto em duas linhas. */
.kc-area-arquivo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 22px;
  overflow: hidden;
  border: 2px dashed var(--kc-accent2-400);
  border-radius: var(--kc-raio-cartao);
  background: var(--kc-accent2-100);
  color: var(--kc-texto);
  letter-spacing: 0;
  cursor: pointer;
}

.kc-area-arquivo--lendo {
  opacity: 0.6;
  cursor: progress;
}

.kc-area-arquivo__entrada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.kc-avatar.kc-area-arquivo__icone {
  width: 56px;
  height: 56px;
  font-size: 22px;
}

.kc-area-arquivo__titulo {
  margin: 12px 0 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.kc-area-arquivo__texto {
  color: #474238;
  font-size: 14px;
  line-height: 19px;
}

/* Título das telas de dados (60 a 63): nas figuras o título tem a linha de 1,2 (2 px a mais antes do subtítulo) e o subtítulo é de
   15 px com a linha de 23,25 px. */
.titulo-pagina.kc-titulo--alto {
  margin-bottom: 6px;
}

.kc-titulo--alto + .subtitulo-pagina {
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 23.25px;
}

/* Campos dentro dos cartões destas telas: 48 px de altura e o texto de 15 px (figuras 61 a 63). */
.kc-cartao.kc-exportar .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined,
.kc-cartao.kc-conta .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined,
.kc-cartao.kc-config__cartao .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined,
.kc-cartao.kc-importar__previa .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined,
.kc-cartao.kc-mapeador .kc-campo:not(.kc-campo--total) .mud-input.mud-input-outlined {
  min-height: 48px;
  font-size: 15px;
}

/* Aviso de erro ou dica fora de um campo: 14 px de folga em cima. */
.kc-atencao.kc-aviso-tela,
.kc-dica.kc-aviso-tela {
  margin: 14px 0 0;
}

/* Chips que mostram o sinal de "feito" na frente quando escolhidos (O QUE EXPORTAR): o círculo sálvia com o traço creme. */
.kc-chips-marcados .mud-chip.kc-chip.mud-chip-selected .icone,
.kc-chips-marcados .mud-chip.kc-chip[aria-checked="true"] .icone {
  font-size: 12px;
  --icone-primaria: var(--kc-fundo);
  --icone-secundaria: var(--kc-accent2-500);
}

/* Botão de ação dentro de um cartão (Exportar, Fazer backup agora): 46 px, à esquerda, com o texto de 15 px. */
.mud-button-root.mud-button.kc-exportar__botao {
  align-self: flex-start;
  min-height: 46px;
  padding: 8px 22px 8px 18px;
}

.mud-button-root.kc-exportar__botao .mud-button-label {
  gap: 9px;
}

/* ---------- tela 60: importar dados de outro app ---------- */

/* "Como exportar do outro app": a pílula de superfície com o ponto de interrogação, o título e a seta à direita; aberta, os
   passos de cada app vêm dentro do mesmo cartão. */
.kc-cartao.kc-importar__como {
  margin: 14px 0 0;
  padding: 0 18px;
  letter-spacing: 0;
}

.kc-importar__como-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 49px;
  list-style: none;
  color: var(--kc-accent-800);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  cursor: pointer;
}

.kc-importar__como-titulo::-webkit-details-marker {
  display: none;
}

.kc-importar__como-titulo > span {
  flex: 1;
  min-width: 0;
}

.icone.kc-importar__como-seta {
  flex: none;
  font-size: 13px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
  transition: transform 0.15s ease;
}

details[open] > .kc-importar__como-titulo .kc-importar__como-seta {
  transform: rotate(180deg);
}

.kc-importar__como-corpo {
  padding: 2px 0 14px;
}

.kc-importar__como-corpo p {
  margin: 0 0 10px;
  color: #474238;
  font-size: 14px;
  line-height: 19px;
}

.kc-importar__como-corpo p:last-child {
  margin-bottom: 0;
}

.kc-importar__como-corpo code,
.kc-backup code {
  padding: 2px 7px;
  border-radius: 8px;
  background: #f9f4ed;
  color: var(--kc-texto);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
}

/* Importações feitas: o círculo sálvia com o arquivo, o título, a data e o nome do arquivo (que quebra onde precisar), o
   resumo e as duas ações embaixo (figura 60). */
.kc-cartao.kc-importacao {
  padding: 18px;
  letter-spacing: 0;
}

.kc-importacao--desfeita {
  opacity: 0.65;
}

.kc-importacao__topo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kc-avatar.kc-importar__avatar,
.kc-avatar.kc-importacao__avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

.kc-importacao__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kc-importacao__texto strong {
  margin: 2.5px 0 -1px;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.kc-importacao__arquivo {
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 19px;
  word-break: break-all;
}

.kc-importacao__resumo {
  margin-top: 3.5px;
  font-size: 14px;
  line-height: 20px;
}

.kc-importacao__acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* Os dois botões do cartão com o texto de 13 px (figura 60): 40 px de altura e o ícone de 12 px. */
.kc-importacao__acoes > .mud-button-root.mud-button {
  font-size: 13px;
}

.kc-importacao__acoes > .mud-button-root.mud-button.kc-botao--creme {
  min-height: 40px;
  padding: 6px 15px 6px 15px;
}

.kc-importacao__acoes > .mud-button-root.mud-button.kc-botao--creme .mud-button-label {
  gap: 9px;
}

.kc-importacao__acoes .icone {
  font-size: 12px;
}

/* Prévia da importação e da restauração: cabeçalho com o círculo e o nome do arquivo, contagens em lista de dados. */
.kc-cartao.kc-importar__previa,
.kc-cartao.kc-mapeador,
.kc-cartao.kc-backup {
  margin: 0 0 16px;
  padding: 18px;
  letter-spacing: 0;
}

.kc-importar__previa-cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
}

.kc-importar__previa-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kc-importar__previa-texto strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.kc-importar__previa-texto small {
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.kc-importar__contagens {
  margin: 0 0 16px;
}

.kc-importar__contagens dt {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kc-importar__contagens dd {
  max-width: none;
  white-space: nowrap;
}

/* "Cancelar" só do tamanho do texto: o resto do rodapé fica para "Importar N lançamentos", que cabe numa linha só. */
.kc-acoes-formulario > .mud-button-root.mud-button.kc-importar__cancelar {
  flex: 0 0 auto;
  padding-left: 18px;
  padding-right: 18px;
}

.kc-acoes-formulario > .mud-button-root.mud-button.kc-importar__importar {
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

.kc-importar__nota {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 19px;
}

.kc-importar__nota > .icone {
  flex: none;
  margin-top: 2px;
}

.kc-importar__ia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
}

.kc-importar__ia .kc-importar__nota,
.kc-importar__ia .campo {
  align-self: stretch;
  margin-bottom: 0;
}

.kc-importar__avisos {
  margin: 0 0 8px;
  padding: 0 14px;
  border-radius: 22px;
  background: var(--kc-fundo);
}

.kc-importar__avisos-lista {
  padding: 2px 0 14px;
}

.kc-importar__ajustar {
  margin: 4px 0 0;
}

/* Mapeador de colunas do CSV genérico: o texto de abertura e a amostra do arquivo numa tabela rolável. */
.kc-mapeador .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  flex: 1 1 auto;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
}

.kc-mapeador__texto {
  margin: 8px 0 16px;
  color: #474238;
  font-size: 14px;
  line-height: 20px;
}

.kc-mapeador__amostra {
  overflow-x: auto;
  border-radius: 18px;
  background: var(--kc-fundo);
}

.kc-mapeador__amostra table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.kc-mapeador__amostra th,
.kc-mapeador__amostra td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--kc-divisor);
  text-align: left;
  white-space: nowrap;
}

.kc-mapeador__amostra th {
  font-weight: 700;
}

.kc-mapeador__amostra tr:last-child td {
  border-bottom: 0;
}

/* ---------- tela 61: exportar e backup ---------- */

.kc-cartao.kc-exportar {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 18px 18px 18px;
  letter-spacing: 0;
}

.kc-exportar__aviso {
  margin: 0 0 16px;
}

.kc-backup__texto {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 21px;
}

.kc-backup__ultimo,
.kc-backup__copia p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 13.5px;
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 19px;
}

.kc-backup__ultimo > span,
.kc-backup__copia p > span {
  flex: 1;
  min-width: 0;
}

.icone.kc-backup__ultimo-icone {
  flex: none;
  margin-top: 2px;
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

/* Ritmo vertical do cartão de exportar (figura 61): 12,5 px de um campo ao rótulo do próximo, o rótulo 1 px mais perto dos chips
   e do segmentado; a dica de 13 px logo embaixo do segmentado e 11 px até o botão. */
.kc-exportar .kc-campo,
.kc-exportar .kc-campo-chips {
  margin-bottom: 12.5px;
}

.kc-exportar .kc-campo-chips .kc-campo__rotulo,
.kc-exportar .campo--segmentado .kc-campo__rotulo {
  margin-bottom: -1px;
}

.kc-exportar .campo--segmentado {
  margin-bottom: 0;
}

.kc-exportar .campo__dica {
  margin: -1.5px 0 11px;
  font-size: 13px;
  line-height: 19px;
}

.kc-exportar .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  min-height: 40px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
}

.kc-backup__aviso {
  margin: 0 0 16px;
}

/* Restaurar: o botão que substitui tudo em cima, de largura cheia, e "Cancelar" embaixo (o texto é longo para ficar ao lado). */
.kc-backup__acoes {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}

.kc-backup__acoes > .mud-button-root.mud-button {
  width: 100%;
}

.kc-cartao.kc-backup__copia {
  margin: 0;
  padding: 16px 18px 12px;
}

.kc-backup__copia p {
  margin-bottom: 8px;
}

/* ---------- tela 62: entrar ou criar a conta ---------- */

.subtitulo-pagina.kc-conta__intro {
  margin-bottom: 13.5px;
}

.kc-cartao.kc-conta {
  margin: 0 0 14px;
  padding: 18px;
  letter-spacing: 0;
}

.kc-conta__cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 13px;
}

.kc-avatar.kc-conta__avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

.kc-conta__rotulo {
  margin: 0;
  color: var(--kc-accent2-700);
  font-family: var(--kc-fonte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.125em;
  line-height: 16px;
  text-transform: uppercase;
}

.kc-conta__texto {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 21px;
}

.kc-conta .campo__dica {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.kc-conta .kc-campo {
  margin-bottom: 11.5px;
}

.kc-conta__texto--depois {
  margin-top: 18px;
}

.kc-conta__email {
  margin: 0 0 6px;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.kc-conta__aviso {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 19px;
}

.kc-conta__aviso > .icone {
  flex: none;
  margin-top: 2px;
}

.mud-button-root.mud-button.kc-conta__botao {
  margin: 0;
  font-size: 15px;
}

.kc-conta__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.kc-dica.kc-conta__pendentes {
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  padding: 14px 17px;
  border-radius: 24px;
  font-size: 14px;
  line-height: 19.8px;
}

.kc-conta__pendentes > .icone {
  flex: none;
  margin-top: 1px;
  font-size: 17px;
}

.kc-conta__titulo-vai {
  margin-top: 26px;
}

.kc-cartao.kc-conta__vai {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 15px 18px 16px;
  list-style: none;
  letter-spacing: 0;
}

.kc-conta__vai > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 21px;
}

.kc-avatar.kc-conta__vai-icone {
  width: 28px;
  height: 28px;
  margin-top: -1px;
  font-size: 12px;
}

.kc-conta__diferente {
  margin: 0 0 14px;
  letter-spacing: 0;
}

.kc-conta__diferente > .icone {
  flex: none;
  margin-top: 3px;
}

.kc-conta__diferente-titulo {
  margin: 0 0 6px;
  font-family: var(--kc-fonte);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.kc-conta__diferente p {
  margin: 0;
}

.kc-cartao.kc-conta__sozinho,
.kc-cartao.kc-conta__conflitos,
.kc-cartao.kc-conta__bloco {
  margin: 0;
  padding: 18px;
  letter-spacing: 0;
}

.kc-conta__sozinho .sim-nao,
.kc-conta__sozinho .campo--segmentado {
  margin: 0;
}

/* ---------- tela 63: configurações do aplicativo ---------- */

/* Cada seção é um cartão de 16,5 px em cima e embaixo e 18 nos lados; os blocos de dentro ficam a 12,5 px um do outro e o último
   sem folga embaixo. */
.kc-config .kc-cartao.kc-config__cartao {
  margin: 0;
  padding: 16.5px 18px;
  letter-spacing: 0;
}

/* O cartão do aviso no carro é 2 px mais alto que a soma das partes na figura (63). */
.kc-config .kc-cartao.kc-config__cartao--carro {
  padding-bottom: 18.5px;
}

/* Rótulos das seções: a linha de 17,6 px com 22 px de folga em cima e 16 embaixo (55,6 px de um cartão ao outro, figura 63). */
.kc-config .kc-titulo-secao {
  margin: 22px 0 16px;
  line-height: 17.6px;
}

.kc-config__cartao > .sim-nao,
.kc-config__cartao > .kc-campo,
.kc-config__cartao > .campo--segmentado,
.kc-config__cartao > .campo-linha,
.kc-config__cartao > .kc-config__link,
.kc-config__cartao > .kc-config__nota,
.kc-config__cartao > .kc-config__texto {
  margin-bottom: 12.5px;
}

.kc-config__cartao > :last-child {
  margin-bottom: 0;
}

/* A pergunta de sim ou não: 15 px em negrito, o segmentado de 48 px (botões de 40 px com texto de 13 px) e a explicação de 13 px. */
.kc-config__cartao .sim-nao {
  padding: 0;
  border: 0;
}

.kc-config__cartao .sim-nao__pergunta {
  margin: 0;
  padding: 0 0 12.25px;
  font-size: 15px;
  font-weight: 700;
  line-height: 22.5px;
}

.kc-config__cartao .sim-nao .campo--segmentado {
  margin: 0;
}

.kc-config__cartao .kc-segmentado .mud-button-root.mud-button.mud-toggle-item {
  min-height: 40px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 15px;
}

.kc-config__cartao .sim-nao > .campo__dica {
  display: block;
  margin: 11.5px 0 0;
  font-size: 13px;
  line-height: 18px;
}

.kc-config__cartao .campo--segmentado .campo__dica {
  margin: -0.5px 0 0;
  font-size: 13px;
  line-height: 18px;
}

.kc-config__cartao .kc-campo > .campo__dica {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.kc-config__cartao .kc-campo__rotulo {
  line-height: 18px;
}

.kc-config__cartao .campo-linha {
  gap: 12px;
}

.kc-config__cartao .campo-linha > .campo {
  margin-bottom: 0;
}

.kc-config__cartao > .kc-config__dica {
  margin: 12.5px 0 0;
  font-size: 13px;
  line-height: 18px;
}

.kc-config__texto {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18px;
}

.kc-config__texto--grande {
  display: block;
  color: var(--kc-texto);
  font-size: 14px;
  line-height: 21px;
}

.kc-config__link .kc-link {
  font-size: 14px;
}

.kc-config__dica .kc-link {
  font-size: inherit;
}

/* A nota da localização: caixa creme de cantos redondos com o texto de 13 px. */
.kc-config__nota {
  margin: 0;
  padding: 12px 14px;
  border-radius: 22px;
  background: var(--kc-fundo);
  font-size: 13px;
  line-height: 19.5px;
}

.kc-config__botoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.kc-config__cartao > .kc-config__nota + .kc-config__botoes {
  margin-top: 13px;
}

.kc-config__aviso {
  margin: 12px 0 0;
}

.kc-config__botoes > .mud-button-root.mud-button {
  font-size: 13px;
}

.kc-config__botoes > .mud-button-root.mud-button.kc-botao--excluir {
  min-height: 36px;
}

/* A lixeira, o "desfazer" e o relógio das ações em texto: o ícone todo em sálvia (figuras 60 e 63). */
.kc-config__botoes .mud-button-root.mud-button.kc-botao--excluir .icone,
.kc-importacao__acoes .mud-button-root.mud-button.kc-botao--excluir .icone,
.kc-backup__copia .mud-button-root.mud-button.kc-botao--excluir .icone {
  --icone-primaria: var(--kc-accent2-500);
  --icone-secundaria: var(--kc-accent2-500);
  --icone-secundaria-opacidade: 1;
}

/* O primeiro rótulo fica 20 px abaixo do subtítulo; os links do fim, com as linhas de 61 px e 17 px de folga em cima. */
.kc-config .subtitulo-pagina + .kc-titulo-secao {
  margin-top: 18px;
}

.kc-config .kc-cartao.kc-config__links {
  margin-top: 17px;
}

.kc-config__links .kc-lista-links__item {
  padding: 10px 0;
}

/* ---------- tela 64: sobre o KmCerto ---------- */

.kc-hero.kc-sobre-tela {
  margin-top: 22px;
  padding: 22px 22px 24px;
  background: var(--kc-accent2-700);
  letter-spacing: 0;
}

.kc-sobre-tela::after {
  top: -48px;
  right: -48px;
  width: 158px;
  height: 158px;
  background: var(--kc-accent2-600);
  opacity: 1;
}

.kc-avatar.kc-sobre-tela__icone {
  width: 60px;
  height: 60px;
  margin: 0 0 12px;
  font-size: 22px;
}

.kc-sobre-tela p {
  margin: 0 0 11px;
  color: var(--kc-fundo);
  font-size: 16px;
  line-height: 23.5px;
}

.kc-sobre-tela strong {
  font-weight: 700;
}

.kc-sobre-tela p.kc-sobre-tela__versao {
  margin: 13px 0 0;
  color: var(--kc-accent2-300);
  font-size: 13px;
  line-height: 17px;
}

.kc-compromissos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  letter-spacing: 0;
}

.kc-compromissos > li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-superficie);
  font-size: 15px;
  line-height: 20.5px;
}

.kc-compromissos > li > .icone {
  flex: none;
  font-size: 16px;
  --icone-secundaria-opacidade: 1;
}

.kc-titulo-secao.kc-sobre-tela__rotulo {
  margin: 17px 0 19px;
}

/* ---------- fim do lote F2 ---------- */

/* ---------- ícone dentro do campo (CampoTexto IconeInterno): o envelope do e-mail da conta ---------- */

.kc-campo__entrada-icone {
  position: relative;
}

.kc-campo__icone-interno {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18px;
  z-index: 1;
  display: grid;
  place-items: center;
  font-size: 18px;
  pointer-events: none;
}

.kc-campo__icone-interno .icone {
  --icone-primaria: var(--kc-accent2-600);
  --icone-secundaria: var(--kc-accent2-500);
}

/* O MudBlazor dá o recuo do texto com ".mud-input > input.mud-input-root-outlined" (mais forte que os seletores de campo): !important. */
.kc-campo__entrada-icone .mud-input .mud-input-root {
  padding-left: 50px !important;
}

/* ---------- modo do app (Pessoal | Motorista): alternador do Início, bloco de hoje e sugestão no veículo ---------- */

.kc-inicio-modo {
  margin: 0 0 14px;
}

.kc-hero.kc-inicio-motorista {
  margin-top: 0;
  margin-bottom: 14px;
}

.kc-inicio-motorista__vazio {
  margin-top: 10px;
}

.kc-inicio-motorista__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.mud-button-root.mud-button.kc-inicio-motorista__painel {
  color: var(--kc-fundo) !important;
}

.kc-dica.kc-veiculo-form__modo {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
}

.kc-veiculo-form__modo > .icone {
  flex: none;
  margin-top: 2px;
  --icone-primaria: var(--kc-accent2-800);
  --icone-secundaria: var(--kc-accent2-500);
}

.kc-veiculo-form__modo-corpo p {
  margin: 0 0 4px;
}

/* ---------- faturamento do mês (relatório mensal do motorista): filtro, plataformas, destaques, lista de lucro e dia a dia ---------- */

.kc-fatura__filtro {
  margin: 0 0 16px;
}

.kc-hero.kc-fatura__resumo {
  margin-top: 0;
}

.kc-fatura__detalhes {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 13px;
  line-height: 18.5px;
}

.kc-fatura__detalhes strong {
  display: block;
  font-size: 14px;
}

.kc-fatura__detalhes span {
  color: #645c50;
}

.kc-fatura__destaques {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 17px;
}

.kc-cartao.kc-fatura__destaque {
  margin: 0;
  padding: 15px 16px 16px;
  letter-spacing: 0;
}

.kc-fatura__destaque--melhor {
  background: var(--kc-accent2-100);
}

.kc-fatura__destaque--fraco {
  background: var(--kc-accent-200);
}

.kc-fatura__rotulo {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.125em;
  line-height: 14px;
  text-transform: uppercase;
}

.kc-fatura__destaque--melhor .kc-fatura__rotulo {
  color: var(--kc-accent2-700);
}

.kc-fatura__destaque--fraco .kc-fatura__rotulo {
  color: var(--kc-accent-800);
}

.kc-fatura__dia {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.kc-fatura__valor {
  margin: 3px 0 0;
  color: #645c50;
  font-size: 13px;
  line-height: 18px;
}

.kc-fatura__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.kc-fatura__lista dt {
  color: #645c50;
}

.kc-fatura__lista dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.kc-fatura__lista dd.kc-fatura__lista-destaque {
  color: var(--kc-accent2-700);
}

.kc-fatura__dias .kc-tabela {
  margin-top: 12px;
}

.kc-fatura__col-dia {
  width: 34%;
}

.kc-fatura__pdf {
  display: flex;
  margin: 17px 0 4px;
}

.kc-fatura__pdf > .mud-button-root.mud-button {
  min-height: 50px;
  padding: 8px 24px 8px 22px;
}

/* ---------- corrida (modo Motorista): o cartão "Livre / Em corrida" da tela Gravar, a folha de plataforma e valor e a lista no detalhe ---------- */

.kc-cartao.kc-gravar__corrida {
  margin-top: 14px;
  padding: 16px 18px 18px;
  letter-spacing: 0;
}

.kc-gravar__corrida-estado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.kc-gravar__corrida-selo {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-accent2-200);
  color: var(--kc-accent2-800);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

.kc-gravar__corrida--ativa {
  background: var(--kc-accent-200);
}

.kc-gravar__corrida--ativa .kc-gravar__corrida-selo {
  background: var(--kc-primaria);
  color: var(--kc-fundo);
}

.kc-gravar__corrida-tempo {
  font-size: 22px;
  line-height: 26px;
}

.kc-gravar__corrida-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kc-gravar__corrida-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 14px;
  color: #645c50;
  font-size: 13px;
  line-height: 18px;
}

.kc-gravar__corrida-numeros strong {
  color: var(--kc-texto);
}

.kc-corrida__resumo {
  margin: 0 0 14px;
}

.kc-corrida__resumo span {
  color: #645c50;
  font-size: 13px;
}

.kc-viagem-detalhe__corridas {
  list-style: none;
  margin: 0;
  padding: 6px 16px;
}

.kc-viagem-detalhe__corridas > li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--kc-divisor);
}

.kc-viagem-detalhe__corridas > li:last-child {
  border-bottom: 0;
}

.kc-viagem-detalhe__corridas strong {
  display: block;
  font-size: 14px;
  line-height: 20px;
}

.kc-viagem-detalhe__corridas small {
  display: block;
  color: #645c50;
  font-size: 12.5px;
  line-height: 17px;
}

.kc-viagem-detalhe__corrida-valor {
  flex: none;
  text-align: right;
}

.kc-viagem-detalhe__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 8px 4px 0;
  color: #645c50;
  font-size: 13px;
  line-height: 18px;
}

.kc-viagem-detalhe__ponto {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: -1px;
}

.kc-viagem-detalhe__ponto--aceite {
  background: var(--kc-accent-800);
}

.kc-viagem-detalhe__ponto--embarque {
  background: var(--kc-accent2-500);
}

.kc-viagem-detalhe__nota {
  margin: 10px 4px 0;
  color: #645c50;
  font-size: 13px;
  line-height: 18.5px;
}

/* ---------- corridas do dia (Fechar o dia e painel do motorista): a lista, a folha de editar e a sugestão por plataforma ---------- */

.kc-cartao.kc-corridas-dia {
  margin: 0 0 18px;
  padding: 17px 18px 12px;
  letter-spacing: 0;
}

.kc-motorista__corridas {
  margin-top: 17px;
}

.kc-motorista__corridas .kc-cartao.kc-corridas-dia {
  margin-bottom: 0;
}

.kc-corridas-dia .kc-cabecalho-secao {
  margin: 0 0 10px;
}

.kc-corridas-dia .kc-cabecalho-secao .kc-rotulo-secao {
  margin: 0;
}

.kc-corridas-dia__vazio,
.kc-corridas-dia__resumo {
  margin: 0 0 8px;
  color: #645c50;
  font-size: 13px;
  line-height: 18.5px;
}

.kc-corridas-dia__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kc-corridas-dia__lista > li {
  border-top: 1px solid var(--kc-divisor);
}

.kc-corridas-dia__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: var(--kc-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kc-corridas-dia__item:disabled {
  cursor: default;
  opacity: 0.7;
}

.kc-corridas-dia__item strong {
  display: block;
  font-size: 14px;
  line-height: 20px;
}

.kc-corridas-dia__item small {
  display: block;
  color: #645c50;
  font-size: 12.5px;
  line-height: 17px;
}

.kc-corridas-dia__valor {
  flex: none;
  text-align: right;
}

.kc-corridas-dia__valor strong.kc-corridas-dia__completar {
  color: var(--kc-accent-700);
}

/* A linha só para ler (relatório mensal): igual à da lista do dia, sem o toque de editar. */
.kc-corridas-dia__item--leitura {
  cursor: default;
}

.kc-fatura__sinais {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 12px;
}

.kc-fatura__sinais .kc-corridas-dia__veredito {
  margin-top: 0;
  font-size: 12.5px;
  line-height: 20px;
}

.kc-fatura__corridas {
  margin: 12px 0 0;
}

/* Leitura do mês escrita por IA (relatório mensal): o texto, o aviso de que é de IA e as ações (incluir no PDF, gerar de novo). */
.kc-fatura__ia-texto p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 21px;
}

.kc-fatura__ia-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 10px;
}

.kc-fatura__ia-consentimento {
  margin-top: 18px;
}

.kc-fatura__corridas > summary {
  cursor: pointer;
}

/* O "vale a pena?" da corrida, contando desde a solicitação: texto e cor (a cor sozinha não diz nada a quem não a enxerga). */
.kc-corridas-dia__veredito {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 9px;
  border-radius: var(--kc-raio-pilula);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 17px;
}

.kc-corridas-dia__veredito--verde {
  background: var(--kc-accent2-200);
  color: var(--kc-accent2-800);
}

.kc-corridas-dia__veredito--amarelo {
  background: var(--kc-accent-200);
  color: var(--kc-accent-800);
}

.kc-corridas-dia__veredito--vermelho {
  background: var(--kc-primaria);
  color: var(--kc-accent-100);
}

.kc-fechar__corridas {
  margin: 4px 0 2px;
  padding: 12px 14px;
  border-radius: 20px;
  font-size: 13px;
  line-height: 18.5px;
}

.kc-fechar__corridas-corpo p {
  margin: 0 0 4px;
}

.kc-fechar__corridas-diferenca {
  color: var(--kc-accent-800);
}

.kc-fechar__corridas .icone {
  flex: none;
  margin-top: 2px;
}

/* ---------- corridas gravadas no painel do motorista: os três R$ e a barra do km vazio ---------- */

.kc-corridas-resumo__numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 4px;
}

.kc-corridas-resumo__numeros > p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 0;
}

.kc-corridas-resumo__numeros strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  white-space: nowrap;
}

.kc-corridas-resumo__numeros small {
  color: #645c50;
  font-size: 12px;
  line-height: 16px;
}

.kc-corridas-resumo__km {
  margin-top: 12px;
}

.kc-corridas-resumo__barra {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: var(--kc-raio-pilula);
  background: var(--kc-superficie);
}

.kc-corridas-resumo__barra > span {
  display: block;
  height: 100%;
}

.kc-corridas-resumo__barra-passageiro {
  background: var(--kc-primaria);
}

.kc-corridas-resumo__barra-livre {
  background: var(--kc-accent2-400);
}

.kc-corridas-resumo__km .kc-motorista__nota {
  margin-top: 8px;
}

/* ---------- veículo compartilhado (6.6c): selo, cartão de procedência, tela Compartilhar e Convites ---------- */

.kc-veiculos__procedencia {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--kc-accent2-700);
  font-weight: 600;
}

.icone.kc-veiculo__compartilhado {
  flex: none;
  width: 14px;
  height: 14px;
}

/* No detalhe do veículo: o cartão de quem compartilhou (com a saída) e o link de compartilhar. */
.kc-cartao.kc-compartilhado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

.kc-compartilhado__avatar {
  flex: none;
}

.kc-compartilhado__texto {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kc-compartilhado__texto strong {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 21px;
}

.kc-compartilhado__texto small {
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18px;
}

.kc-compartilhado__erro {
  flex-basis: 100%;
  margin: 0;
}

/* Tela Compartilhar. */
.kc-compartilhar__regra {
  margin: 0 0 14px;
}

.kc-compartilhar__regra p {
  margin: 0;
}

.kc-compartilhar__convidar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.kc-compartilhar__aviso {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  color: var(--kc-accent2-800);
  font-size: 14.5px;
}

/* Convites enviados e recebidos: o cartão do lembrete, com mais espaço entre os botões. */
.kc-convite .kc-lembrete__acoes {
  flex-wrap: wrap;
  gap: 8px;
}

/* Grade do (+) num veículo só para leitura: o aviso acima das ações que sobram. */
.kc-grade-acoes__leitura {
  margin: 0 0 14px;
}

.kc-conta__convites {
  margin: 14px 0 0;
  text-align: center;
}

/* Abastecimento: o preço pago contra a média da ANP no município (acima em terracota claro, abaixo e na média em sálvia). */
.kc-dica.kc-anp {
  margin: 0 0 16px;
}

.kc-anp--acima {
  background: var(--kc-accent-100);
}

.kc-anp__detalhe {
  display: block;
  margin-top: 4px;
  color: var(--kc-texto-suave);
  font-size: 12.5px;
  line-height: 18px;
}

/* Gravar viagem lendo o carro (8.3): o cartão ao vivo com rotação, temperatura e velocidade do carro, e o aviso antes de iniciar. */
.kc-gravar__carro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.kc-gravar__carro-estado {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 14.5px;
}

.kc-gravar__carro-aviso {
  margin: 0 0 14px;
}

/* Detalhe da viagem lida pelo carro (8.3): consumo e custo medidos, números do motor, nota de condução e gráficos. */
.kc-dadoscarro__cartao {
  padding: 18px 18px 14px;
  margin-bottom: 12px;
}

.kc-dadoscarro__destaque {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}

.kc-dadoscarro__destaque strong {
  font-family: var(--kc-fonte-titulo);
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  color: var(--kc-accent-700);
}

.kc-dadoscarro__destaque small {
  color: var(--kc-texto-suave);
  font-size: 13px;
  line-height: 18px;
}

.kc-dadoscarro__nota {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 18px;
}

.kc-dadoscarro__descontos {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kc-dadoscarro__descontos li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
}

.kc-dadoscarro__descontos strong {
  color: var(--kc-accent-700);
  white-space: nowrap;
}

.kc-dadoscarro__grafico {
  padding: 14px 14px 10px;
  margin-bottom: 12px;
}

.kc-dadoscarro__grafico-titulo {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.kc-viagem__selo-carro {
  white-space: nowrap;
}

/* Falhas e diagnóstico do carro (8.4): ler, o resumo da luz de injeção, as falhas com o congelamento, a prontidão para a vistoria e o histórico. */
.kc-cartao.kc-falhas-pagina__ler {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  margin-top: 14px;
}

.kc-falhas-pagina__aviso {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 19px;
}

.kc-cartao.kc-falhas-pagina__resumo {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kc-cartao.kc-falhas-pagina__resumo--luz {
  background: var(--kc-accent-100);
}

.kc-falhas-pagina__luz,
.kc-falhas-pagina__linha {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 14.5px;
  line-height: 20px;
}

.kc-falhas-pagina__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.kc-falhas-pagina__item > .kc-falha {
  align-self: stretch;
}

.kc-cartao.kc-falhas-pagina__congelamento,
.kc-cartao.kc-falhas-pagina__identificacao {
  align-self: stretch;
  padding: 14px 18px;
  margin-top: 12px;
}

.kc-falhas-pagina__congelamento > summary,
.kc-falhas-pagina__identificacao > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
}

.kc-prontidao {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kc-prontidao li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
}

.kc-prontidao li > span {
  flex: 1;
}

.kc-prontidao li > small {
  color: var(--kc-texto-suave);
  font-size: 12px;
}

.kc-prontidao li[data-situacao="incompleto"] > small {
  color: var(--kc-accent-700);
  font-weight: 700;
}

.kc-cartao.kc-falhas-pagina__apagar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
}

.kc-cartao.kc-falhas-pagina__apagar > p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.kc-cartao.kc-falhas-pagina__historico {
  list-style: none;
  margin: 0;
  padding: 6px 18px;
}

.kc-falhas-pagina__historico > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--kc-linha, rgba(32, 30, 29, 0.12));
}

.kc-falhas-pagina__historico > li:first-child {
  border-top: 0;
}

.kc-falhas-pagina__historico-codigo {
  flex: none;
  min-width: 62px;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
}

.kc-falhas-pagina__historico > li[data-status="ativa"] .kc-falhas-pagina__historico-codigo {
  color: var(--kc-accent-700);
}

.kc-falhas-pagina__historico-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kc-falhas-pagina__historico-texto strong {
  font-size: 14.5px;
  line-height: 20px;
}

.kc-falhas-pagina__historico-texto small {
  color: var(--kc-texto-suave);
  font-size: 12.5px;
  line-height: 17px;
}

.kc-falhas-pagina__historico-servico {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Saúde do carro (8.5): bateria, horas de motor, sinais das viagens e o relatório. */
.kc-cartao.kc-saude__cartao {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 18px;
  margin-bottom: 12px;
}

.kc-saude__cartao > p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.kc-saude__titulo {
  font-weight: 700;
}

.kc-saude__passo {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 15px;
  line-height: 21px;
}

.kc-saude__passo--agora {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--kc-accent-100);
  color: var(--kc-accent-700);
  font-weight: 700;
  font-size: 17px;
}

.kc-saude__aviso {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 19px;
}

.kc-prontidao small {
  display: block;
  color: var(--kc-texto-suave);
  font-weight: 400;
}