:root {
  --primary: #005AFF;
  --secondary: #595e72;
  --tertiary: #755470;
  
  --strongGray: #D0D6DC;
  --fullGray: #E9ECEF;
  --mediumGray: #F2F4F5;
  --lightGray: #F8F9FA;
  --normal: white;
  --normalInverted: black;
}



html, body {
  overflow-x:hidden;
  scroll-behavior: smooth;
} 
*, *::after, *::before {
  -webkit-user-drag: none;
}
body{
  position: absolute;
  display: flex;
    
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
    
  min-height: 100vh;
  width: 100%;
  
  -webkit-tap-highlight-color: transparent;
  background-color: white;
}

.body_shape{
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(100% - 24px);
  top:12px;
  bottom:12px;
  left:50%;
  transform: translateX(-50%);
  max-width: 1000px;
  
  z-index: -1;
  border-radius: 24px;
  border: solid 1px #e9ecef;
  box-shadow: 0px 0px 39px -3px rgba(47, 61, 77, 0.05);
-webkit-box-shadow: 0px 0px 39px -3px rgba(47, 61, 77, 0.05);
}
form{width:100%;}
.main{
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  animation: startAnimation 0.7s cubic-bezier(.11,.86,0,.99);
}
@keyframes startAnimation {from {opacity: 0.5; transform: translatey(-20px);}}
.main.forms{align-content: center;}
.main.forms .content_holder{/* max-width: 400px; */}
.main.forms logoholder{justify-content: flex-start;}
.main.forms .content_holder{max-width: 400px;}
.main.insideforms{align-content: flex-start;}
.main.bottom{align-content: flex-end;}
.content_holder{
  overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: auto auto;
    transition: filter 0.1s;
    padding: 24px;
    padding-top: 24px;
}
.content_holder.index{justify-content: center;}
.content_holder#index, .content_holder#reportsmenu, .content_holder#turnpanel, .content_holder#settings{padding-top: 124px;}
/* .content_holder.index h1{text-align: center} */



