:root {
  --color-primary: rgba(0, 0, 0, 1);
  --color-secondary: rgba(225, 65, 24, 1);
  --color-tertiary: rgba(75, 75, 75, 0.3);
  --color-font-primary: rgba(255, 255, 255, 1);
  --color-font-secondary: rgba(0, 0, 0, 1);
  --color-button-access: rgba(0, 0, 0, 1);
  --color-button-access-on: rgba(37, 143, 23, 1);
  --color-button-forgetpasswd: rgba(255, 255, 255, 1);
  --color-button-forgetpasswd-on: rgba(0, 0, 0, 1);
  --color-background-transparent: rgba(255, 255, 255, 0);
  --color-production: rgba(53, 199, 89, 1);
  --color-preproduction: rgba(222, 88, 51, 1);
  --color-orange: #F5B027;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.navbar__dot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.dot--production {
  background-color: var(--color-production);
}
.dot--preproduction {
  background-color: var(--color-preproduction);
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  background: radial-gradient(var(--color-tertiary), var(--color-secondary));
}
    .login__button {
      width: 100%;
      padding: 8px 0;
      transition: 0.2s ease-in-out;
      border: 0;
      margin-bottom: 15px;
    }
    .login__button--initsession {
      background-color: var(--color-orange);
      color: var(--color-font-secondary);
    }
    .login__button--initsession:hover {
      background-color: var(--color-button-access-on);
      color: var(--color-font-primary);
    }
    .login__button--forgetpasswd {
      background-color: var(--color-background-transparent);
      color: var(--color-font-secondary);
      border: dashed 1px;
    }
    .login__button--forgetpasswd:hover {
      background-color: var(--color-button-forgetpasswd-on);
      color: var(--color-font-primary);
    }

.donut-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(var(--color) 0% var(--percentage), #e9ecef var(--percentage) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
    .donut-hole {
        width: 150px; 
        height: 150px;
        background-color: white; 
        border-radius: 50%;
    }
    .donut-chart-value--simple {
        font-size: 3rem;
    }

.pulse {
  animation: pulse-soft 2s infinite ease-in-out;
}
    @keyframes pulse-soft {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.02); opacity: 0.8; }
      100% { transform: scale(1); opacity: 1; }
    }

.pulse--plus {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    position: relative;
    animation: animate 3s linear infinite
}
    .pulse--plus span{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #fff;
        height: 100%;
        cursor: pointer
    }
    @keyframes animate{
        0% { box-shadow: 0 0 0 0 rgb(135, 171, 0, 0.7) , 0 0 0 0 rgb(135, 171, 0, 0.7) }
        40% { box-shadow: 0 0 0 30px rgb(135, 171, 0, 0) , 0 0 0 0 rgb(135, 171, 0, 0.7) }
        80% { box-shadow: 0 0 0 30px rgb(135, 171, 0, 0) , 0 0 0 20px rgb(135, 171, 0, 0) }
        100% { box-shadow: 0 0 0 0 rgb(135, 171, 0, 0) , 0 0 0 20px rgb(135, 171, 0, 0) }
    }

.mt-12 {
    margin-top: 12rem;
}

.fs-7 {
    font-size: 0.8rem;
}

.start-75 {
  left: 75% !important;
}


#qrCode canvas {
    width: 30vw;
}
    .qr-bottleLogo {
        position: absolute; 
        width: 25%; 
        right: 38%; 
        top: 19%;
    }

@media (max-width: 600px) {
    .container-image--size {
        width: 100px;
    }
    
    .donut-chart {
        width: 70px;
        height: 70px;
    }
        .donut-hole {
            width: 50px; 
            height: 50px;
        }
        .donut-chart-value--compuesto {
            font-size: 1rem!important;
        }
        .donut-chart-value--simple {
            font-size: 1.4rem;
        }
    
    #qrCode canvas {
        width: 90vw;
    }
        .qr-bottleLogo {
            position: absolute; 
            width: 25%; 
            right: 38%; 
            top: 19%;
        }
}

/* Mapa */
.map {
    width: 100%;
    height: 100vh;
    margin-top: -3rem;
}

/* BS */
.form-control-feedback {
  top: 10px;
}

#result {
    text-align: center;
    font-size: 1.5rem;
}

#cameraContainer {
    display: none;
    margin-top: 20px;
    position: relative;
}
    #reader {
        width: 95% !important;
        max-width: 500px;
        margin: 0 auto;
        border-radius: 12px;
        overflow: hidden;
        background-color: #000;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        min-height: 100vw; 
    }
        #reader video {
            object-fit: cover !important;
            width: 100vw !important;
            height: 100vw;
        }
    #btnCloseCamera {
    position: absolute;
            top: -15px;
            right: 45vw;
            z-index: 100;
            background-color: #ff4757;
            color: white;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            border: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }