:root {
  --primary: #005AFF;
  --secondary: #595e72;
  --accent: #005AFF;
  --tertiary: #755470;
  --primary-soft: #EAF0FF;

  --strongGray: #D0D6DC;
  --fullGray: #E9ECEF;
  --mediumGray: #F2F4F5;
  --lightGray: #F8F9FA;
  --normal: white;
  --normalInverted: black;

  /* Tokens de superficie/texto (fallback de la paleta "original") */
  --surface: #ffffff;
  --surface-2: #F8F9FA;
  --surface-3: #F2F4F7;
  --border: #EAECF0;
  --text-1: #101828;
  --text-2: #475467;
  --text-3: #98A2B3;
}



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: 'Inter', 'Segoe UI', system-ui, -apple-system, 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;}}
.main.forms{align-content: center;}
.main.forms .content_holder{/* max-width: 400px; */}
.main.forms logoholder{justify-content: center; margin: 14px 0 30px;}
.main.forms .content_holder{max-width: 400px;}
/* Logo de marca inline: "open" = tinta del tema; "ipark" = color primario de la paleta */
.brandmark{display:block;max-width:100%;height:auto}
.brandmark .open{fill:#0E1B2C;transition:fill .25s ease}
.brandmark .ipark{fill:var(--primary);transition:fill .25s ease}
.dark-mode .brandmark .open{fill:#F2F6FF}
.brandmark-wrap{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto}
.brandiso{display:block;flex:0 0 auto}

.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{padding-top: 100px;}
.content_holder#settings, .content_holder#sensorlogs, .content_holder#matchsensor, .content_holder#reportsmenu, .content_holder#turnpanel{padding-top: 100px;}
.content_holder#ayuda{padding-top: 100px;}
:is(#inside_form,#auditoria,#descuentos,#schedules,#profiles,#users){padding-top: 100px;}
@media (max-width:650px){:is(#inside_form,#auditoria,#descuentos,#schedules,#profiles,#users){padding-top: 92px;}}
/* .content_holder.index h1{text-align: center} */

.table_scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table_scroll table{width:auto;min-width:100%;table-layout:auto}
.table_scroll td{overflow:visible;white-space:nowrap}
@media(max-width:700px){.table_scroll table{min-width:640px}}
.table_scroll td.option_column{width:auto;min-width:70px;text-align:center}
#turn_list{width:100%;overflow:visible;min-width:0}
.content_holder#reportsmenu,.content_holder#reports{overflow:visible}
.chip{display:inline-flex;align-items:center;padding:4px 14px;border-radius:100px;font-size:13px;font-weight:500;background:var(--accent);color:#fff;height:28px;white-space:nowrap}
.applied_discounts_label{display:none;width:100%;font-size:13px;font-weight:600;color:var(--secondary);margin-top:10px}
.applied-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 6px 4px 14px;border-radius:100px;background:var(--fullGray);border:1px solid var(--strongGray);font-size:13px;color:var(--normalInverted);height:30px;white-space:nowrap}
.applied-chip .chip-remove{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#FF5555;color:#fff;border:none;cursor:pointer;font-size:14px;line-height:1;padding:0;font-weight:700}
.applied-chip .chip-remove:hover{background:#E04444}
.discount-btn.active{background-color:var(--accent) !important}



h1{font-weight: 600; font-size: 38px; margin:0; line-height: 40px; width: 100%;}
h2{font-weight: 500; font-size: 26px; margin:0 0 16px 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: 'Inter', 'Segoe UI', system-ui, -apple-system, 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}
  #inside_form > h2:first-of-type{margin-top:0}
  
  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;}
  /* Confirmación seria con el color de la paleta (acento) */
  .color-accent_strong{background-color:var(--accent); color:#ffffff;}
  .color-accent_strong:hover{opacity: 0.9;}
  .dark-mode .color-accent_strong{color:#0E1B2C;}
  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: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;}
/* Estilo de botones */
button.large{
  display:flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;
  box-sizing:border-box;
  min-width: 100%;    
  border-radius: 8px;
  border:none;
  outline: none;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 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.large span{text-align: center;}
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 .material-symbols-outlined { font-size: 18px; width: 16px; text-align: center; }
  menu a ripple{background: #161b2c;}
  menu a:hover{background-color: white;}
  
  a.toggle_menu.active, menu.active{display:flex; background-color: #e9ecef;}

  .darkmode_floating {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--fullGray);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s;
  }
  .darkmode_floating:hover { background-color: var(--strongGray); }
  .darkmode_floating .material-symbols-outlined { font-size: 24px; color: var(--normalInverted); }
  @media only screen and (min-height: 700px) {
    .darkmode_floating { bottom: 40px; }
  }

  /* 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: 50;
    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;
  gap: 10px 12px;
  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;

}
/* Número centrado dentro de su tarjeta (p. ej. Autos que ingresaron/salieron) */
.data_box.small h2.num-center{
  align-self: stretch;
  text-align: center;
}
/* En tarjetas de fila (normal/large) el número baja a su propia línea, centrado */
.data_box:not(.small) h2.num-center{
  flex: 1 1 100%;
  text-align: center;
}
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:10px 12px;
  }
  .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:0;}
  .data_box.modern.increased h2{font-size:24px; padding:8px 14px;}

  /*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: auto;
    margin-bottom:32px;
    font-family: inherit;
  }
  tr{border-bottom: solid 1px var(--hairline);}
  tr:first-child{background-color: transparent;border-bottom: 1px solid var(--hairline);}
  tr:first-child td, tr:first-child th{
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    height: auto;
    padding-top: 6px;
    padding-bottom: 10px;
  }
  td, th{
    box-sizing: border-box;
    height: 48px;
    padding: 6px 12px;
    font-size: 13px;
  }
  th{
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
  }
  table tr + tr:hover td{background: rgba(16,24,40,.025);}
  .dark-mode table tr + tr:hover td{background: rgba(255,255,255,.035);}

  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}

  edituser{
    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/settings_icon_2.svg');
  }
  edituser:hover{background-color: #e9ecef}

  deleteuser{
    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');
  }
  deleteuser: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;
    overflow-y: auto;

    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 */

  .brand-top{position:absolute;top:calc(36px + env(safe-area-inset-top, 0px));left:0;right:0;margin:0 auto;max-width:848px;padding:0 24px;box-sizing:border-box;display:flex;align-items:center;z-index:2}
  .brand-top a{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
  .toolbar:has(a.toggle_menu img[src*="arrow_back"]) a.toggle_menu{margin-left:auto}
  .toolbar:has(a.toggle_menu img[src*="arrow_back"]) a.toggle_menu img{opacity:.5}
  :is(#reportsmenu,#turnpanel,#settings,#sensorlogs,#matchsensor,#ayuda,#inside_form,#auditoria,#descuentos,#schedules,#profiles,#users) > .toolbar{position:absolute;top:calc(22px + env(safe-area-inset-top, 0px));left:0;right:0;margin:0 auto;max-width:848px;padding:0 24px;box-sizing:border-box;display:flex;justify-content:flex-end;align-items:flex-start;height:auto;pointer-events:none;z-index:2}
  :is(#reportsmenu,#turnpanel,#settings,#sensorlogs,#matchsensor,#ayuda,#inside_form,#auditoria,#descuentos,#schedules,#profiles,#users) > .toolbar a.toggle_menu{pointer-events:auto}
  #read_page.has-brand > .toolbar,#impresion > .toolbar,.content_holder.index.has-brand > .toolbar{position:absolute;top:calc(32px + env(safe-area-inset-top, 0px));left:0;right:0;margin:0 auto;max-width:848px;padding:0 24px;box-sizing:border-box;display:flex;justify-content:flex-end;align-items:flex-start;height:auto;pointer-events:none;z-index:3}
  #read_page.has-brand > .toolbar a.toggle_menu,#impresion > .toolbar a.toggle_menu,.content_holder.index.has-brand > .toolbar a.toggle_menu{pointer-events:auto}
  :is(#settings,#sensorlogs,#matchsensor,#reportsmenu,#turnpanel,#inside_form,#auditoria,#descuentos,#schedules,#profiles,#users,#ayuda) > .toolbar{top:calc(32px + env(safe-area-inset-top, 0px))}
  .main.forms:has(#read_page.has-brand){align-content:flex-start}
  #read_page.has-brand,#impresion,.content_holder.index.has-brand{padding-top:100px}
  #index > #indexheader{position:absolute;top:calc(32px + env(safe-area-inset-top, 0px));left:0;right:0;margin:0 auto;max-width:848px;padding:0 24px;box-sizing:border-box;display:flex;justify-content:flex-end;align-items:flex-start;height:auto;z-index:3;pointer-events:none}
  #index > #indexheader > a.toggle_menu{pointer-events:auto}
  #index > #indexheader > menu{left:auto;right:24px;transform-origin:top right;pointer-events:auto}
  @media (max-width:650px){
    .brand-top{top:calc(38px + env(safe-area-inset-top, 0px))}
    .brand-top .brandmark{width:180px}
    #read_page.has-brand > .toolbar,#impresion > .toolbar,.content_holder.index.has-brand > .toolbar{top:calc(30px + env(safe-area-inset-top, 0px))}
    #read_page.has-brand,#impresion,.content_holder.index.has-brand{padding-top:92px}
    :is(#reportsmenu,#turnpanel,#settings,#sensorlogs,#matchsensor,#ayuda,#inside_form,#auditoria,#descuentos,#schedules,#profiles,#users) > .toolbar{top:calc(14px + env(safe-area-inset-top, 0px))}
    :is(#settings,#sensorlogs,#matchsensor,#reportsmenu,#turnpanel,#inside_form,#auditoria,#descuentos,#schedules,#profiles,#users,#ayuda) > .toolbar{top:calc(30px + env(safe-area-inset-top, 0px))}
    #index > #indexheader{position:absolute;top:calc(27px + env(safe-area-inset-top, 0px));left:0;right:0;margin:0 auto;max-width:848px;padding:0 24px;box-sizing:border-box;display:flex;justify-content:flex-end;align-items:flex-start;height:auto;z-index:3;pointer-events:none}
    #index > #indexheader > a.toggle_menu{pointer-events:auto}
    #index > #indexheader > menu{left:auto;right:24px;transform-origin:top right;pointer-events:auto}
  }

  /* Ajustes originales */
  .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: stretch;   /* tarjetas de la misma fila con altura uniforme */
    flex-grow: 1;
    flex-basis: 0;
    background-color: var(--mediumGray);
}
div.content_box.centered_buttons{
    min-width: 100% !important;
    width: 100% !important;
    flex-grow: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}
div.content_box.centered_buttons button.large{
    justify-content: center !important;
    gap: 12px;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
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){
  div.wide_screen_holder{display:none}
  div.toolbar#indexheader, div.toolbar.original{display:flex;}
  .content_holder#index{padding-top: 92px;} .content_holder#settings, .content_holder#sensorlogs, .content_holder#matchsensor, .content_holder#reportsmenu, .content_holder#turnpanel{padding-top: 92px;} .content_holder#ayuda{padding-top: 92px;}

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

  /* Reporte de turno: Inicio y Final de turno en la misma línea (móvil) */
  .flex_container > .data_box.small.modern{
    flex:1 1 calc(50% - 4px);
    min-width:0;
  }
  .flex_container > .data_box.small.modern h2{
    display:block;
    white-space:normal;
    font-size:clamp(12px, 3.4vw, 16px);
    padding:5px 10px;
    line-height:1.25;
  }
  /* 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;
  }
}

/* Tablets (pantallas táctiles): usar cámara del lector QR igual que en móvil */
@media (pointer: coarse), (any-pointer: coarse){
  div.wide_screen_holder{display:none}
  div#reader{display:block;}
  div#result{display:block;}
  div.qr_box.original{display:flex}
  div.wrapper{
    align-content: unset;
    height: unset;
    width: 100%;
  }
}




  
@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{padding-top: 92px;} .content_holder#settings, .content_holder#sensorlogs, .content_holder#matchsensor, .content_holder#reportsmenu, .content_holder#turnpanel{padding-top: 92px;} .content_holder#ayuda{padding-top: 92px;}

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

/* ===== DARK MODE ===== */
.dark-mode {
  --primary: #4A8BFF;
  --accent: #93C5FD;
  --secondary: #7B7F94;
  --primary-soft: #182136;
  --strongGray: #3A3A44;
  --fullGray: #2A2A33;
  --mediumGray: #22222A;
  --lightGray: #1A1A22;
  --normal: #14141A;
  --normalInverted: #E0E0E0;
  --surface-hover: #33333D;
  --dialog-bg: #1E1E26;
}
.dark-mode body {
  background-color: var(--normal);
  color: var(--normalInverted);
}
.dark-mode h3 { color: #C0C4CC; }
.dark-mode h4 { color: #B0B0B8; }
.dark-mode .field_name { background-color: var(--surface-3); }
.dark-mode input,
.dark-mode select {
  color: var(--normalInverted);
  background-color: var(--surface-3);
}
.dark-mode select.small { background-color: var(--surface-hover); }
.dark-mode .error { background-color: #2A1A1A; }
.dark-mode .done { background-color: #1A2A2A; }
.dark-mode .body_shape {
  border-color: #333;
  box-shadow: 0px 0px 39px -3px rgba(0,0,0,0.3);
}
.dark-mode a.toggle_menu { background-color: var(--surface-3); }
.dark-mode a.toggle_menu:hover { background-color: var(--surface-hover); }
.dark-mode a.toggle_menu.active,
.dark-mode menu.active { background-color: var(--surface-hover); }
.dark-mode menu { box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.5); }
.dark-mode menu a { background-color: var(--surface-3); color: var(--normalInverted); }
.dark-mode menu a:hover { background-color: var(--surface-hover); }
.dark-mode menu a ripple { background: #aaa; }
.dark-mode a.type-1 { background-color: var(--surface-3); color: var(--normalInverted); }
.dark-mode a.type-1:hover { background-color: var(--surface-hover); }
.dark-mode .content_box,
.dark-mode div.content_box { background-color: var(--lightGray); }
.dark-mode div.content_box.small { background-color: var(--mediumGray); }
.dark-mode .data_box.modern { background-color: var(--mediumGray); }
.dark-mode .data_box.modern h2 { background-color: var(--fullGray); }
.dark-mode .content_box .data_box.modern { background-color: var(--normal); }
.dark-mode div.data_box { background-color: var(--fullGray); }
.dark-mode div.data_box.small { background-color: var(--mediumGray); }
.dark-mode transparent { background-color: rgba(0,0,0,0.8); }
.dark-mode dialog { background-color: var(--dialog-bg); }
.dark-mode dialog h1 { color: var(--normalInverted); }
.dark-mode dialog p { color: #AAA; }
.dark-mode dialog button ripple { background-color: #ccc; }
.dark-mode window { background-color: var(--dialog-bg); }
.dark-mode window h2 { color: var(--normalInverted); }
.dark-mode table tr { border-bottom-color: #333; }
.dark-mode table tr:first-child { background-color: var(--surface-3); }
.dark-mode td { color: #C0C4CC; }
.dark-mode div.park_name { background-color: #2A2A3A; color: #AAB; }
.dark-mode .tertiary { border-color: #555 !important; }
.dark-mode delete:hover,
.dark-mode edituser:hover,
.dark-mode deleteuser:hover { background-color: var(--surface-hover); }
.dark-mode ps { background-color: var(--surface-hover); color: var(--normalInverted); }
.dark-mode ps.selected { background-color: #555; color: white; }
.dark-mode dataline-small.corte { background-color: #333; color: #CCC; }
.dark-mode .separator_line { background-color: #444; }
.dark-mode .quaternary { background-color: var(--mediumGray); }
.dark-mode .color-normal:hover { background-color: #1A2A4A; }
.dark-mode actionmessage { background-color: var(--surface-3); }
.dark-mode .data_box.large h2 { color: var(--primary); }
.dark-mode .form_options a { color: #8AB; }
.dark-mode message { background-color: rgba(50,50,60,0.85); }
.dark-mode #reader { background-color: var(--surface-3); }
.dark-mode .data_box.double h2:last-child { color: #6BC56A; }
.dark-mode .field_name h3 { color: #C0C4CC; }
  .dark-mode logoholder img,
  .dark-mode .main.forms logoholder img,
  .dark-mode .main.bottom .content_holder > img[src*="parkit"] { filter: invert(1); }
  /* El logo OpeniPark ya es claro/oscuro autocontenido: no invertir */
  .dark-mode logoholder img[src*="openipark"],
  .dark-mode .main.forms logoholder img[src*="openipark"],
  .dark-mode .main.bottom .content_holder > img[src*="openipark"] { filter: none !important; }
.dark-mode menu img { filter: invert(1); }
.dark-mode a.toggle_menu img { filter: invert(1); }
.dark-mode a.type-1 img { filter: invert(1); }
.dark-mode a.type-button { background-color: var(--fullGray); color: var(--normalInverted); }

/* Buscadores/filtros reutilizables */
.sensor_filter {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sensor_filter_title {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-2);
    margin: 0;
}
.sensor_filter_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}
.sensor_filter_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
.sensor_filter_label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
}
.sensor_filter_control {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sensor_filter_control:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.sensor_filter_control > input[type="datetime-local"],
.sensor_filter_control > select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 12px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-1);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.sensor_filter_control > select { padding-right: 28px; }
/* iOS/Safari: el datetime-local tiene un ancho mínimo propio que ignora width/min-width */
@supports (-webkit-touch-callout: none) {
    .sensor_filter_control > input[type="datetime-local"] {
        -webkit-appearance: none;
        appearance: none;
    }
}
.sensor_filter_actions {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: flex-end;
}
.sensor_filter_actions button {
    flex: 0 1 auto;
    min-width: 120px;
    height: 38px;
    font-size: 13px;
}
@media (max-width: 640px) {
    .sensor_filter_grid { grid-template-columns: 1fr; }
    .sensor_filter_actions button { flex: 1 1 0; min-width: 0; }
}

/* ===== PALETAS DE COLOR (por estacionamiento) ===== */
:root[data-palette="azul"] { --primary:#005AFF; --accent:#1E40AF; --secondary:#595e72; --tertiary:#0284C7; --primary-soft:#EAF0FF; }
:root[data-palette="azul"].dark-mode { --primary:#60A5FA; --accent:#93C5FD; --tertiary:#38BDF8; --primary-soft:#182136; }

:root[data-palette="verde"] { --primary:#16A34A; --accent:#14532D; --secondary:#4B5563; --tertiary:#059669; --primary-soft:#E9F7EC; }
:root[data-palette="verde"].dark-mode { --primary:#4ADE80; --accent:#86EFAC; --tertiary:#34D399; --primary-soft:#12241A; }

:root[data-palette="violeta"] { --primary:#7C3AED; --accent:#4C1D95; --secondary:#5B5F72; --tertiary:#6D28D9; --primary-soft:#F3EEFF; }
:root[data-palette="violeta"].dark-mode { --primary:#A78BFA; --accent:#C4B5FD; --tertiary:#A78BFA; --primary-soft:#201A3A; }

:root[data-palette="naranja"] { --primary:#EA580C; --accent:#7C2D12; --secondary:#57534E; --tertiary:#B45309; --primary-soft:#FDF1E7; }
:root[data-palette="naranja"].dark-mode { --primary:#FB923C; --accent:#FDBA74; --tertiary:#FBBF24; --primary-soft:#291A10; }

:root[data-palette="rosa"] { --primary:#DB2777; --accent:#831843; --secondary:#5F5B63; --tertiary:#BE185D; --primary-soft:#FDEEF6; }
:root[data-palette="rosa"].dark-mode { --primary:#F472B6; --accent:#F9A8D4; --tertiary:#F472B6; --primary-soft:#2A1420; }

:root[data-palette="teal"] { --primary:#0D9488; --accent:#134E4A; --secondary:#3F5756; --tertiary:#0F766E; --primary-soft:#E7F6F3; }
:root[data-palette="teal"].dark-mode { --primary:#2DD4BF; --accent:#5EEAD4; --tertiary:#22D3EE; --primary-soft:#0F2422; }

/* ===== OPTIMIZACIÓN MODO CLARO: grises teñidos por paleta ===== */
:root[data-palette="azul"]:not(.dark-mode) { --lightGray:#F5F8FD; --mediumGray:#EDF2FA; --fullGray:#E4EBF6; --strongGray:#CBD6E8; }
:root[data-palette="verde"]:not(.dark-mode) { --lightGray:#F4F9F5; --mediumGray:#EBF3ED; --fullGray:#E0EAE2; --strongGray:#C6D6C9; }
:root[data-palette="violeta"]:not(.dark-mode) { --lightGray:#F7F5FC; --mediumGray:#F0EDF8; --fullGray:#E6E1F1; --strongGray:#D0C8E4; }
:root[data-palette="naranja"]:not(.dark-mode) { --lightGray:#FCF7F3; --mediumGray:#F7F0E9; --fullGray:#F0E4D8; --strongGray:#DECFBE; }
:root[data-palette="rosa"]:not(.dark-mode) { --lightGray:#FCF6F9; --mediumGray:#F8EEF3; --fullGray:#F1E0E8; --strongGray:#E2CAD5; }
:root[data-palette="teal"]:not(.dark-mode) { --lightGray:#F3F9F8; --mediumGray:#EBF4F2; --fullGray:#DFECE9; --strongGray:#C3DAD7; }

/* ===== MEJORA VISUAL DE PALETA ===== */
/* 1. Títulos en neutro (negro en claro, blanco en oscuro) */
h1, h2 { color: var(--normalInverted); }

/* 3. Cabecera de tabla en color de marca (modo claro) */
:root:not([data-palette="original"]) table tr:first-child { background-color: var(--primary); }
:root:not([data-palette="original"]) table tr:first-child td,
:root:not([data-palette="original"]) table tr:first-child th { color: #fff; }
/* En modo oscuro el fondo del header es --primary (claro): usar texto oscuro */
:root.dark-mode:not([data-palette="original"]) table tr:first-child td,
:root.dark-mode:not([data-palette="original"]) table tr:first-child th { color: #0E1B2C; }

/* 4. Acento lateral sutil en tarjetas */
:root:not([data-palette="original"]) div.data_box { border-left: 1px solid var(--primary-soft); }
:root:not([data-palette="original"]) div.content_box { border-left: 1px solid var(--primary-soft); }

/* Reserva la zona del status bar (no para el contenido) */
body { padding-top: env(safe-area-inset-top, 0px); }

/* 6. --tertiary en separadores */
:root:not([data-palette="original"]) .separator_line { background-color: var(--tertiary); }

/* Fecha y hora sutil en el dashboard */
.fecha-hora {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--secondary);
    letter-spacing: 0.3px;
}

/* ===== DESIGN POLISH — refinamiento visual (calidad percibida) ===== */
:root{
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --hairline:rgba(16,24,40,.08);
  --text-muted:#667085;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
}
.dark-mode{ --hairline:rgba(255,255,255,.10); --text-muted:#98A2B3; }

/* Títulos y números: más finos y alineados */
h1{letter-spacing:-.02em}
h2{letter-spacing:-.015em}
.data_box h2, .data_box.modern h2, table td{font-variant-numeric:tabular-nums}

/* Pills tonales (más calma y elegancia que el relleno saturado) */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
      font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1.45;border:1px solid transparent}
.pill-green{background:rgba(63,185,80,.14);color:#1a7f37;border-color:rgba(63,185,80,.28)}
.pill-red{background:rgba(218,54,51,.12);color:#bd2f27;border-color:rgba(218,54,51,.26)}
.pill-purple{background:rgba(130,80,223,.13);color:#6a3cbe;border-color:rgba(130,80,223,.26)}
.pill-amber{background:rgba(210,153,34,.16);color:#8f6400;border-color:rgba(210,153,34,.30)}
.pill-blue{background:rgba(31,111,235,.12);color:#1a5fd0;border-color:rgba(31,111,235,.26)}
.pill-gray{background:var(--fullGray);color:var(--secondary);border-color:var(--strongGray)}
.dark-mode .pill-green{background:rgba(63,185,80,.16);color:#7ee787;border-color:rgba(99,220,116,.30)}
.dark-mode .pill-red{background:rgba(248,81,73,.16);color:#ff9a92;border-color:rgba(248,81,73,.32)}
.dark-mode .pill-purple{background:rgba(163,113,247,.18);color:#c9a6ff;border-color:rgba(163,113,247,.34)}
.dark-mode .pill-amber{background:rgba(210,153,34,.16);color:#f0c674;border-color:rgba(210,153,34,.32)}
.dark-mode .pill-blue{background:rgba(56,139,253,.16);color:#79b8ff;border-color:rgba(56,139,253,.32)}
.dark-mode .pill-gray{background:var(--surface-3);color:#B0B0B8;border-color:var(--surface-hover)}

/* Tarjetas: profundidad sutil en lugar de plano */
.content_box{box-shadow:var(--shadow-sm)}
.data_box.large, .data_box.modern.increased{box-shadow:var(--shadow-sm)}

/* ===== DESIGN SYSTEM v2 — escalas, jerarquía, motion, estados ===== */
:root{
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --t-fast:150ms; --t-base:200ms; --ease:cubic-bezier(.4,0,.2,1);
  --text-1:#101828; --text-2:#475467; --text-3:#98A2B3;
  --surface:#ffffff; --surface-2:#F8F9FA; --surface-3:#F2F4F7; --border:#EAECF0;
}
.dark-mode{
  --text-1:#F2F4F7; --text-2:#B0B0B8; --text-3:#8A8F9C;
  --surface:#1A1A22; --surface-2:#22222A; --surface-3:#25252D; --border:#2E2E38;
}

/* Jerarquía de texto (3 niveles) */
body{ color:var(--text-1); }
h1, h2{ color:var(--text-1); }
h3, h4, .field_name h3{ color:var(--text-2); }
::placeholder{ color:var(--text-3); opacity:1; }

/* Radios consistentes */
.content_box, .data_box.large, .data_box.modern.increased, dialog{ border-radius:var(--r-lg); }
.data_box, .data_box.modern{ border-radius:var(--r-md); }
.chip, .applied-chip, .pill, a.type-1, button.normal{ border-radius:var(--r-pill); }
button.large{ border-radius:var(--r-sm); }
select.small, ps{ border-radius:var(--r-sm); }

/* Iconografía: tamaño y alineación consistentes */
button img, button.normal img, a.type-1 img, a.type-button img{ width:16px; height:16px; flex:none; vertical-align:middle; }
delete, edituser, deleteuser{
  width:38px; height:38px; border-radius:var(--r-sm);
  transition: background-color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
delete:hover, edituser:hover, deleteuser:hover{ background-color:var(--surface-3); }
.dark-mode delete, .dark-mode edituser, .dark-mode deleteuser{ filter:invert(1); }

/* Motion: transiciones y foco consistentes */
a, button, input, select, ps, .chip, .data_box, .content_box{
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
a:focus-visible, button:focus-visible, ps:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
button.large:active{ transform:scale(.99); }

/* Spinner refinado (usa tokens y color primario) */
circle{
  width:30px; height:30px;
  border:3px solid var(--surface-3);
  border-top-color:var(--primary);
  border-radius:50%;
}

/* Estados vacíos consistentes */
.empty-state{
  width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:44px 16px; text-align:center; color:var(--text-2);
}
.empty-state .es-icon{ width:40px; height:40px; opacity:.45; margin-bottom:2px; }
.empty-state strong{ color:var(--text-1); font-weight:600; font-size:15px; }
.empty-state span{ font-size:13px; color:var(--text-3); max-width:380px; }
td > .empty-state{ padding:32px 12px; }

/* Accesibilidad: acciones de icono y preferencia de movimiento */
delete, edituser, deleteuser{ cursor:pointer; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===== Fase 2: tipografía fluida y jerarquía ===== */
h1{ font-size:clamp(28px, 3.4vw, 38px); line-height:1.12; }
h2{ font-size:clamp(19px, 2.3vw, 26px); line-height:1.2; }
h3{ font-size:13px; line-height:1.35; }
h4{ font-size:13px; line-height:1.45; }
.data_box h1{ letter-spacing:.01em; }
.data_box h2{ font-size:clamp(19px, 2.1vw, 24px); line-height:1.15; }
.data_box.large h2{ font-size:clamp(32px, 4.4vw, 48px); }
.data_box.modern.increased h2{ font-size:clamp(20px, 2.2vw, 24px); }
@media (max-width:640px){
  h1{ font-size:27px; }
  h2{ font-size:20px; }
  .data_box.large h2{ font-size:34px; }
}

/* ===== Fase 3: superficies tokenizadas (modo oscuro consistente) ===== */
.field_name{ background-color:var(--lightGray); }
input, select{ background-color:var(--lightGray); }
:root:not(.dark-mode) :is(#login_form,#signup_form){ --lightGray:#F4F5F7; --mediumGray:#ECEEF2; --fullGray:#E3E6EB; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 1000px var(--lightGray) inset !important;
  box-shadow: 0 0 0 1000px var(--lightGray) inset !important;
  -webkit-text-fill-color: var(--normalInverted) !important;
  caret-color: var(--normalInverted);
  transition: background-color 9999s ease-in-out 0s;
}
.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 1000px var(--surface-3) inset !important;
  box-shadow: 0 0 0 1000px var(--surface-3) inset !important;
  -webkit-text-fill-color: var(--normalInverted) !important;
  caret-color: var(--normalInverted);
}
.data_box.modern{ background-color:var(--lightGray); }
.data_box.modern h2{ background-color:var(--fullGray); }
select.small{ background-color:var(--fullGray); }
ps{ background-color:var(--fullGray); color:var(--normalInverted); }

/* Subtítulo de sección (rango temporal: turno vs hoy) */
.section-sub{ display:block; width:100%; font-size:12px; color:var(--text-3); margin:-12px 0 10px; letter-spacing:.01em; }
/* Etiquetas in/out dentro de un valor (mismo tamaño que "Hoy") */
.unit{ font-size:12px; font-weight:400; color:var(--text-3); letter-spacing:.01em; }
/* Dashboard: 2 tarjetas por fila (consistente en escritorio y móvil) */
.content_box.grid2 > .data_box.small{ flex-grow:0; flex-basis:calc(50% - 4px); min-width:0; }
.content_box.grid2 > .data_box.small.span2{ flex-basis:100%; }
/* Sub-tarjetas dentro de una tarjeta (p. ej. Monedero → Recargas / Pagos) */
.monedero-mini{ display:flex; gap:8px; width:100%; }
.monedero-mini .mini{ flex:1; min-width:0; background:var(--fullGray); border-radius:var(--r-sm); padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.monedero-mini .mini h3{ margin:0; font-size:12px; color:var(--text-3); }
.monedero-mini .mini strong{ font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; }
/* Valor monetario destacado y centrado (mismo estilo que el número de Monedero) */
.money-value{ display:block; width:100%; text-align:center; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.01em; }

/* ===== Quality pass 2 — luz, textura y detalle ===== */
/* Render de texto más nítido */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
h1, h2, h3{ text-wrap:balance; }
::selection{ background:var(--primary); color:#fff; }

/* Luz ambiental sutil en la parte superior (se adapta a la paleta) */
body{
  background-color:#fff;
  background-image:radial-gradient(1100px 460px at 50% -180px, var(--primary-soft), transparent 70%);
  background-repeat:no-repeat;
}
.dark-mode body{ background-color:var(--normal); }

/* Definición fina en las tarjetas (hairline) */
.content_box{ border:1px solid var(--hairline); }

/* Botones con leve relieve y respuesta al presionar */
.primary, .secondary, .color-accent_strong{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(16,24,40,.10);
}
button:active{ transform:translateY(1px); }

/* Inputs: anillo de foco claro */
input:focus, select:focus{ box-shadow: inset 0 0 0 2px var(--primary); }

/* Profundidad en menú y diálogos */
menu{ box-shadow: 0 12px 32px -12px rgba(16,24,40,.30); }
dialog{ box-shadow: 0 24px 64px -24px rgba(16,24,40,.40); }

/* Scrollbars discretas */
*{ scrollbar-width:thin; scrollbar-color:var(--strongGray) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--strongGray); border-radius:999px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--secondary); background-clip:content-box; }

/* ===== Reportes: acciones de exportación y tabla de detalle compactas ===== */
/* Barra de acciones (CSV / PDF / Email): botones discretos alineados a la derecha */
.report_exports{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  margin-top:12px;
}
.report_exports button.normal{
  flex:0 0 auto;
  min-width:104px;
  height:34px;
  padding:0 16px;
  font-size:13px;
  font-weight:500;
}
@media (max-width:420px){
  .report_exports button.normal{ flex:1 1 0; min-width:0; }
}

/* Tabla de detalle del reporte: tipografía y densidad más finas */
#table_holder{ width:100%; margin-top:16px; overflow-x:auto; }
#table_holder table{
  table-layout:auto;
  width:auto;
  min-width:100%;
}
#table_holder td{
  overflow:visible;
  white-space:nowrap;
}
/* Panel del detalle de turno: encabezado fijo (sticky) + un solo scroll */
.report-table-wrap{
  overflow:auto;
  max-height:min(62vh, 640px);
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:12px;
}
.report-table-wrap table{ margin-bottom:0; }
.report-table-wrap th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--surface);
}
:root:not([data-palette="original"]) .report-table-wrap th{ background:var(--primary); }

/* Celdas apiladas (hora + fecha) y desglose secundario */
/* Alinear al tope para que todas las columnas coincidan con la primera línea (hora) */
#table_holder table.report-table td,
#table_holder table.report-table th{ vertical-align:top; }
#table_holder table.report-table td{ line-height:1.35; }
#table_holder .stack-date,
#table_holder .stack-time{ display:block; white-space:nowrap; font-variant-numeric:tabular-nums; }
#table_holder .stack-date{ font-size:11px; color:var(--text-3); }
#table_holder .cell-sub{ display:block; font-size:11px; color:var(--text-3); font-variant-numeric:tabular-nums; }
#table_holder .cell-desc{ font-size:11px; color:var(--text-3); white-space:normal; min-width:120px; max-width:220px; }

/* Fila de totales del turno */
#table_holder tr.report-total td{
  height:auto;
  padding-top:10px;
  padding-bottom:10px;
  font-weight:600;
  color:var(--text-1);
  background:var(--surface-2);
  border-top:2px solid var(--border);
}
#table_holder tr.report-total .cell-sub{ font-weight:500; color:var(--text-2); }

/* En móvil, tabla de reporte aún más compacta para aprovechar el ancho */
@media (max-width:640px){
  .report-table-wrap{ max-height:none; border-radius:0; border-left:none; border-right:none; }
  #table_holder .stack-date,
  #table_holder .cell-sub{ font-size:10px; }
}

/* Iniciar sesión con Google */
.google-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#888;font-size:13px;width:100%;}
.google-divider::before,.google-divider::after{content:"";flex:1;height:1px;background:#ddd;}