h1{font-weight: 600; font-size: 38px; margin:0; line-height: 40px; width: 100%;}
h2{font-weight: 500; font-size: 26px; margin:0; width: 100%; }
h3{
    width: 100%;
    font-size: 14px;
    margin: 0;
    font-weight:normal;
    color: #161B2C;
}
h3.indicator{padding:4px 12px; background-color: #CDE4CD; border-radius: 29px; font-weight: 500; color:#143714;}
h4{font-size: 14px; color:#767680; font-weight: normal; margin:0;}

.field_name{
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  padding: 10px 6px 0 10px;
  background-color: #F8F9FA;
  border-radius: 8px 8px 0 0 ;
}
input, select{
    box-sizing: border-box;
    display: inline-block;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    text-align: left;
  
    width: 100%;
    height: 46px;
    border-radius: 0 0 8px 8px;
    outline: none;
    border: none;
    outline: none;
    padding: 12px;
    font-size: 18px;
  
    color:black;
    background-color:#F8F9FA;
  
    margin-bottom: 16px;
    transition: All 0.2s;
    font-family: 'Poppins', sans-serif;
  }
  select{border-right: 8px solid transparent;}
  #inside_form input{height: 42px;} #inside_form .field_name{height: 30px;}
  #inside_form h2{margin-bottom:8px; margin-top:24px}
  
  select.small{
    width: auto;
    height: 26px;
    border-radius: 4px;
    margin: 0;
    padding: 0 6px;
    border-right: 8px solid transparent;
    font-size: 14px;
    padding-left: 6px;
    background-color: #E9ECEF;
  }
  div.select_holder{
    width: auto;
    height: auto;
    border-radius:8px;
    flex-wrap: wrap;
  }
  div.select_holder select.small{margin-top:4px;}
  ::placeholder{opacity: 0.3;}
  .error{background-color:#FFEEEE; color:#FF5555 !important}
  .done{background-color: #dce1ff; color:var(--primary) !important}

  /* .color-clear{background-color: transparent; color: var(--primary);}
  .color-clear:hover{background-color: #dce1ff;} */

  .color-normal{background-color: none; color:var(--primary)}
  .color-normal:hover{background-color: #dce1ff; color: var(--primary)}

  .color-error_strong{background-color:#ba1a1a; color:#ffdad6;}
  .color-error_strong:hover{opacity: 0.9;}
  input.error::placeholder{color:#FF5555;}
  button{background:none;}
  a, button{position: relative;overflow:hidden; will-change: transform; user-select: none; -webkit-user-drag: none;font-family: 'Poppins', sans-serif;}
/* Estilo de botones */
button.large{
  display:flex;
  justify-content: space-between;
  align-items: center;
  box-sizing:border-box;
  min-width: 100%;    
  border-radius: 8px;
  border:none;
  outline: none;
  font-family: 'Poppins', sans-serif;
  cursor:pointer;
  font-size: 18px;
  font-weight: 400;

  padding: 28px 32px;
  transition: All 0.2s;
}
button.large:not(:disabled):hover{opacity: 0.9; padding: 28px 28px 28px 32px;}
button.normal{
  display:flex;
  gap:8px;
  align-items: center;
  justify-content: center;
  line-height: 20px;
  height: 40px;
  padding: 0 24px;
  border-radius: 60px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  outline: none;
}
button.normal img{width: 16px; pointer-events: none;}
button.normal.increased{
  padding:0 24px;
  font-size: 17px;
  height: 56px;
}
.primary{background-color: var(--primary);color:rgba(255,255,255, 0.92) !important;}
.secondary{background-color: var(--secondary);color:rgba(255,255,255, 0.92) !important;}
.tertiary{background-color: transparent;border: solid #757680 1px !important;color:var(--primary) !important;}
.tertiary ripple{background-color: gray;}
.quaternary{background-color: var(--lightGray);}
.quaternary ripple{background-color: gray;}
button:disabled{opacity: 0.6; cursor: default;}
button.disabled{pointer-events: none; opacity: 0.6;}
  
  
  img{pointer-events: none;}
  .form_options{
    display:flex;
    width: 100%;
    height: auto;
    justify-content: space-between;
    margin-top: 16px;
  }
  .form_options a{text-decoration: none;}
  .form_options a:hover{text-decoration: underline;}

  invisible input{display:none;}


  .separator_line{
    display: block;
    width: 100%;
    height: 1px;
    background-color:#ADB5BD;
    margin: 32px 0;
  }








  /* Estilo para animación de carga */
  circleHolder{
    display: flex;
    position: fixed;
    top:56px;
    left: 50%;
    transform: translate(-50%); 
    width: 32px;
    height: 32px;
  }
  circle{
    box-sizing: border-box;

    width: 32px;
    height: 32px;
    border: 3px solid #6c757d;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.5s linear infinite;
    z-index: 6;
  }
  @Keyframes spin{100%{transform: rotate(360deg);}}

  /* Estilo para animación al presionar boton (ripples) */
  ripple{
    margin:auto;
    position: absolute;
    background: white;
    pointer-events: none;
    border-radius: 50%;
    animation: rippleanimate 1s;
    animation-timing-function: cubic-bezier(.22,1.1,.53,.98);
    opacity: 0;
    z-index: 10;
  }
  @keyframes rippleanimate {from {transform: scale(0);opacity: 0.5;}to {transform: scale(1);}}

  /* Estilo para mensajes de avisos MESSAGE*/
  message{
    display: none;
    align-items: center;
    gap:8px;
    position: fixed;
    box-sizing: border-box;
    left: 50%;
    top:12px;
    transform: translate(-50%);
    padding: 11px 16px;
    font-size: 14px;
    line-height: 14px;
    color:white;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 26px;
    -webkit-user-select: none;
    /* animation: messageIn 0.7s, messageOut 0.7s 3s; */
    animation-timing-function: cubic-bezier(.11,.86,0,.99);
    z-index: 10;
  }
  message.unactive{display:none; animation: messageOut 0.7s}
  @keyframes messageIn {from{top:-12px;}to{top: 12px;}}
  @keyframes messageOut {from{top:12px;}to{top: -32px;}}
  
  
  /* Estilo para mensajes de aviso con acciones MESSAGE-ACTION  */
  actionmessage{
    margin-top:58px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: calc(100% - 32px);
    max-width: 368px;
    border-radius:16px;
    background-color: #E9ECEF;
    padding:24px;
    gap:8px;
    justify-content: center;
    transform-origin: top center;
    animation: actionmessageTransitionIn 0.7s;
    /* animation-timing-function: cubic-bezier(.4,.26,0,1); */
    /* animation-timing-function: cubic-bezier(0,1,0,1); */
    /* animation-timing-function: cubic-bezier(.88,.38,.08,1.03); */
    animation-timing-function: cubic-bezier(.26,0,0,1);
  }
  /* actionmessage button.large{border-radius:16px;} */
  @keyframes actionmessageTransitionIn {
    from {transform: translate(0,-20%); opacity: 0;}
  }
  /* @keyframes actionmessageTransitionIn {
    from {transform: scale(0.3); opacity: 0;}
  } */




  /* Estilo para elemento holder del logo */
  logoholder{
    width:100%;
    height: auto;
    display:flex;
    justify-content: center;
    margin-bottom:8px;
  }
  /* Estilo para nombre de estacionamiento */
  div.park_name{
    display:flex;
    box-sizing: border-box;
    font-size: 12px;
    border-radius: 16px;
    background-color: #DCE1FF;
    padding:4px 12px;
    margin-bottom:48px;
    user-select: none;
    cursor: default;
  }
  div.park_name:hover{opacity:0.9;}




  /* Estilo de Toolbar */
  .toolbar{
    position:relative;
    width:100%;
    height: 52px;
    margin-bottom:8px;
    -webkit-user-select: none;

  }
  a.toggle_menu{
    z-index: 2;
    position: relative;
    overflow: hidden;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #F8F9FA;
    width:52px;
    height:52px;
    border-radius:26px; 
    will-change: transform;
  }
  a.toggle_menu:hover{background-color: #E9ECEF;}
  a.toggle_menu ripple{background: #161b2c;}
  
  
  menu{
    z-index: 1;
    display:none;
    flex-wrap: wrap;
    position:absolute;
    top: 0px;
    box-sizing: border-box;
    width:100%;
    max-width: 240px;
    height:auto;
    padding: 12px;
    padding-top: 58px;
    gap:6px;
    /* border: #e2e1ec solid 1px; */
    border-radius: 26px;
    margin:0;
    animation: transitionIn 0.7s;
    animation-timing-function: cubic-bezier(0,1,0,1);
    transform-origin: top left;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
  }

  @keyframes transitionIn {
    from {transform: scale(0.25, 0.25); opacity: 0.1; pointer-events: none;}
  }
  


  menu a{
    display:flex;
    text-decoration: none;
    padding:0 20px;
    gap:8px;
    align-items: center;
    width:100%;
    height: 51px;
    cursor:default;
    border-radius: 18px;
    /* background-color: #F4F5F7; */
    background-color: #f8f9fa;
    color:black;
  }
  menu a ripple{background: #161b2c;}
  menu a:hover{background-color: white;}
  
  a.toggle_menu.active, menu.active{display:flex; background-color: #e9ecef;}

  /* ESTILOS DE TIPOS DE LINKS */
  a.type-1{
    display:flex;
    text-decoration: none;
    padding:0 20px;
    gap:8px;
    align-items: center;
    width:100%;
    height: 51px;
    cursor:default;
    border-radius: 100px;
    /* background-color: #F4F5F7; */
    background-color: #E9ECEF;
    color:black;
    margin-bottom:8px;
  }
  a.type-1:hover{background-color: #F4F5F7;}
  a.type-1 img{width:16px}

  a.type-button{
    box-sizing: border-box;
    display:flex;
    align-items: center;
    border:none;
    height: 40px;
    padding: 0 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
  }
  a.type-button:first-of-type{margin-left:auto;}


  
  
  /* ESTILO PARA DIALOGO */
  transparent.active, dialog.active{display:flex;}
  transparent{
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: rgba(21, 27, 44, 0.7);
  }
  dialog{
    all:unset;
    display: none;
    flex-wrap: wrap;
    box-sizing: border-box;
    width:calc(100% - 48px);
    max-width: 352px;
    height: auto;
    background-color: white;
    padding: 24px;
    border-radius: 24px;
    z-index: 4;
    -webkit-user-select: none;
    animation: dialog 0.2s cubic-bezier(0,.88,0,.98);
    gap: 0 8px;
    /* transform-origin: bottom; */
  }
  @keyframes dialog {
    from {transform: scale(0.8);opacity: 0;}
    to {transform: scale(1);opacity: 1;}
  }
  /* @keyframes dialog {
    from {transform: scaleY(0.9) scale(0.8) translateY(50%); opacity:0;}
    to {transform: scaleY(1); opacity: 1;}
  } */
  dialog h1{
    line-height: 32px;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 16px;
  }
  dialog p{margin: 0; width:100%;font-size: 14px; margin-bottom:24px;}
  
  dialog button:not(:last-child), dialog button:first-of-type{margin-left:auto;}
  dialog button ripple{background-color: black;}


  /* ESTILO DE PAGINA DE IMPRESION */
  div.wrapper{
    display: flex;
    flex-wrap: wrap;
    gap:8px;
    width: 100%;
  }

  /* ESTILO DE DATA_BOX (sirven para mostrar cualquier tipo de dato) */
div.data_box{   
  min-width: 100%;
  display:flex;
  flex-wrap: wrap;
  background-color: var(--fullGray);
  box-sizing: border-box;
  padding: 12px 16px 6px 16px;
  border-radius: 8px;
}

div.data_box.small{ 
  min-width: unset;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  flex-basis: 0;
  background-color: var(--mediumGray);
}
.data_box.small.nowrap{
  flex-direction: row;

}
div.data_box_wrapper{
  display:flex; 
  width:100%; 
  justify-content: space-between; 
  gap:8px;
}
  .data_box h1{font-size: 16px; font-weight: normal; line-height: 16px;}
  .data_box h2{font-weight: 600; font-size: 24px;}
  .data_box.double h2{font-size:20px;}
  .data_box.double h2:last-child{color: #57a456;font-size: 28px}
  b{font-weight: 500;}

  div.flex_container{
    display:flex;
    flex-wrap: wrap;
    width:100%;
    justify-content: space-between;
    gap:8px;
    flex-wrap: wrap;
  }

  /*ESTILO DE DATA_BOX MODERN */
  .data_box.modern{
    display: flex;
    flex-wrap: wrap;
    background-color: #F8F9FA;
    padding: 6px;
    padding-top:14px;
    gap:4px;
  }
  .data_box.modern h2{
    display:flex;
    gap:8px;
    font-size: 16px;
    background-color: #E9ECEF;
    width: auto;
    padding: 6px 12px;
    border-radius: 60px;
    font-weight: normal;
  }

  .data_box.modern.increased{padding:16px;border-radius: 16px;}
  .data_box.modern.increased h1{margin-bottom:8px;}
  .data_box.modern.increased h2{font-size:24px; padding:8px 24px;}

  /*ESTILO DE DATA_BOX LARGE */
  .data_box.large{border-radius: 16px;}
  .data_box.large h2{
    font-size: 48px;
    font-weight: 600;
    color: var(--primary);
  }

  
  div.qr_box{
    display:flex;
    justify-content: center;
    overflow: auto;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    justify-content: center;
  }


  /* ESTILO DE LECTOR QR */
  #reader{
    /* width: 100%; */
    border-radius: 8px;
    max-height: 100vh !important;
    overflow-x: hidden;

    overflow-y: auto;
    border:none !important;
    background-color: #e9ecef;
    position:absolute !important; 
    inset: 8px;
    top:180px;
  }

  #reader img{display: none;}
  /* #reader button:first-child{
    background-color: var(--primary);
  }
  #reader #qr-shaded-region{
    max-height: 100% !important;
  }
  #reader__scan_region{
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100vh !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
  } */
  #reader button{
    padding: 12px 24px;
    color:white;
    border-radius:22px;
    border:none;
    outline: none;
    background-color: var(--secondary);
    cursor: pointer;
  }
  #reader button:hover{
    opacity: 0.9;
  }

  



  /* ESTILOS PARA TABLAS */

  table{
    min-width:100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    margin-bottom:32px;
    font-family: 'Roboto', sans-serif;
  }
  tr{border-bottom: solid 1px #E2E2EC;}
  tr:first-child{background-color: #F4F5F7;border-radius: 12px 0 0 12px;}
  td{
    box-sizing: border-box;
    overflow: auto;
    height: 49px;
    padding:2px 11px;
    align-items: center;
    font-size:14px;
  }

  td.option_column{width: 49px; overflow: visible; padding:0;}
  delete{
    display:flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 41px;
    width: 41px;  
    text-decoration:none;
    border-radius:14px;
    transition: all 1s;
    transition-timing-function: cubic-bezier(0,.88,0,.98);
    cursor: default;
    background-repeat: no-repeat;
    background-position: 50% 50%;  
    background-image: url('../resources/delete_icon.svg');
  }
  delete:hover{background-color: #e9ecef}


  psholder{
    max-width: 100%;
    max-height: 80px;
    overflow: auto;
    flex-wrap: wrap;
    display: flex;
    position: sticky;
    left:0;
  }
ps{
    display:flex;
    align-items: center;
    justify-content: center;
  
    width: 30px;
    height:30px;
    border-radius:8px;
    margin:4px 3px;
  
    text-decoration:none;
    background-color:#e9ecef;
    color:black;
    cursor:pointer;
    
}
  ps.selected{background-color:#2d3339; color:white; border-radius: 50%;}

  dataline-small{
    -webkit-user-select: none;
    text-transform: capitalize;
    max-width: min-content;
    display: flex;
    padding:4px 12px;
    border-radius: 16px;
    background-color: gray;
    justify-content: center;
  }
  dataline-small.entry{background-color: #FFE08B; color:#241A00}
  dataline-small.exit{background-color: #A4F69E; color:#002204}
  dataline-small.corte{background-color: #E9ECEF; color:black}

  dataline-small img{margin-right:6px;}

  /* ESTILO PARA ELEMENTO WINDOW */

  window{
    display:none;
    flex-wrap: wrap;
    max-width: 600px;
    box-sizing: border-box;
    width:calc(100% - 48px);
    height: auto;
    max-height: 80vh;
    background-color: white;
    padding: 24px;
    border-radius: 24px;
    z-index: 4;

    animation: dialog 0.2s cubic-bezier(0,.88,0,.98);
    gap: 0 8px;
  }
  window.active{display:flex;}
  window.increased{
    align-content: flex-start;
    overflow: auto;
    max-width: 800px;
    width: 100%;
    height: 100%;
  }
window::-webkit-scrollbar{display:none}

  /* ESTILO DE PANTALLA ANCHA */

  header{
    display: flex;
    gap: 8px;
    position: absolute;
    top:48px;
    width: 100%;
    max-width: 848px;
    padding: 0 24px;
    box-sizing: border-box;
    height: 40px;
    left: 0; 
    right: 0; 
    margin: 0 auto;
    z-index: 2;
  }
  header a#headerlink:last-of-type{margin-left:auto}
  header a#headerlink img{width: 12px;}
  header a#headerlink ripple{background-color: black;}
  header a#headerlink{
    display:flex;
    align-items: center;
    gap:8px;
    height: 100%;
    padding: 0 24px;
    border-radius: 56px;

    font-size: 14px;
    text-decoration: none;
    background-color: #E9ECEF;
    color:black;
    transition: all 0.3s;
    cursor:pointer;
  }
  header a#headerlink:hover{background-color: #D0D6DC;}
  header a#headerlink.active{background-color: #D0D6DC;}

  /* Ajustes originales */
  div.toolbar#indexheader{display:none;}
  .toolbar.original{display:none}
  div#reader{display:none;}
  div#result{display:none;}
  .content_holder#impresion{justify-content: space-between}
  div.qr_box.original{display:none}
  div.wrapper{
    align-content: center;
    height: 320px;
    width: calc(60% - 24px);
  }
  div.wide_screen_holder{display:flex;}


/* done */
/* Estilo para Content boxex */
div.content_box{
    min-width: 100%;
    display:flex;
    flex-wrap: wrap;
    background-color: var(--lightGray);
    box-sizing: border-box;
    padding:24px;
    border-radius:16px;
    gap:8px;
}
div.content_box.minimum{max-width: max-content;}
div.content_box.small{
    min-width: unset;
    align-content: flex-start;
    align-items: flex-start;
    flex-grow: 1;
    flex-basis: 0;
    background-color: var(--mediumGray);
}
div.content_box.wrap{flex-direction: column;}
div.content_box.invisible{
  gap:0;
  padding:0;
  border-radius: 24px;
  background-color: transparent;
  box-sizing: border-box;
  /* box-sizing: content-box; */
  border:solid 1px gray;
}
.content_box .data_box.modern{background-color: var(--normal);}
.data_box h1{font-size: 16px; font-weight: normal; line-height: 16px;}
.data_box h2{font-weight: 600; font-size: 24px; white-space: nowrap;}
.data_box.double h2{font-size:20px;}


.content_box .data_box.modern{background-color: white;}

@media only screen and (max-width: 650px){
  header{display:none}
  div.wide_screen_holder{display:none}
  div.toolbar#indexheader, div.toolbar.original{display:flex;}
  .content_holder#index, .content_holder#reportsmenu, .content_holder#turnpanel, .content_holder#settings{padding-top: 64px;}

  .content_box.small{min-width: 100% !important; }

  /* QR celular */
  div#reader{display:block;}
  div#result{display:block;}
  div.qr_box.original{display:flex}
  div.wrapper{
    align-content: unset;
    height: unset;
    width: 100%;
  }

  /* Window */
  window.increased{
    max-width: unset;
    max-height: unset;
    padding-top:64px;
    border-radius: 0;
  }
}




  
@media only screen and (max-width: 650px){
  @media only screen and (min-height: 700px){
    message{top:43px}
    actionmessage{margin-top:89px;}
    @keyframes messageIn {from{top:-12px;}to{top: 43px;}}
    @keyframes messageOut {from{top:43px;}to{top: -32px;}}
    .content_holder{padding-top:64px;}
  }
  @media only screen and (max-height: 700px){
  .content_holder#index, .content_holder#reportsmenu, .content_holder#turnpanel, .content_holder#settings{padding-top: 24px;}

    div.qr_box{height: 224px;}
  }
  .body_shape{display: none;}
  
  /* .main.forms{align-content: flex-end} */
}