@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
:root {
  --f7-theme-color: #aa0000;
  --f7-theme-color-rgb: 170, 0, 0;
  --f7-theme-color-shade: #880000;
  --f7-theme-color-tint: #cc3333;
  
  --f7-bars-bg-color: #aa0000;
  --f7-bars-bg-color-rgb: 170, 0, 0;
  --f7-bars-border-color: #aa0000;
  --f7-navbar-link-color: #fff;
  --f7-navbar-text-color: #fff;
  --f7-navbar-title-font-size: 17px;
  --f7-navbar-subtitle-text-color: rgba(255,255,255,.7);
  
  --f7-list-item-title-font-size: .92em;
  --rotate-car: 90deg;
}
body, html, #app {
  height: 100%;
}

.no-select {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
}

.version {
  text-align: center;
  font-weight: 300;
  font-size: .92em;
  color: var(--f7-theme-color);
  margin-bottom: 20px;
} .version b{
  font-weight: 600;
}

img.login_img{
  height: 250px;
  margin-top: 20px;
}

#map {
  height: 100vh !important;
}
.ios #map, .md #map {
  height: calc(100vh - var(--f7-safe-area-top));
  /*top: calc(var(--f7-safe-area-top) * -1 - 1.2em);*/
}
.device-desktop #map{
  top: 0!important;
}
.statusbar {
  background: transparent !important;
}
.search_object {
  bottom: 35px;
}

.link i.material-symbols-outlined {
  font-size: 22px !important;
}

/*LOADER*/
.preloaderImg {
  height: 180px;
}

/* CARD OBJECT */
.marker-card {
  position: relative;
}
.floating-card {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  background: #f1f1f1;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  overflow: hidden;
  z-index: 9999;
  color: #231f20;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.ios .floating-card, .md .floating-card {
  bottom: 110px;
}
.device-desktop .floating-card {
  bottom: 20px;
}
.floating-card.hidden {
  display: none;
}
.floating-card .card-content {
  display: flex;
  padding: 16px;
}
.floating-card .card-content .content_img {
  margin-top: 10px;
  position: relative;
  width: 100px;   /* o el tamaño que necesites */
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.floating-card .card-content .content_img img {
  margin-left: -20px;
  max-width: 80%;
  max-height: 80%;
  transform: rotate(0deg); /* Valor inicial */
  transition: transform 0.3s ease-in-out;
}
.floating-card .card-content .plate-xs {
  position: absolute;
  bottom: -2px;
  text-align: center;
  left: 0;
  width: 110px;
}
.floating-card .card-content .plate-xs h1 {
  font-size: .92em;
  color: #525252;
}
.floating-card .card-info {
  margin-top: 16px;
  margin-left: -5px;
}
.floating-card .card-info h1, .card-info h2 {
  margin: 0;
  color: #231f20;
}
.floating-card .card-info h1 {
  font-size: 1em;
}
.floating-card .card-info h2 {
  font-size: .8em;
  font-weight: 600;
}
.floating-card .card-info p{
  margin: 0;
}
.floating-card .card-footer {
  padding: 12px 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.floating-card .card-footer .status small{
  padding-right: 1em;
  color: rgba(0, 0, 0, .52);
}
.floating-card .card-footer .status small i{
  font-size: 2em !important;
}
.floating-card .card-footer .status.success small{
  color: #4caf50;
}

.top-statusbar-left {
  position: absolute;
  left: 5px;
  top: 5px;
}
.top-statusbar-left .statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  font-size: 11px;
  color: #231f20;
}
.top-statusbar-left .statusbar .status-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.top-statusbar-left .statusbar .status-item span {
  font-weight: 500;
}
.top-statusbar-left #top-notification {
  cursor: pointer;
}
.top-statusbar-left #top-notification img{
  height: 20px;
}
.point-status {
  width: 20px;
  height: 20px;
}

.top-statusbar-right {
  position: absolute;
  right: 5px;
  top: 2px;
}
.top-statusbar-right .statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  font-size: 11px;
  color: #231f20;
}
.top-statusbar-right .statusbar .status-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.top-statusbar-right .statusbar .status-item .gsm {
  width: auto;
  height: 1.32em;
  margin: 0 5px;
}
.top-statusbar-right .statusbar .status-item .porcent {
  font-weight: 600;
}
.top-statusbar-right .statusbar .status-item .battery {
  transform: rotate(90deg);
  width: 23px;
  height: auto;
}
.top-statusbar-right .statusbar .status-item .acc_0, .top-statusbar-right .statusbar .status-item .conn_off {
  color: #231f20;
}
.top-statusbar-right .statusbar .status-item .acc_1, .top-statusbar-right .statusbar .status-item .conn_on {
  color: #00ba54;
}
.top-statusbar-right .statusbar .status-item .status_i {
  color: #e0a200;
}
.top-statusbar-right .statusbar .status-item .status_s {
  color: #2196f3;
  font-size: 18px;
}
.top-statusbar-right #notification-bar {
  margin: 0 1px 0 5px;
}
.top-statusbar-right #notification-bar img {
  height: 16px;
}

/* PIN */
.pin-prompt .dialog-title {
  font-size: 18px !important;
  margin-bottom: 10px !important;
}
.pin-prompt .dialog {
  border-radius: 22px !important;
  padding-bottom: 20px;
}
.pin-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 15px 0;
}
.pin-dots span {
  width: 14px;
  height: 14px;
  background: #dadce0;
  border-radius: 50%;
  transition: 0.2s;
}
.pin-pad {
  text-align: center;
}
.pin-btn {
  width: 50px;
  height: 50px;
  margin: 6px;
  font-size: 20px;
  border-radius: 50%;
  border: none;
  background: #f1f3f4;
  transition: 0.2s;
}
.pin-btn:active {
  background: #e0e0e0;
  transform: scale(0.92);
}

/* ANIMATION */
.fade-slide-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideIn 0.8s ease-out forwards;
}
@keyframes fadeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bounce {
  animation: bounceIn 1s ease;
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

  .carcacha {
    animation: carcachaMove 0.72s infinite;
  }  
  @keyframes carcachaMove {
    0%   { transform: translate(0px, 0px) scale(1) rotate(var(--rotate-car)); }
    20%  { transform: translate(1px, -1px) scale(.98) rotate(var(--rotate-car)); }
    40%  { transform: translate(-1px, 1px) scale(.96) rotate(var(--rotate-car)); }
    60%  { transform: translate(1px, 1px) scale(.98) rotate(var(--rotate-car)); }
    80%  { transform: translate(-1px, -1px) scale(1) rotate(var(--rotate-car)); }
    100% { transform: translate(1px, 1px) scale(.98) rotate(var(--rotate-car)); }
  }

@keyframes ringbell {
  0% { transform: rotate(0); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-10deg); }
  30% { transform: rotate(7deg); }
  40% { transform: rotate(-5deg); }
  50% { transform: rotate(3deg); }
  60% { transform: rotate(-2deg); }
  70%, 100% { transform: rotate(0); }
}
.ring-bell {
  display: inline-block;
  transform-origin: top center;
}
.ring-bell-infinite {
  animation: ringbell 1.4s ease-in-out infinite;
}