.spu-trans-area {
  --spu-primary: #038c73;
  --spu-blue-inst: #004d80;
  --spu-text: #333;
  --spu-text-light: #666;
  --spu-border: #e0e0e0;
  --spu-trans-date-bg: #0fa1db;

  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  max-width: 1000px;
  margin: 20px auto;
}

.spu-trans-card {
  background: #fff;
  border: 1px solid var(--spu-border);
  border-left: 5px solid var(--spu-primary);
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 20px;
  display: grid;
  /* Define 2 colunas */
  grid-template-columns: 1fr 1fr;
  /* Define as 4 linhas solicitadas */
  grid-template-rows: repeat(4, auto);
  gap: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Utilitários de Alinhamento */
.spu-align-left {
  text-align: left;
}
.spu-align-right {
  text-align: right;
}

/* Estilização dos Textos */
.spu-trans-title {
  color: var(--spu-blue-inst);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
}

.spu-trans-date {
  font-weight: 600;
  color: var(--spu-blue-inst);
}

.spu-trans-plate {
  font-weight: 700; /* Aumentado para 700 para parecer um botão */
  color: #000000; /* Texto branco para contrastar com o fundo */
  background-color: #f0f0f0;

  /* Transformação em "Botão" */
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 0.85rem;

  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);

  /* Garante que não haja comportamento de clique */
  pointer-events: none;
  cursor: default;
  user-select: none;
}

.spu-trans-label {
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #303030;
  font-weight: bold;
  margin-bottom: 2px;
}

.spu-trans-value {
  font-size: 0.95rem;
  color: var(--spu-text);
}

.spu-trans-area-label {
  background: #e4d8b0;
  color: #070707;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: bold;
  display: inline-block;
}

/* Linha da Finalidade: Ocupa as duas colunas */
.spu-trans-finalidade {
  grid-column: 1 / span 2;
  border-top: 1px dashed var(--spu-border);
  padding-top: 10px;
}

/* Responsividade para telas muito pequenas */
@media (max-width: 600px) {
  .spu-trans-card {
    grid-template-columns: 1fr; /* Vira 1 coluna no celular */
    text-align: left !important;
  }
  .spu-align-right {
    text-align: left;
  }
  .spu-trans-finalidade {
    grid-column: 1;
  }
}

/* Estilo para os ícones */
.spu-align-right .spu-trans-meta {
    display: flex;
    flex-direction: row;
    justify-content: flex-end; /* Alinha tudo para a direita */
    gap: 10px; /* Espaço entre o horário e o KM */
    text-align: right;
}

.spu-trans-meta {
  display: flex;
  gap: 15px;
  margin-top: 5px;
  font-size: 0.85rem;
  color: var(--spu-text);
  font-weight: 600;
}

.spu-trans-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.spu-trans-meta i {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;

  background-color: var(--spu-text);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.icon-svg-min {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.spu-icon-clock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2C6.47,2,2,6.47,2,12s4.47,10,10,10s10-4.47,10-10S17.53,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M12.5,7H11v6l5.2,3.2l0.8-1.3l-4.5-2.7V7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2C6.47,2,2,6.47,2,12s4.47,10,10,10s10-4.47,10-10S17.53,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M12.5,7H11v6l5.2,3.2l0.8-1.3l-4.5-2.7V7z'/%3E%3C/svg%3E");
}
.spu-icon-road {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H4V7h16v10zM6 9h2v6H6V9zm4 0h2v6h-2V9zm4 0h2v6h-2V9zm4 0h2v6h-2V9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H4V7h16v10zM6 9h2v6H6V9zm4 0h2v6h-2V9zm4 0h2v6h-2V9zm4 0h2v6h-2V9z'/%3E%3C/svg%3E");
}