/********************************************
****************** General ******************
********************************************/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/material.woff2') format('woff2');
}

html, body { zoom: 100%; overscroll-behavior-y: contain; }
a { text-decoration: none !important; }

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.full-width { width: 100%; }
.clear-padding { padding: 0 !important }
.is-hidden { display: none; }

/********************************************
******************* Login *******************
********************************************/
.offcanvas-start {
  transition: transform 0.35s ease-in-out;
  width: 250px !important;
}
.offcanvas-backdrop { transition: opacity 0.35s ease-in-out; }
.offcanvas.show { opacity: 1; }

.menu-btn svg path { stroke: #005a9e; stroke-width: 2; }
.menu-btn:hover svg path { stroke: #fff; stroke-width: 2.5; }

.menu-btn {
  background: #ffffff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 20px;
  top: calc((var(--header-h) - 48px)/2);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.logo-thumbnail { height: 33px; }

body.bg-login {
  background: linear-gradient(135deg, #005A9E 0%, #F5F5F5 100%);
  position: relative;
  z-index: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.bg-login::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('../../../media/bg-login.png') center/cover no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.login-card {
  width: 100%;
  max-width: 375px;
  padding: 2rem;
  border-radius: 1rem;
  background: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

/********************************************
******************* Header ******************
********************************************/
:root { --header-h: 100px; }

.site-header {
  background: linear-gradient(90deg,
              #ffffff 0%,
              #e6f2fc 20%,
              #2f8fd1 45%,
              #005a9e 100%);
  height: var(--header-h);
  color: #004d98;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

.logo-header { height: 56px; width: auto; margin-left: 72px; flex-shrink: 0; }

@media(max-width:576px) {
  :root { --header-h: 80px; }
  .logo-header { margin-left: 64px; height: 48px; }
  .menu-btn { width: 42px; height: 42px; top: calc((var(--header-h)-42px)/2); }
}

.sidebar-nav .nav-link {
  padding: .75rem 1.25rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: #495057;
  transition: background-color .15s, color .15s;
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus {
  background-color: #f1f3f5;
  color: #000;
}
.sidebar-nav .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
}
.sidebar-nav hr { border-color: rgba(0,0,0,.08); }

/********************************************
******************* Portal ******************
********************************************/
.action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
}
.action-card {
  transition: all .25s ease;
  cursor: pointer;
}
.btn-action {
  min-width: 80px;
  text-align: center;
}

/********************************************
************* Reception / Sorter ************
********************************************/
#scan_input:focus {
  border-color: #005a9e;
  box-shadow: 0 0 0 0.25rem rgba(0,90,158,.25);
}

#reception_status .card {
  transition: all .3s ease;
}

/********************************************
************ Dashboard Preanalitica *********
********************************************/
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/********************************************
*********** Panel Transportista *************
********************************************/
body.bg-dark {
  background: #1a1a2e;
  min-height: 100vh;
}

/********************************************
****************** Animations ***************
********************************************/
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spin {
  display: inline-block;
  animation: spin 1.5s linear infinite;
}