/* =========================================================
   LCR TRANSPORTES - APP MOTORISTA
   Mobile first / PWA
========================================================= */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;

  background: #071119;
}

body {
  min-height: 100vh;

  margin: 0;

  background:
    radial-gradient(
      circle at 72% 0%,
      rgba(20,136,244,.10),
      transparent 28%
    ),
    #071119;

  color: #e9f0f5;

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  -webkit-tap-highlight-color:
    transparent;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
}

a {
  color: inherit;

  text-decoration: none;
}

img {
  display: block;

  max-width: 100%;
}


/* =========================================================
   LOGIN
========================================================= */

.auth-page {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    24px
    18px;
}

.auth-shell {
  width: min(
    100%,
    420px
  );
}

.auth-brand {
  display: flex;
  justify-content: center;

  margin-bottom: 28px;
}

.auth-brand img {
  width: 178px;
  height: auto;

  object-fit: contain;
}

.auth-eyebrow {
  margin-bottom: 8px;

  color: #4b9dde;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;
}

.auth-title {
  margin: 0;

  color: #f3f6f8;

  font-size: 29px;
  font-weight: 720;

  letter-spacing: -.04em;
}

.auth-copy {
  margin:
    8px
    0
    24px;

  color: #718797;

  font-size: 13px;

  line-height: 1.6;
}

.auth-form {
  display: grid;

  gap: 15px;
}

.field label {
  display: block;

  margin-bottom: 7px;

  color: #9bacb8;

  font-size: 12px;
  font-weight: 600;
}

.input-wrap {
  position: relative;
}

.input-wrap > svg {
  width: 18px;
  height: 18px;

  position: absolute;

  left: 14px;
  top: 50%;

  transform: translateY(-50%);

  color: #597083;

  pointer-events: none;
}

.input-wrap input,
.field select,
.field textarea {
  width: 100%;

  outline: 0;

  border:
    1px solid
    #243541;

  border-radius: 11px;

  background:
    #0b151d;

  color:
    #e0e9ef;

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.input-wrap input {
  height: 52px;

  padding:
    0
    44px;

  font-size: 14px;
}

.field select {
  height: 49px;

  padding:
    0
    13px;

  font-size: 13px;
}

.field textarea {
  min-height: 88px;

  padding: 12px;

  resize: vertical;

  font-size: 13px;
}

.input-wrap input:focus,
.field select:focus,
.field textarea:focus {
  border-color:
    #327bb3;

  background:
    #0c1821;

  box-shadow:
    0 0 0 3px
    rgba(31,137,222,.08);
}

.input-wrap input::placeholder,
.field textarea::placeholder {
  color:
    #485d6e;
}

.password-toggle {
  width: 42px;
  height: 42px;

  position: absolute;

  right: 5px;
  top: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-50%);

  border-radius: 8px;

  background: transparent;

  color: #62798a;

  cursor: pointer;
}

.password-toggle svg {
  width: 18px;
  height: 18px;
}

.primary-button {
  width: 100%;
  min-height: 51px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  border-radius: 11px;

  background:
    #1488f4;

  color:
    #fff;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform .12s ease,
    background .15s ease;
}

.primary-button:active {
  transform:
    scale(.985);
}

.primary-button:disabled {
  opacity: .55;

  cursor: not-allowed;
}

.primary-button svg {
  width: 18px;
  height: 18px;
}

.secondary-button {
  width: 100%;
  min-height: 47px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  border:
    1px solid
    #263944;

  border-radius:
    10px;

  background:
    #0d1820;

  color:
    #b5c2cc;

  font-size:
    13px;
  font-weight:
    650;

  cursor:
    pointer;
}

.auth-message {
  display: none;

  padding:
    11px
    12px;

  border-radius:
    9px;

  font-size:
    12px;

  line-height:
    1.5;
}

.auth-message.active {
  display: block;
}

.auth-message.error {
  border:
    1px solid
    rgba(222,106,106,.18);

  background:
    rgba(222,106,106,.08);

  color:
    #ef9c9c;
}

.auth-message.success {
  border:
    1px solid
    rgba(63,192,136,.18);

  background:
    rgba(63,192,136,.08);

  color:
    #7ad7af;
}

.auth-footnote {
  margin-top:
    24px;

  color:
    #465b6b;

  font-size:
    11px;

  line-height:
    1.55;

  text-align:
    center;
}


/* =========================================================
   APP SHELL
========================================================= */

.app-body {
  padding-bottom:
    86px;
}

