@charset "UTF-8";
@font-face {
  font-family: "BebasNeue";
  src: url("/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
:root {
  --font-headers: "BebasNeue", Arial, sans-serif;
  --font-content: "Lato", Arial, sans-serif;
  --rgb-primary: 69,90,100;
  --rgb-primary-light: 113,135,146;
  --rgb-primary-dark: 28,49,58;
  --rgb-secondary: 0,145,234;
  --rgb-secondary-light: 100,193,255;
  --rgb-secondary-dark: 0,100,183;
  --rgb-light: 245,245,245;
  --rgb-dark: 33,33,33;
  --color-primary: rgb(var(--rgb-primary));
  --color-primary-light: rgb(var(--rgb-primary-light));
  --color-primary-dark: rgb(var(--rgb-primary-dark));
  --color-accent: rgb(var(--rgb-accent));
  --color-secondary: rgb(var(--rgb-secondary));
  --color-secondary-dark: rgb(var(--rgb-secondary-dark));
  --color-secondary-light: rgb(var(--rgb-secondary-light));
  --color-light: rgb(var(--rgb-light));
  --color-dark: rgb(var(--rgb-dark));
  --color-error: red;
  --color-success: green;
  --color-warning: yellow;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-content);
  margin: 0;
  padding: 0;
  background-color: var(--color-light);
}

.header {
  font-family: var(--font-headers);
}

/* MISC */
.hidden {
  display: none;
}

.raised {
  box-shadow: 0 3px 6px -3px var(--color-dark);
}

.btn {
  -webkit-appearance: none;
  background-color: var(--color-secondary);
  color: var(--color-light);
  font-family: var(--font-headers);
  border: none;
  padding: 0.25em 1em;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 0.25em;
}

select {
  border-radius: 1em;
  padding: 0.5em 2em;
  border: none;
}

input {
  border-radius: 1em;
  padding: 0.5em 2em;
  border: none;
}

/* PAGE */
.page {
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 1rem;
}
.page .logo {
  margin-bottom: 1rem;
}
.page .logo img {
  width: 15rem;
  max-width: 100%;
}
@keyframes wave {
  0% {
    left: 0;
    transform: translateX(-100%);
  }
  100% {
    left: 100%;
    transform: translateX(0%);
  }
}
.page .wave-loading {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, transparent, white, transparent);
  opacity: 50%;
  position: absolute;
  top: 0;
  animation: wave 1s ease infinite;
}
.page.pending section.main-content .status {
  background-color: var(--color-primary-light);
  color: var(--color-light);
}
.page.pending section.main-content .status::before {
  content: "PROCESANDO";
}
.page.pending section.main-content .status::after {
  content: "\f017";
}
.page.pending section.main-content .steps i.pending {
  color: var(--color-secondary);
}
.page.pending section.main-content .steps .line.pending {
  background-color: var(--color-secondary);
}
.page.ready section.main-content .status {
  background-color: var(--color-primary);
  color: var(--color-light);
}
.page.ready section.main-content .status::before {
  content: "EMPACANDO";
}
.page.ready section.main-content .status::after {
  content: "\f49e";
}
.page.ready section.main-content .steps i.pending, .page.ready section.main-content .steps i.package {
  color: var(--color-secondary);
}
.page.ready section.main-content .steps .line.pending, .page.ready section.main-content .steps .line.package {
  background-color: var(--color-secondary);
}
.page.shipped section.main-content .status {
  background-color: var(--color-secondary);
  color: var(--color-light);
}
.page.shipped section.main-content .status::before {
  content: "EN CAMINO";
}
.page.shipped section.main-content .status::after {
  content: "\f48b";
}
.page.shipped section.main-content .steps i.pending, .page.shipped section.main-content .steps i.package, .page.shipped section.main-content .steps i.shipped {
  color: var(--color-secondary);
}
.page.shipped section.main-content .steps .line.pending, .page.shipped section.main-content .steps .line.package, .page.shipped section.main-content .steps .line.shipped {
  background-color: var(--color-secondary);
}
.page.completed section.main-content .status {
  background-color: var(--color-success);
  color: var(--color-light);
}
.page.completed section.main-content .status .wave-loading {
  display: none;
}
.page.completed section.main-content .status::before {
  content: "ENTREGADO";
}
.page.completed section.main-content .status::after {
  content: "\f058";
}
.page.completed section.main-content .steps .wave-loading {
  display: none;
}
.page.completed section.main-content .steps i.pending, .page.completed section.main-content .steps i.package, .page.completed section.main-content .steps i.shipped, .page.completed section.main-content .steps i.completed {
  color: var(--color-success);
}
.page.completed section.main-content .steps .line.pending, .page.completed section.main-content .steps .line.package, .page.completed section.main-content .steps .line.shipped, .page.completed section.main-content .steps .line.completed {
  background-color: var(--color-success);
}
.page.completed section.map-section .controls {
  display: none;
}
.page.cancelled section.main-content .status {
  background-color: var(--color-error);
  color: var(--color-light);
}
.page.cancelled section.main-content .status .wave-loading {
  display: none;
}
.page.cancelled section.main-content .status::before {
  content: "CANCELADO";
}
.page.cancelled section.main-content .status::after {
  content: "\f057";
}
.page.cancelled section.main-content .steps {
  display: none;
}
.page.cancelled section.map-section {
  display: none;
}
.page section.main-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 1rem;
}
.page section.main-content .ref {
  font-weight: bold;
  font-size: 2rem;
  margin: 1rem 0;
}
.page section.main-content .status {
  font-size: 2rem;
  font-family: var(--font-headers);
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  line-height: 1em;
}
.page section.main-content .status::before {
  content: "CARGANDO...";
}
.page section.main-content .status::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 0.5em;
}
.page section.main-content .steps {
  display: flex;
  align-items: center;
  color: var(--color-primary-light);
  font-size: 1.5rem;
  position: relative;
  overflow: hidden;
}
.page section.main-content .steps i {
  margin: 0 0.25rem;
}
.page section.main-content .steps i.pending::before {
  content: "\f017";
}
.page section.main-content .steps i.package::before {
  content: "\f49e";
}
.page section.main-content .steps i.shipped::before {
  content: "\f48b";
}
.page section.main-content .steps i.completed::before {
  content: "\f058";
}
.page section.main-content .steps .line {
  background-color: var(--color-primary-light);
  width: 1.25rem;
  height: 0.25rem;
  border-radius: 0.05rem;
}
.page section.main-content .name,
.page section.main-content .phone {
  font-weight: bold;
  font-size: 1.2rem;
}
.page section.main-content .phone::after,
.page section.main-content .address::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 0.5em;
}
.page section.main-content .phone::after {
  content: "\f095";
}
.page section.main-content .address::after {
  content: "\f3c5";
}
.page section.main-content .address {
  margin-top: 0.5rem;
  font-size: 1.2rem;
}
.page section.main-content .total {
  font-weight: bold;
  font-size: 1.2rem;
  margin: 1rem 0;
}
.page section.main-content .total::before {
  content: "TOTAL: $";
}
.page section.main-content .products {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 1rem;
}
.page section.map-section {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  position: relative;
  padding: 0.5rem;
}
.page section.map-section .map {
  height: 100vw;
  width: 100%;
  max-height: 15rem;
  max-width: 25rem;
  border-radius: 0.25rem;
}
.page section.map-section .map[disabled], .page section.map-section .map[updating] {
  pointer-events: none;
  opacity: 60%;
}
.page section.map-section .map[disabled] ~ .instructions, .page section.map-section .map[updating] ~ .instructions {
  display: none;
}
.page section.map-section .map:not([disabled]) ~ .controls span.edit {
  background-color: var(--color-error);
}
.page section.map-section .map:not([disabled]) ~ .controls span.edit::after {
  content: "CANCELAR";
}
.page section.map-section .map:not([disabled]) ~ .controls span.save {
  display: inline;
}
.page section.map-section .map[updating] ~ .controls span.edit {
  background-color: gray;
  pointer-events: none;
}
.page section.map-section .map[updating] ~ .controls span.edit::after {
  content: "GUARDANDO...";
}
.page section.map-section .map[updating] ~ .controls .wave-loading {
  display: block;
}
.page section.map-section .controls {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}
.page section.map-section .controls span.edit::after {
  content: "EDITAR UBICACIÓN";
}
.page section.map-section .controls span.save {
  background-color: var(--color-success);
  display: none;
}
.page section.map-section .controls span.save::after {
  content: "GUARDAR";
}
.page section.map-section .controls .wave-loading {
  display: none;
}
.page section.map-section .instructions {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 0.25rem;
  gap: 0.25rem;
  color: var(--color-primary);
}
.page section.map-section .instructions span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.25rem;
  color: var(--color-secondary);
}
.page section.map-section .instructions .pan::before {
  content: "\f257";
  transform: rotate(90deg);
  display: inline-block;
}
.page section.map-section .instructions .move::before {
  content: "\f25a";
}
.page section.contact {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.page section.contact .contact-btn {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  flex-direction: row;
  background-color: var(--color-success);
  padding: 0.5em 1em;
  border-radius: 0.5rem;
  color: var(--color-light);
  font-family: var(--font-headers);
  cursor: pointer;
}
.page section.contact .contact-btn i {
  margin-left: 0.5em;
  font-size: 1.5rem;
}
.page section.contact .contact-btn span {
  font-size: 1.2rem;
  line-height: 1em;
}

/*# sourceMappingURL=main.css.map */