.app-topbar {
  position: sticky;

  top: 0;

  z-index: 80;

  min-height:
    69px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding:
    11px
    16px;

  border-bottom:
    1px solid
    rgba(42,58,70,.75);

  background:
    rgba(7,17,25,.92);

  backdrop-filter:
    blur(14px);
}

.topbar-brand {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;
}

.topbar-logo {
  width: 63px;
  height: 38px;

  object-fit:
    contain;
}

.topbar-copy {
  min-width: 0;
}

.topbar-copy span {
  display: block;

  color:
    #627687;

  font-size:
    10px;
}

.topbar-copy strong {
  display: block;

  overflow:
    hidden;

  margin-top:
    2px;

  color:
    #e4ebf0;

  font-size:
    13px;
  font-weight:
    680;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

.icon-button {
  width:
    42px;
  height:
    42px;

  flex:
    0 0 auto;

  display:
    inline-flex;
  align-items:
    center;
  justify-content:
    center;

  border:
    1px solid
    #253641;

  border-radius:
    11px;

  background:
    #0c161e;

  color:
    #8ea3b2;

  cursor:
    pointer;
}

.icon-button svg {
  width:
    18px;
  height:
    18px;
}

.app-main {
  width:
    min(100%, 680px);

  margin:
    0 auto;

  padding:
    18px
    15px
    26px;
}

.page-heading {
  margin-bottom:
    18px;
}

.page-heading h1 {
  margin:
    0;

  color:
    #eff4f7;

  font-size:
    23px;
  font-weight:
    720;

  letter-spacing:
    -.035em;
}

.page-heading p {
  margin:
    6px
    0
    0;

  color:
    #667b8a;

  font-size:
    12px;

  line-height:
    1.55;
}


/* =========================================================
   HOME
========================================================= */

.welcome-card {
  position:
    relative;

  overflow:
    hidden;

  padding:
    18px;

  border:
    1px solid
    #25435a;

  border-radius:
    15px;

  background:
    linear-gradient(
      135deg,
      #102a3d,
      #0d1b26 70%
    );
}

.welcome-card::after {
  content: "";

  width:
    170px;
  height:
    170px;

  position:
    absolute;

  right:
    -75px;
  top:
    -85px;

  border:
    1px solid
    rgba(38,146,232,.24);

  border-radius:
    50%;
}

.welcome-kicker {
  color:
    #75a8cc;

  font-size:
    10px;
  font-weight:
    650;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;
}

.welcome-card h1 {
  margin:
    6px
    0
    0;

  color:
    #f0f5f8;

  font-size:
    23px;
  font-weight:
    720;

  letter-spacing:
    -.035em;
}

.welcome-card p {
  max-width:
    360px;

  margin:
    8px
    0
    0;

  color:
    #8094a3;

  font-size:
    12px;

  line-height:
    1.55;
}

.quick-grid {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    10px;

  margin-top:
    14px;
}

.quick-card {
  min-height:
    123px;

  display:
    flex;
  flex-direction:
    column;
  justify-content:
    space-between;

  padding:
    14px;

  border:
    1px solid
    #21313c;

  border-radius:
    13px;

  background:
    #0d171f;

  cursor:
    pointer;

  transition:
    border-color .15s ease,
    background .15s ease,
    transform .12s ease;
}

.quick-card:active {
  transform:
    scale(.985);
}

.quick-card.primary {
  border-color:
    #28628b;

  background:
    #102538;
}

.quick-icon {
  width:
    38px;
  height:
    38px;

  display:
    flex;
  align-items:
    center;
  justify-content:
    center;

  border-radius:
    10px;

  background:
    #142633;

  color:
    #64a9dc;
}

.quick-card.primary .quick-icon {
  background:
    #153754;

  color:
    #64b9f6;
}

.quick-icon svg {
  width:
    19px;
  height:
    19px;
}

.quick-card strong {
  display:
    block;

  margin-top:
    14px;

  color:
    #dce6ed;

  font-size:
    13px;
  font-weight:
    680;
}

.quick-card span {
  display:
    block;

  margin-top:
    4px;

  color:
    #617585;

  font-size:
    10px;

  line-height:
    1.4;
}

.section-title {
  display:
    flex;
  align-items:
    center;
  justify-content:
    space-between;

  gap:
    10px;

  margin:
    22px
    0
    10px;
}

.section-title h2 {
  margin:
    0;

  color:
    #dce5eb;

  font-size:
    14px;
  font-weight:
    680;
}

.section-title a {
  color:
    #4f9dd9;

  font-size:
    11px;
}

.status-card {
  padding:
    14px;

  border:
    1px solid
    #21313c;

  border-radius:
    13px;

  background:
    #0d171f;
}

.status-row {
  display:
    flex;
  align-items:
    center;
  justify-content:
    space-between;

  gap:
    10px;
}

.status-row + .status-row {
  margin-top:
    12px;

  padding-top:
    12px;

  border-top:
    1px solid
    #1c2933;
}

.status-label {
  color:
    #667b8a;

  font-size:
    11px;
}

.status-value {
  color:
    #d5dfe6;

  font-size:
    12px;
  font-weight:
    650;
}


/* =========================================================
   FORMULÁRIOS
========================================================= */

.app-form {
  display:
    grid;

  gap:
    13px;
}

.form-card {
  padding:
    14px;

  border:
    1px solid
    #21313c;

  border-radius:
    13px;

  background:
    #0d171f;
}

.form-card-title {
  margin:
    0
    0
    13px;

  color:
    #dce5ec;

  font-size:
    13px;
  font-weight:
    680;
}

.form-grid {
  display:
    grid;

  gap:
    12px;
}

.field small {
  display:
    block;

  margin-top:
    6px;

  color:
    #526777;

  font-size:
    10px;

  line-height:
    1.4;
}

.file-actions {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    9px;
}

.file-choice {
  min-height:
    104px;

  display:
    flex;
  flex-direction:
    column;
  align-items:
    center;
  justify-content:
    center;

  gap:
    7px;

  padding:
    11px;

  border:
    1px dashed
    #315063;

  border-radius:
    12px;

  background:
    #0a151d;

  color:
    #83a2b8;

  cursor:
    pointer;

  text-align:
    center;
}

.file-choice.primary {
  border-color:
    #307bb0;

  background:
    #0d2231;

  color:
    #7bbcf0;
}

.file-choice svg {
  width:
    23px;
  height:
    23px;
}

.file-choice strong {
  color:
    #c8d5df;

  font-size:
    11px;
}

.file-choice span {
  color:
    #607787;

  font-size:
    9px;
}

.file-input {
  display:
    none;
}

.selected-file {
  display:
    none;

  margin-top:
    10px;

  padding:
    11px;

  border-radius:
    9px;

  background:
    #111f29;

  color:
    #91a5b4;

  font-size:
    11px;
}

.selected-file.active {
  display:
    block;
}

.image-preview {
  display:
    none;

  overflow:
    hidden;

  margin-top:
    10px;

  border:
    1px solid
    #253845;

  border-radius:
    11px;

  background:
    #081118;
}

.image-preview.active {
  display:
    block;
}

.image-preview img {
  width:
    100%;
  max-height:
    360px;

  object-fit:
    contain;
}


/* =========================================================
   LISTAS
========================================================= */

.list-stack {
  display:
    grid;

  gap:
    9px;
}

.list-card {
  padding:
    13px;

  border:
    1px solid
    #21313c;

  border-radius:
    12px;

  background:
    #0d171f;

  cursor:
    pointer;
}

.list-card-head {
  display:
    flex;
  align-items:
    flex-start;
  justify-content:
    space-between;

  gap:
    10px;
}

.list-card strong {
  color:
    #d9e3ea;

  font-size:
    12px;
  font-weight:
    670;
}

.list-card p {
  margin:
    5px
    0
    0;

  color:
    #647887;

  font-size:
    10px;

  line-height:
    1.45;
}

.list-card-meta {
  display:
    flex;
  align-items:
    center;
  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    10px;
}

.meta-chip,
.status-chip {
  min-height:
    23px;

  display:
    inline-flex;
  align-items:
    center;

  padding:
    0
    8px;

  border-radius:
    10px;

  background:
    #13222c;

  color:
    #7d93a3;

  font-size:
    9px;
}

.status-chip.pending {
  background:
    rgba(211,163,68,.09);

  color:
    #ddb863;
}

.status-chip.approved {
  background:
    rgba(64,190,135,.09);

  color:
    #72d4aa;
}

.empty-card {
  min-height:
    250px;

  display:
    flex;
  flex-direction:
    column;
  align-items:
    center;
  justify-content:
    center;

  padding:
    24px;

  border:
    1px solid
    #21313c;

  border-radius:
    13px;

  background:
    #0d171f;

  text-align:
    center;
}

.empty-icon {
  width:
    48px;
  height:
    48px;

  display:
    flex;
  align-items:
    center;
  justify-content:
    center;

  margin-bottom:
    12px;

  border:
    1px solid
    #29404e;

  border-radius:
    50%;

  color:
    #5c8099;
}

.empty-icon svg {
  width:
    21px;
  height:
    21px;
}

.empty-card strong {
  color:
    #d3dde4;

  font-size:
    12px;
}

.empty-card p {
  max-width:
    300px;

  margin:
    6px
    0
    0;

  color:
    #5f7483;

  font-size:
    10px;

  line-height:
    1.55;
}


/* =========================================================
   PERFIL
========================================================= */

.profile-card {
  padding:
    17px;

  border:
    1px solid
    #21313c;

  border-radius:
    14px;

  background:
    #0d171f;
}

.profile-top {
  display:
    flex;
  align-items:
    center;

  gap:
    13px;
}

.profile-photo {
  width:
    68px;
  height:
    68px;

  flex:
    0 0 auto;

  display:
    flex;
  align-items:
    center;
  justify-content:
    center;

  overflow:
    hidden;

  border:
    1px solid
    #2a4354;

  border-radius:
    50%;

  background:
    #102b3d;

  color:
    #74b7e8;

  font-size:
    19px;
  font-weight:
    750;
}

.profile-photo img {
  width:
    100%;
  height:
    100%;

  object-fit:
    cover;
}

.profile-info {
  min-width:
    0;
}

.profile-info strong {
  display:
    block;

  overflow:
    hidden;

  color:
    #e3ebf0;

  font-size:
    16px;
  font-weight:
    700;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

.profile-info span {
  display:
    block;

  overflow:
    hidden;

  margin-top:
    4px;

  color:
    #687d8d;

  font-size:
    11px;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

.profile-data {
  display:
    grid;

  gap:
    10px;

  margin-top:
    16px;

  padding-top:
    14px;

  border-top:
    1px solid
    #1e2b35;
}

.profile-data-row {
  display:
    flex;
  align-items:
    center;
  justify-content:
    space-between;

  gap:
    12px;

  font-size:
    11px;
}

.profile-data-row span {
  color:
    #637887;
}

.profile-data-row strong {
  color:
    #bdcad3;

  font-weight:
    620;

  text-align:
    right;
}


/* =========================================================
   BOTTOM NAV
========================================================= */

.bottom-nav {
  height:
    70px;

  position:
    fixed;

  z-index:
    100;

  left:
    10px;
  right:
    10px;
  bottom:
    max(
      10px,
      env(safe-area-inset-bottom)
    );

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  overflow:
    hidden;

  border:
    1px solid
    #263743;

  border-radius:
    15px;

  background:
    rgba(10,20,28,.96);

  box-shadow:
    0 12px 35px
    rgba(0,0,0,.34);

  backdrop-filter:
    blur(14px);
}

.bottom-nav a {
  display:
    flex;
  flex-direction:
    column;
  align-items:
    center;
  justify-content:
    center;

  gap:
    4px;

  color:
    #5f7484;

  font-size:
    9px;
  font-weight:
    600;
}

.bottom-nav a.active {
  color:
    #5aacf0;
}

.bottom-nav svg {
  width:
    18px;
  height:
    18px;
}


/* =========================================================
   TOAST
========================================================= */

.app-toast {
  position:
    fixed;

  z-index:
    2000;

  left:
    50%;
  bottom:
    94px;

  width:
    min(
      calc(100% - 32px),
      430px
    );

  padding:
    11px
    13px;

  transform:
    translate(
      -50%,
      20px
    );

  opacity:
    0;

  pointer-events:
    none;

  border:
    1px solid
    #2b3e4a;

  border-radius:
    10px;

  background:
    #111e27;

  color:
    #b7c5cf;

  font-size:
    11px;

  text-align:
    center;

  transition:
    .18s ease;
}

.app-toast.active {
  transform:
    translate(
      -50%,
      0
    );

  opacity:
    1;
}

.app-toast.success {
  border-color:
    rgba(65,191,137,.26);

  color:
    #7ad5ae;
}

.app-toast.error {
  border-color:
    rgba(220,103,103,.26);

  color:
    #ef9b9b;
}


/* =========================================================
   DESKTOP PREVIEW
========================================================= */

@media(min-width: 760px) {

  .app-body {
    max-width:
      520px;

    margin:
      0 auto;

    border-left:
      1px solid
      #15242f;

    border-right:
      1px solid
      #15242f;

    background:
      #071119;
  }

  .bottom-nav {
    width:
      490px;

    left:
      50%;
    right:
      auto;

    transform:
      translateX(-50%);
  }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media(max-width: 390px) {

  .quick-grid {
    grid-template-columns:
      1fr;
  }

  .file-actions {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   INSTALAÇÃO DO PWA
========================================================= */

.install-card {
  display:
    flex;
  align-items:
    center;

  gap:
    12px;

  margin-top:
    14px;

  padding:
    13px;

  border:
    1px solid
    #2b536f;

  border-radius:
    13px;

  background:
    linear-gradient(
      135deg,
      #102637,
      #0c1b26
    );
}

.install-card[hidden] {
  display:
    none !important;
}

.install-card-icon {
  width:
    42px;
  height:
    42px;

  flex:
    0 0 auto;

  display:
    flex;
  align-items:
    center;
  justify-content:
    center;

  border-radius:
    11px;

  background:
    #153752;

  color:
    #63b6ef;
}

.install-card-icon svg {
  width:
    20px;
  height:
    20px;
}

.install-card-copy {
  min-width:
    0;

  flex:
    1;
}

.install-card-copy strong {
  display:
    block;

  color:
    #e4edf3;

  font-size:
    12px;
  font-weight:
    680;
}

.install-card-copy span {
  display:
    block;

  margin-top:
    3px;

  color:
    #6c8191;

  font-size:
    10px;

  line-height:
    1.4;
}

.install-card-button {
  min-height:
    35px;

  flex:
    0 0 auto;

  padding:
    0 11px;

  border-radius:
    8px;

  background:
    #1488f4;

  color:
    white;

  font-size:
    10px;
  font-weight:
    700;

  cursor:
    pointer;
}

.install-sheet {
  position:
    fixed;

  inset:
    0;

  z-index:
    3000;

  display:
    none;
  align-items:
    flex-end;

  padding:
    14px;

  background:
    rgba(2,7,11,.76);

  backdrop-filter:
    blur(5px);
}

.install-sheet.active {
  display:
    flex;
}

.install-sheet-card {
  width:
    min(
      100%,
      520px
    );

  margin:
    0 auto;

  padding:
    12px
    14px
    calc(
      14px +
      env(safe-area-inset-bottom)
    );

  border:
    1px solid
    #293d4b;

  border-radius:
    18px;

  background:
    #0d1821;
}

.install-sheet-handle {
  width:
    36px;
  height:
    4px;

  margin:
    0 auto
    13px;

  border-radius:
    10px;

  background:
    #2b3d49;
}

.install-sheet-title {
  display:
    flex;
  align-items:
    center;

  gap:
    11px;
}

.install-sheet-icon {
  width:
    43px;
  height:
    43px;

  flex:
    0 0 auto;

  display:
    flex;
  align-items:
    center;
  justify-content:
    center;

  border-radius:
    11px;

  background:
    #153650;

  color:
    #69b8ef;
}

.install-sheet-icon svg {
  width:
    20px;
  height:
    20px;
}

.install-sheet-title strong {
  display:
    block;

  color:
    #e5edf2;

  font-size:
    13px;
}

.install-sheet-title span {
  display:
    block;

  margin-top:
    3px;

  color:
    #687d8d;

  font-size:
    10px;
}

.install-steps {
  display:
    grid;

  gap:
    9px;

  margin:
    16px
    0;
}

.install-steps > div {
  display:
    grid;

  grid-template-columns:
    28px
    1fr;

  gap:
    9px;

  align-items:
    center;

  padding:
    10px;

  border-radius:
    10px;

  background:
    #101e28;

  color:
    #879ba9;

  font-size:
    11px;

  line-height:
    1.45;
}

.install-steps b {
  width:
    28px;
  height:
    28px;

  display:
    flex;
  align-items:
    center;
  justify-content:
    center;

  border-radius:
    50%;

  background:
    #17344a;

  color:
    #71b7ea;

  font-size:
    11px;
}


/* =========================================================
   GPS
========================================================= */

.gps-card {
  margin-top:
    14px;

  padding:
    14px;

  border:
    1px solid
    #263a48;

  border-radius:
    13px;

  background:
    #0d171f;
}

.gps-card-top {
  display:
    flex;
  align-items:
    flex-start;
  justify-content:
    space-between;

  gap:
    12px;
}

.gps-title {
  display:
    flex;
  align-items:
    center;

  gap:
    10px;
}

.gps-title-icon {
  width:
    38px;
  height:
    38px;

  flex:
    0 0 auto;

  display:
    flex;
  align-items:
    center;
  justify-content:
    center;

  border-radius:
    10px;

  background:
    #112635;

  color:
    #65a9da;
}

.gps-title-icon svg {
  width:
    18px;
  height:
    18px;
}

.gps-title strong {
  display:
    block;

  color:
    #dce6ed;

  font-size:
    12px;
}

.gps-title span {
  display:
    block;

  margin-top:
    3px;

  color:
    #647989;

  font-size:
    10px;
}

.gps-indicator {
  min-height:
    24px;

  display:
    inline-flex;
  align-items:
    center;

  gap:
    6px;

  padding:
    0 8px;

  border-radius:
    10px;

  background:
    rgba(108,128,143,.08);

  color:
    #728796;

  font-size:
    9px;
  font-weight:
    650;
}

.gps-indicator::before {
  content:
    "";

  width:
    6px;
  height:
    6px;

  border-radius:
    50%;

  background:
    #6e8190;
}

.gps-indicator.active {
  background:
    rgba(65,191,137,.09);

  color:
    #72d5aa;
}

.gps-indicator.active::before {
  background:
    #42c58e;

  box-shadow:
    0 0 0 4px
    rgba(66,197,142,.08);
}

.gps-indicator.error {
  background:
    rgba(220,103,103,.08);

  color:
    #e38f8f;
}

.gps-indicator.error::before {
  background:
    #dc6767;
}

.gps-data-grid {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    8px;

  margin-top:
    13px;
}

.gps-data-item {
  padding:
    9px;

  border-radius:
    9px;

  background:
    #101e28;
}

.gps-data-item span {
  display:
    block;

  color:
    #566c7c;

  font-size:
    9px;
}

.gps-data-item strong {
  display:
    block;

  overflow:
    hidden;

  margin-top:
    4px;

  color:
    #afbec9;

  font-size:
    11px;
  font-weight:
    650;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

.gps-message {
  margin-top:
    11px;

  color:
    #637887;

  font-size:
    10px;

  line-height:
    1.5;
}

.gps-actions {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    8px;

  margin-top:
    12px;
}

.gps-action {
  min-height:
    42px;

  display:
    inline-flex;
  align-items:
    center;
  justify-content:
    center;

  gap:
    7px;

  border:
    1px solid
    #2a3c48;

  border-radius:
    10px;

  background:
    #111e27;

  color:
    #a5b5c1;

  font-size:
    11px;
  font-weight:
    650;

  cursor:
    pointer;
}

.gps-action.primary {
  border-color:
    #1488f4;

  background:
    #1488f4;

  color:
    white;
}

.gps-action.danger {
  border-color:
    rgba(220,103,103,.18);

  background:
    rgba(220,103,103,.07);

  color:
    #e49595;
}

.gps-action svg {
  width:
    15px;
  height:
    15px;
}

.gps-note {
  display:
    flex;

  gap:
    8px;

  margin-top:
    11px;

  padding:
    10px;

  border-radius:
    9px;

  background:
    rgba(211,163,68,.06);

  color:
    #a9915b;

  font-size:
    9px;

  line-height:
    1.45;
}

.gps-note svg {
  width:
    14px;
  height:
    14px;

  flex:
    0 0 auto;
}

@media(max-width: 390px) {

  .install-card {
    align-items:
      flex-start;

    flex-wrap:
      wrap;
  }

  .install-card-button {
    width:
      100%;
  }

  .gps-data-grid,
  .gps-actions {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   VIAGEM - FLUXO GUIADO
========================================================= */

.trip-progress {
  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    6px;

  margin-bottom:
    15px;
}

.trip-progress-step {
  height:
    4px;

  border-radius:
    99px;

  background:
    #1d2b35;
}

.trip-progress-step.active {
  background:
    #1488f4;
}

.trip-step {
  display:
    none;
}

.trip-step.active {
  display:
    block;
}

.trip-choice-grid {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    10px;
}

.trip-choice {
  min-height:
    124px;

  display:
    flex;
  flex-direction:
    column;
  justify-content:
    space-between;

  padding:
    14px;

  border:
    1px solid
    #253844;

  border-radius:
    13px;

  background:
    #0d171f;

  color:
    #7f93a2;

  cursor:
    pointer;

  transition:
    .15s ease;
}

.trip-choice.selected {
  border-color:
    #2a75a9;

  background:
    #102538;
}

.trip-choice-icon {
  width:
    40px;
  height:
    40px;

  display:
    flex;
  align-items:
    center;
  justify-content:
    center;

  border-radius:
    10px;

  background:
    #132633;

  color:
    #64a9dc;
}

.trip-choice-icon svg {
  width:
    20px;
  height:
    20px;
}

.trip-choice strong {
  display:
    block;

  margin-top:
    13px;

  color:
    #d9e4eb;

  font-size:
    12px;
}

.trip-choice span {
  display:
    block;

  margin-top:
    4px;

  font-size:
    10px;

  line-height:
    1.45;
}

.company-vehicles {
  display:
    grid;

  gap:
    8px;
}

.company-vehicle {
  width:
    100%;

  display:
    flex;
  align-items:
    center;
  justify-content:
    space-between;

  gap:
    12px;

  padding:
    12px;

  border:
    1px solid
    #243642;

  border-radius:
    11px;

  background:
    #0c161e;

  color:
    #9eb0bc;

  text-align:
    left;

  cursor:
    pointer;
}

.company-vehicle.selected {
  border-color:
    #2c78ad;

  background:
    #102538;
}

.company-vehicle:disabled {
  opacity:
    .58;

  cursor:
    not-allowed;
}

.company-vehicle-main {
  min-width:
    0;
}

.company-vehicle-main strong {
  display:
    block;

  color:
    #dce6ed;

  font-size:
    12px;

  letter-spacing:
    .035em;
}

.company-vehicle-main span {
  display:
    block;

  margin-top:
    4px;

  overflow:
    hidden;

  color:
    #677c8b;

  font-size:
    10px;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

.vehicle-route-badge {
  min-height:
    24px;

  flex:
    0 0 auto;

  display:
    inline-flex;
  align-items:
    center;

  padding:
    0
    8px;

  border-radius:
    10px;

  background:
    rgba(220,103,103,.08);

  color:
    #e19090;

  font-size:
    9px;
  font-weight:
    650;
}

.vehicle-free-badge {
  min-height:
    24px;

  flex:
    0 0 auto;

  display:
    inline-flex;
  align-items:
    center;

  padding:
    0
    8px;

  border-radius:
    10px;

  background:
    rgba(65,191,137,.08);

  color:
    #72d3a9;

  font-size:
    9px;
  font-weight:
    650;
}

.tutorial-stack {
  display:
    grid;

  gap:
    9px;
}

.tutorial-card {
  display:
    grid;

  grid-template-columns:
    42px
    1fr;

  gap:
    11px;

  align-items:
    center;

  padding:
    12px;

  border:
    1px solid
    #21333f;

  border-radius:
    12px;

  background:
    #0d171f;
}

.tutorial-number {
  width:
    42px;
  height:
    42px;

  display:
    flex;
  align-items:
    center;
  justify-content:
    center;

  border-radius:
    11px;

  background:
    #132b3c;

  color:
    #65b2e8;

  font-size:
    13px;
  font-weight:
    750;
}

.tutorial-card strong {
  display:
    block;

  color:
    #dce6ed;

  font-size:
    12px;
}

.tutorial-card p {
  margin:
    4px
    0
    0;

  color:
    #657a89;

  font-size:
    10px;

  line-height:
    1.5;
}

.trip-disclosure {
  display:
    flex;

  gap:
    9px;

  margin-top:
    11px;

  padding:
    11px;

  border:
    1px solid
    rgba(70,150,210,.15);

  border-radius:
    10px;

  background:
    rgba(29,105,160,.07);

  color:
    #7f9eb3;

  font-size:
    10px;

  line-height:
    1.5;
}

.trip-disclosure svg {
  width:
    16px;
  height:
    16px;

  flex:
    0 0 auto;

  color:
    #5fa7dc;
}

.trip-photo-stack {
  display:
    grid;

  gap:
    10px;
}

.trip-photo-card {
  overflow:
    hidden;

  border:
    1px solid
    #243642;

  border-radius:
    12px;

  background:
    #0c161e;
}

.trip-photo-head {
  display:
    flex;
  align-items:
    center;
  justify-content:
    space-between;

  gap:
    10px;

  padding:
    11px
    12px;

  border-bottom:
    1px solid
    #1f2e38;
}

.trip-photo-head strong {
  color:
    #d9e3ea;

  font-size:
    11px;
}

.trip-photo-head span {
  color:
    #5e7483;

  font-size:
    9px;
}

.trip-photo-capture {
  min-height:
    142px;

  display:
    flex;
  flex-direction:
    column;
  align-items:
    center;
  justify-content:
    center;

  gap:
    7px;

  padding:
    13px;

  color:
    #6c8495;

  cursor:
    pointer;
}

.trip-photo-capture svg {
  width:
    26px;
  height:
    26px;

  color:
    #5ba9df;
}

.trip-photo-capture strong {
  color:
    #b9c8d2;

  font-size:
    11px;
}

.trip-photo-preview {
  display:
    none;

  width:
    100%;
  height:
    190px;

  object-fit:
    cover;
}

.trip-photo-card.has-photo
.trip-photo-capture {
  display:
    none;
}

.trip-photo-card.has-photo
.trip-photo-preview {
  display:
    block;
}

.trip-photo-change {
  display:
    none;

  width:
    calc(100% - 20px);

  min-height:
    36px;

  align-items:
    center;
  justify-content:
    center;

  gap:
    6px;

  margin:
    10px;

  border:
    1px solid
    #2b3f4c;

  border-radius:
    9px;

  background:
    #111f29;

  color:
    #9dafbb;

  font-size:
    10px;
  font-weight:
    650;

  cursor:
    pointer;
}

.trip-photo-card.has-photo
.trip-photo-change {
  display:
    flex;
}

.trip-photo-change svg {
  width:
    14px;
  height:
    14px;
}

.trip-summary {
  display:
    grid;

  gap:
    9px;
}

.trip-summary-row {
  display:
    flex;
  align-items:
    flex-start;
  justify-content:
    space-between;

  gap:
    14px;

  padding-bottom:
    9px;

  border-bottom:
    1px solid
    #1d2b35;
}

.trip-summary-row:last-child {
  padding-bottom:
    0;

  border-bottom:
    0;
}

.trip-summary-row span {
  color:
    #637887;

  font-size:
    10px;
}

.trip-summary-row strong {
  max-width:
    64%;

  color:
    #c4d0d8;

  font-size:
    11px;
  font-weight:
    650;

  text-align:
    right;
}

.trip-nav-actions {
  display:
    grid;

  grid-template-columns:
    auto
    1fr;

  gap:
    8px;

  margin-top:
    14px;
}

.trip-back-button {
  min-width:
    50px;
  min-height:
    49px;

  display:
    inline-flex;
  align-items:
    center;
  justify-content:
    center;

  border:
    1px solid
    #283a46;

  border-radius:
    11px;

  background:
    #0d1820;

  color:
    #8499a8;

  cursor:
    pointer;
}

.trip-back-button svg {
  width:
    18px;
  height:
    18px;
}

.active-trip-card {
  overflow:
    hidden;

  border:
    1px solid
    #27516d;

  border-radius:
    15px;

  background:
    linear-gradient(
      135deg,
      #10283a,
      #0d1b26 76%
    );
}

.active-trip-top {
  display:
    flex;
  align-items:
    center;
  justify-content:
    space-between;

  gap:
    12px;

  padding:
    15px;

  border-bottom:
    1px solid
    rgba(75,137,179,.16);
}

.active-trip-top span {
  display:
    block;

  color:
    #6f92aa;

  font-size:
    10px;
}

.active-trip-top strong {
  display:
    block;

  margin-top:
    4px;

  color:
    #e2ebf0;

  font-size:
    15px;
}

.route-live-badge {
  min-height:
    27px;

  display:
    inline-flex;
  align-items:
    center;

  gap:
    6px;

  padding:
    0
    9px;

  border-radius:
    12px;

  background:
    rgba(65,191,137,.09);

  color:
    #72d5aa;

  font-size:
    9px;
  font-weight:
    700;
}

.route-live-badge::before {
  content:
    "";

  width:
    6px;
  height:
    6px;

  border-radius:
    50%;

  background:
    #42c58e;
}

.active-trip-body {
  padding:
    14px;
}

.active-trip-grid {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    8px;
}

.active-trip-item {
  padding:
    10px;

  border-radius:
    10px;

  background:
    rgba(8,19,27,.55);
}

.active-trip-item span {
  display:
    block;

  color:
    #5d7586;

  font-size:
    9px;
}

.active-trip-item strong {
  display:
    block;

  margin-top:
    4px;

  color:
    #bdcbd4;

  font-size:
    11px;
}

.finish-trip-button {
  width:
    100%;
  min-height:
    48px;

  display:
    inline-flex;
  align-items:
    center;
  justify-content:
    center;

  gap:
    8px;

  margin-top:
    12px;

  border:
    1px solid
    rgba(220,103,103,.18);

  border-radius:
    11px;

  background:
    rgba(220,103,103,.07);

  color:
    #e59a9a;

  font-size:
    12px;
  font-weight:
    700;

  cursor:
    pointer;
}

.finish-trip-button svg {
  width:
    17px;
  height:
    17px;
}

@media(max-width: 390px) {

  .trip-choice-grid {
    grid-template-columns:
      1fr;
  }

  .active-trip-grid {
    grid-template-columns:
      1fr;
  }

}