/**
 * Fuentes
 */

/* Responsive utilities and base fixes */
:root {
  --max-content-width: 68.75rem;
  --mobile-break: 40rem;
  --tablet-break: 62rem;
}

/* box sizing and responsive defaults */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
img,
picture,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  word-break: break-word;
}

/* fluid container */
.container {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* responsive typography (small improvement) */
html {
  font-size: 1rem;
}
@media (max-width: 43.75rem) {
  html {
    font-size: 0.9375rem;
  }
}
@media (max-width: 25rem) {
  html {
    font-size: 0.875rem;
  }
}

/* ------------------------------------------------------------------ */
/* Overrides for inline styles and responsive helpers (non-invasive)  */
/* These rules target common inline-styled elements so you don't need to edit templates */
/* ------------------------------------------------------------------ */

/* Make badges fluid and readable on small screens */
.badge {
  display: inline-block;
  padding: 0.4rem 0.8rem !important; /* override inline padding */
  font-size: clamp(
    0.9rem,
    2.4vw,
    1.1rem
  ) !important; /* override inline font-size */
  line-height: 1.2;
  max-width: 100%;
  box-sizing: border-box;
}

/* Make the big icon/text that used inline font-size scale down on small screens */
p.content-block[style*="font-size:4rem"] {
  font-size: clamp(2rem, 8vw, 4rem) !important;
}

/* Buttons: on small screens take full width for easier tapping */
.button.button-xbig,
button.btn[data-action="retry-location"] {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 0.8rem 1rem;
  font-size: 1rem;
}
@media (min-width: 43.75rem) {
  .button.button-xbig,
  button.btn[data-action="retry-location"] {
    width: auto;
    display: inline-block;
  }
}

/* Ensure content-blocks have responsive padding and don't force overflow */
.content-block {
  padding: 0.8rem 0;
  word-wrap: break-word;
}
.block-content {
  padding: 0.6rem 1rem;
}

/* Map adjustments (reinforce previous change) 
.map-register{ box-sizing: border-box; overflow:hidden; }
*/
/* Prevent accidental horizontal scrolling on small screens */
html,
body {
  overflow-x: hidden;
}

/*@font-face {
    font-family: 'vonique_64italic';
    src: url('../lib/fonts/vonique/vonique_64_italic-webfont.woff2') format('woff2'),
         url('../lib/fonts/vonique/vonique_64_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'vonique_64regular';
    src: url('../lib/fonts/vonique/vonique_64-webfont.woff2') format('woff2'),
         url('../lib/fonts/vonique/vonique_64-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'vonique_64bold_italic';
    src: url('../lib/fonts/vonique/vonique_64_bold_italic-webfont.woff2') format('woff2'),
         url('../lib/fonts/vonique/vonique_64_bold_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'vonique_64bold';
    src: url('../lib/fonts/vonique/vonique_64_bold-webfont.woff2') format('woff2'),
         url('../lib/fonts/vonique/vonique_64_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}*/

/**
 * Estilos generales
 */

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: #ffffff;
  /*font-family: 'Montserrat', serif;*/
  font-family: "vonique_64regular", sans-serif;
  /*
    IMPORTANTE! Es obligatorio para adaptar el toolbar en el iPhone X y que se visualice correctamente     
    */
  padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
  padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}
/*
* IMPORTANTE !! Esto es obligatorio para adaptar el total de la pantalla al iPhone X
*/
/* .view-main {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
} */

.statusbar-overlay {
  background-color: #04b4ae;
}

/* Clase que da más tamaño al status overlay de ios cuando está en página de login */
.loginPageIos .statusbar-overlay {
  background-color: #04b4ae;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: constant(safe-area-inset-top, 20px);
  height: env(safe-area-inset-top, 20px);
  z-index: 10000;
}

/*h1, h2, h3, h4, h5, h6 {
 font-family: 'Lora', sans-serif;
 font-weight: 300;
 text-transform: uppercase;
}*/

.corporativo {
  color: #facc2e; /* color corporativo */
}

.loader-background {
  width: 100%;
  height: 100%;
  position: relative; /* Cambiamos de absolute a relative */
  background-color: #eaeaea4a;
  z-index: 9999;
}
.loader {
  border: 0.5rem solid #f3f3f3;
  border-radius: 50%;
  border-top: 0.5rem solid #04b4ae;
  width: 3.125rem;
  height: 3.125rem;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  position: absolute;
  /* Ponemos el valor de left, bottom, right y top en 0 */
  left: 0;
  bottom: 0;
  right: 0;
  top: 12.5rem;
  margin: auto; /* Centramos vertical y horizontalmente */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.bg-white {
  background-color: #ffffff;
}

.bg-corporativo {
  background-color: #04b4ae; /* color corporativo */
}

button.corporativo,
.button.corporativo {
  background-color: #04b4ae; /* color corporativo */
  color: #ffffff;
  border: 1px solid #04b4ae; /* color corporativo */
  height: 3.125rem;
}

.buttons-row button,
.buttons-row .button {
  border: 1px solid #04b4ae; /* color corporativo */
  background-color: transparent;
  color: #04b4ae;
}

.buttons-row button.active,
.button.active {
  background-color: #04b4ae;
  color: #fff;
}

.hide {
  display: none !important;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-bold {
  font-weight: bold;
}

.text-normal {
  font-weight: normal;
}

.capitalize {
  text-transform: capitalize !important;
}

.id-title {
  font-size: 1.5rem;
}

.list-block {
  font-size: inherit;
  margin: 1.25rem 0;
}

.content-block {
  color: #555;
  font-weight: normal;
}

.content-block .control-label {
  color: #555;
  font-weight: bold;
}

.inline {
  display: inline-block;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.clear {
  clear: both;
}

.data-table {
  border-collapse: collapse;
}

form .item-input span.readonly {
  opacity: 0.7;
}

form .content-block {
  margin: 5.9375rem 0;
}

/* Reduce the large vertical spacing inside the registry form so map and action buttons
   stay closer to the related controls. This targets the registry form with id form-registry
   and acts as a small-screen friendly override. */
form#form-registry .content-block {
  margin: 0.5rem 0 !important;
}

/* Also provide a general smaller-margin fallback for small screens to avoid large gaps */
@media screen and (max-width: 43.75rem) {
  form .content-block {
    margin: 0.5rem 0 !important;
  }
}

form.list-block {
  margin: 0.9375rem 0;
}

form .list-block textarea {
  border: 1px solid #c8c7cc;
  background-color: #fff;
  border-radius: 0.1875rem;
  font-size: 0.75rem;
  padding: 0.375rem 0.5rem;
}

.standard-input {
  border: 1px solid #ccc;
  width: 70%;
  padding: 0.125rem;
}

.border-input {
  border: 1px solid #848484 !important;
  margin: 0.4375rem 0;
}

.tabbar a.active {
  color: #04b4ae;
}

@media screen and (max-width: 64rem) {
  form .card-header {
    min-height: 3.25rem;
    font-size: 1.375rem;
  }
  form .smart-select {
    min-height: 3.25rem;
    font-size: 1.375rem;
  }
  form .list-block textarea {
    font-size: 1.0625rem;
  }
  form.searchbar {
    margin-top: 0.625rem;
  }
  .standard-input {
    line-height: 2.375rem;
    font-size: 1.375rem;
  }

  /* Small-screen utilities used by templates */
  .btn-full {
    width: 100%;
    display: block;
  }
  .mt-sm {
    margin-top: 0.625rem !important;
  }
  .badge-welcome {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
  }
  .map-register {
    width: 100%;
    height: 12.5rem;
    max-height: 45vh;
    border-radius: 0 !important;
  }
  .icon-sad {
    font-size: clamp(2.5rem, 8vw, 4rem);
    color: #d9534f;
  }
  .notice {
    font-size: clamp(1rem, 3.5vw, 1.25rem);
  }
  button.corporativo,
  .button.corporativo,
  button.secundary {
    /* Desktop adjustments for same helpers 
 .map-register { height: 12.5rem;*/
  }
  .btn-full {
    display: inline-block;
    width: auto;
  }

  /* Image helpers: make images fluid, centered in content blocks and avoid accidental floats
   Only target images inside app content to avoid changing email/template internals. */
  .content-block img,
  .block-content img,
  .page-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
  }

  /* If someone used inline float styles inside content blocks, neutralize them here */
  .content-block img[style*="float:left"],
  .block-content img[style*="float:left"] {
    float: none !important;
  }

  /* Reduce vertical gaps caused by images & text wrapping */
  .content-block .img-inline,
  .block-content .img-inline {
    display: inline-block;
    vertical-align: middle;
    margin: 0.4rem 0;

    font-size: 1.5rem;
  }
  button.corporativo,
  .button.corporativo {
    height: 4.375rem;
  }
  .toolbar.tabbar.button-big {
    height: 5rem !important;
  }
  .toolbar.tabbar .row .button.secundary {
    height: 4.375rem !important;
  }
}

@media screen and (max-width: 62rem) {
  form .card-header {
    min-height: 3.25rem;
    font-size: 1.375rem;
  }
  form .smart-select {
    min-height: 3.25rem;
    font-size: 1.375rem;
  }
  form .list-block textarea {
    font-size: 1.0625rem;
  }
  form.searchbar {
    margin-top: 0.625rem;
  }
  .standard-input {
    line-height: 2.375rem;
    font-size: 1.375rem;
  }
  button.corporativo,
  .button.corporativo,
  button.secundary {
    font-size: 1.5rem;
  }
  button.corporativo,
  .button.corporativo {
    height: 3.75rem;
  }
  .toolbar.tabbar.button-big {
    height: 4.375rem !important;
  }
  .toolbar.tabbar .row .button.secundary {
    height: 3.75rem !important;
  }
}

@media screen and (max-width: 37.5rem) {
  form .card-header {
    min-height: 2.625rem;
    font-size: 1rem;
  }
  form .smart-select {
    min-height: 2.625rem;
    font-size: 1rem;
  }
  form .list-block textarea {
    font-size: 0.875rem;
  }
  .standard-input {
    line-height: 1.5rem;
    font-size: 1rem;
  }
  button.corporativo,
  .button.corporativo,
  button.secundary {
    font-size: 1.125rem;
  }
  button.corporativo,
  .button.corporativo {
    height: 3.0625rem;
  }
  .toolbar.tabbar.button-big {
    height: 3.5rem !important;
  }
  .toolbar.tabbar .row .button.secundary {
    height: 3.0625rem !important;
  }
}

@media screen and (max-width: 21.875rem) {
  form .card-header {
    min-height: 2.625rem;
    font-size: 1rem;
  }
  form .smart-select {
    min-height: 2.625rem;
    font-size: 1rem;
  }
  form .list-block textarea {
    font-size: 0.875rem;
  }
  .standard-input {
    line-height: 1.5rem;
    font-size: 1rem;
  }
  button.corporativo,
  .button.corporativo,
  button.secundary {
    font-size: 1.0625rem;
  }
  button.corporativo,
  .button.corporativo {
    height: 3rem;
  }
  .toolbar.tabbar.button-big {
    height: 3.4375rem !important;
  }
  .toolbar.tabbar .row .button.secundary {
    height: 3rem !important;
  }
  /*.list-block .item-content{
        height: 2.375rem;
        min-height: 2.375rem;
    }*/
}

.relative {
  position: relative;
}
.block-separator {
  margin-bottom: 0.3125rem;
}

.ion-icon-large {
  font-size: 1.375rem;
}

.line-icon-large {
  font-size: 1.375rem;
}

.line-icon-xlarge {
  font-size: 2rem;
}

.line-icon-xxlarge {
  font-size: 2.625rem;
}

.toolbar .line-icon-large {
  font-size: 1.625rem;
}

/*Tamaño especial para los elementos del Tabbar*/
@media (min-width: 48rem) {
  .tabbar a.tab-link,
  .tabbar a.link {
    width: auto;
    min-width: 7.1875rem;
  }
}

.datePicker {
  background: #ffffff;
}

.text-logged {
  text-align: right;
  margin-right: 0.1875rem;
}
.text-user-logged {
  color: #2e64fe;
}

.loader-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  font-size: 3.75rem;
}

.selectorDate i {
  font-size: 3rem;
}

.selectorDate input[type="date"] {
  text-align: center;
  min-height: 2.1875rem;
  font-size: 2.25rem;
}

.push-notification {
  background: #555555;
  color: #000000;
}

.active-star {
  color: #f2e71f !important;
}
/*
Badges
*/
.badge.color-green {
  color: #fff;
  background: #4cd964;
}
.badge.color-red {
  color: #fff;
  background: #ff3b30;
}
.badge.color-orange {
  color: #fff;
  background: #ffbf00;
}
.badge.color-yellow {
  color: #fff;
  background: #dfbd01;
}

.badge.color-corporativo {
  color: #585858;
  background: #04b4ae;
}

.label-switch .checkbox {
  position: absolute;
  left: 6.25rem;
  bottom: 0.9375rem;
  /*left: 15.625rem;
    bottom: 0.9375rem;*/

  /*width: 2.375rem;
    height: 1.625rem;*/
}

/*
Floating buttons
*/
.floating-button {
  bottom: 3.125rem;
  z-index: 90;
  font-size: 1.75rem;
  background: #04b4ae;
  color: #000;
  border: none;
}

/*.label-switch .checkbox:before {
    position: absolute;
    left: 0.125rem;
    top: 0.125rem;
    width: 2.375rem;
    height: 1.75rem;
}    

.label-switch .checkbox:after {
    content: ' ';
    height: 1.25rem;
    width: 1.25rem;
}*/

.list-block .item-title {
  text-align: left;
}

/*
* Estilos generales, para tablet
*/

@media screen and (max-width: 64rem) {
  body {
    font-size: 1.25rem;
  }
  .button {
    font-size: 1.75rem;
    line-height: 4.0625rem;
    height: 4.0625rem;
  }

  .button.button-big {
    font-size: 1.375rem;
    line-height: 4.125rem;
    height: 4.125rem;
  }
  .list-block.media-list .item-title,
  .list-block li.media-item .item-title,
  .list-block .item-after {
    font-size: 1.5rem;
  }
  .item-link .item-content .item-inner .item-title {
    font-size: 1.5rem;
    max-width: 31.25rem;
  }
  .list-block .item-subtitle {
    font-size: 1.25rem;
  }
  .floating-button {
    bottom: 5.625rem;
  }
  .badge {
    font-size: 1.375rem;
  }
}

@media screen and (max-width: 62rem) {
  body {
    font-size: 1.125rem;
  }
  .button {
    font-size: 1.0625rem;
    line-height: 3.25rem;
    height: 3.375rem;
  }

  .button.button-big {
    font-size: 1.375rem;
    line-height: 4.125rem;
    height: 4.125rem;
  }
  .button.button-xbig {
    font-size: 2rem;
    line-height: 5.375rem;
    height: 5.375rem;
  }
  .list-block.media-list .item-title,
  .list-block li.media-item .item-title,
  .list-block .item-after {
    font-size: 1.25rem;
  }
  .item-link .item-content .item-inner .item-title {
    font-size: 1.25rem;
    max-width: 31.25rem;
  }
  .list-block .item-subtitle {
    font-size: 1rem;
  }
  .text-logged {
    font-size: 1.375rem;
  }
  .input-group .buttonsupdown {
    text-align: center;
    width: 95%;
    padding-top: 0.3125rem;
    margin-left: 0.3125rem;
    font-size: 2rem;
  }
  input[type="date"],
  input[type="time"],
  input[type="datetime"] {
    min-height: 3.25rem;
    font-size: 1.5rem;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  }
  .ion.lg {
    font-size: 1.375rem;
  }
  .hidden-phone {
    display: table-cell;
  }
  .label-checkbox {
    font-size: 1.25rem;
  }
  .floating-button {
    bottom: 4.375rem;
  }
  .smart-select .item-content .item-inner .item-after {
    width: 31.25rem;
  }
  .badge {
    font-size: 1.375rem;
  }
}

@media screen and (max-width: 43.75rem) {
  body {
    font-size: 0.9375rem;
  }
  .floating-button {
    bottom: 4.375rem;
  }
  .smart-select .item-content .item-inner .item-after {
    width: 21.875rem;
  }
}

@media screen and (max-width: 37.5rem) {
  body {
    font-size: 0.9375rem;
  }
  .button {
    font-size: 1rem;
    height: 1.875rem;
  }

  .button.button-big {
    font-size: 1.0625rem;
    line-height: 2.75rem;
    height: 2.75rem;
  }

  .button.button-xbig {
    font-size: 1.625rem;
    line-height: 4.0625rem;
    height: 4.0625rem;
  }

  .list-block.media-list .item-title,
  .list-block li.media-item .item-title,
  .list-block .item-after {
    font-size: 0.9375rem;
  }
  .list-block .item-subtitle {
    font-size: 0.8125rem;
  }
  .text-logged {
    font-size: 1.0625rem;
  }
  .input-group .buttonsupdown {
    text-align: center;
    width: 89%;
    padding-top: 0.3125rem;
    margin-left: 0.3125rem;
    font-size: 1.5rem;
  }
  input[type="date"],
  input[type="time"],
  input[type="datetime"] {
    min-height: 2.1875rem;
    font-size: 1rem;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  }
  .ion.lg {
    font-size: 0.75rem;
  }
  .hidden-phone {
    display: none;
  }
  .label-checkbox {
    font-size: 0.875rem;
  }
  .item-link .item-content .item-inner .item-title {
    font-size: 0.9375rem;
    max-width: 15.625rem;
  }
  .smart-select .item-content .item-inner .item-after {
    width: 21.875rem;
  }
  .badge {
    font-size: 0.8125rem;
  }
}

@media screen and (max-width: 21.875rem) {
  body {
    font-size: 0.9375rem;
  }
  .item-link .item-content .item-inner .item-title {
    max-width: 12.5rem;
  }
  .smart-select .item-content .item-inner .item-after {
    width: 18.75rem;
  }
  .badge {
    font-size: 0.8125rem;
  }
}

/* ========================================================================== */
/**
 * Landing
 */
.view[data-page="landing"] .navbar {
  display: none;
}

.page[data-page="landing"] {
  background-color: transparent;
}

/* ========================================================================== */
/**
 * Login
 */
.view[data-page="login"] .navbar {
  display: none;
}

input[name="usuario"] {
  text-transform: lowercase;
}

.login-screen-content.login {
  background: url("img/login-background.png") no-repeat;
  background-size: 100%;
}
.login-screen-content.register {
  background: url("img/login-background.png") no-repeat;
  background-size: 100%;
}

.login-screen-content .content-block,
.login-screen-content .list-block {
  margin: 0.625rem auto;
}

@media screen and (max-width: 64rem) {
  .logo {
    margin: 0 auto;
    margin-top: 6.25rem !important;
    height: 15.625rem;
    text-align: center;
  }
  .logo img {
    width: 9.375rem;
  }
  .logo-navbar img {
    padding-top: 0.625rem;
    height: 4.25rem;
  }
  .navbar-fixed .page-content {
    padding-top: 4rem;
  }
  .checkRememberPassword {
    font-size: 1.125rem;
    top: 0.3125rem;
    width: 25rem !important;
    left: 0.625rem;
  }
}

@media screen and (max-width: 62rem) {
  .logo {
    margin: 0 auto;
    margin-top: 6.25rem !important;
    height: 15.625rem;
    text-align: center;
  }
  .logo img {
    width: 9.375rem;
  }
  .logo-navbar img {
    padding-top: 0.625rem;
    height: 2.8125rem;
  }
  .navbar-fixed .page-content {
    padding-top: 3.375rem;
  }
  .checkRememberPassword {
    font-size: 1.125rem;
    top: 0.3125rem;
    width: 25rem !important;
    left: 0.625rem;
  }
}

@media screen and (max-width: 37.5rem) {
  .logo {
    margin: 0 auto;
    margin-top: 3.125rem !important;
    height: 7.5rem;
    text-align: center;
  }
  .logo img {
    width: 6.875rem;
  }
  .logo-navbar img {
    padding-top: 0.625rem;
    height: 1.875rem;
  }
  .navbar-fixed .page-content {
    padding-top: 2.5rem;
  }
  .page-content {
    /*     padding-bottom: 1.875rem;
 */
  }

  /* Center the logout link relative to the full navbar and add spacing so
         it's not glued to the right edge. We set the navbar as positioning
         context and absolutely center the logout action across the bar. */
  .navbar {
    position: relative;
  }
  .navbar a[data-action="logout"] {
    position: relative; /* quitar absolute */
    padding: 0.375rem 0.75rem;
    color: black;
    text-decoration: none;
    white-space: nowrap;
  }
  /* Give a little breathing room to right-aligned items so 'Salir' doesn't
         visually touch the screen edge when present in the right container. */
  .navbar .right a {
    margin-right: 0.75rem;
  }

  /* Login screen: provide spacing between logo and intro text and center the intro */
  .login-screen-content.login .logo {
    margin-bottom: 0.5rem;
  }
  .login-screen-content.login .content-block {
    text-align: center;
  }
  .login-screen-content.login .content-block:not(.logo):not(.titleModeApp) {
    margin-top: 0.375rem;
  }

  /* Reinforce avatar circularity for company, employee and registry detail screens */

  .checkRememberPassword {
    font-size: 0.875rem;
    top: 0.3125rem;
    width: 25rem !important;
    left: 0.625rem;
  }
}

/* Specific fallback for item-media images that carry width attributes in markup */
.item-media img[width] {
  width: clamp(2.25rem, 10vw, 5rem) !important;
  height: auto !important;
}

/* Make the initial/login logo noticeably larger (about double the old 7.5rem)
   but still responsive: min 8.75rem, scales with viewport, max 15rem. */
.login-screen-content.login .logo img {
  width: clamp(8.75rem, 30vw, 15rem) !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* For older browsers without aspect-ratio, enforce square using width/height where width is set */
.item-media img[width],
.item-media img[width] + img {
  height: auto; /* fallback */
}

/* Button vertical centering for main action buttons */
.button:not(.hide),
.button-big:not(.hide),
.button-xbig:not(.hide),
.btn-register:not(.hide),
a.button:not(.hide) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure line-height doesn't push texts down in buttons */
.button .line-icon-large,
.button i {
  margin-right: 0.5rem;
}
.button span,
.button i {
  line-height: 1;
}

/* Give extra bottom padding on small screens so forms don't get hidden under fixed toolbars or large buttons */
@media (max-width: 43.75rem) {
  /* .page-content {
    padding-bottom: 5.625rem;
  } */
  .list-block,
  form.list-block {
    margin-bottom: 1rem;
  }
}

@media screen and (max-width: 21.875rem) {
  .logo {
    margin: 0 auto;
    margin-top: 3.125rem !important;
    height: 5.625rem;
    text-align: center;
  }
}

.poweroffdiv {
  display: flex;
  justify-content: center; /* centra horizontalmente el contenido */
  margin-top: 1.25rem; /* espacio desde el div anterior */
}

.poweroffbutton {
  margin-top: 1.25rem;
  max-width: 15.625rem; /* opcional: limita ancho del botón */
  width: 100%; /* ocupa todo el ancho disponible hasta max-width */
  text-align: center; /* centra el texto/icono */
}

.logo-navbar img {
  position: relative; /* quitar absolute */
  padding: 0.375rem 0.75rem;
}

.titleModeApp {
  margin: 0 auto;
  width: 11.25rem;
  color: #002146;
}

/*#form-login input[type="text"], #form-login input[type="password"]{
    background: #FFF;
    border: 1px solid #848484;
    border-radius: 0.125rem;
}*/

/* ========================================================================== */
/**
 * Login PIN
 */

@media screen and (max-width: 64rem) {
  .pin-row {
    text-align: center;
    width: 40%;
    margin: 0 auto;
    margin-top: 11.25rem;
  }

  .pin-row-2 {
    text-align: center;
    width: 40%;
    margin: 0 auto;
    margin-top: 0.625rem;
  }

  .pin-button {
    border: 1px solid black;
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 0.3125rem;
  }

  .pin-code {
    border-bottom: 0.125rem solid black;
    width: 5rem;
    height: 5rem;
    font-size: 4.5rem;
    font-weight: bold;
  }

  .pin-button button {
    font-size: 3.125rem;
    font-weight: bold;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border-color: #1c1c1c;
    color: #1c1c1c;
  }
}

@media screen and (max-width: 62rem) {
  .pin-row {
    text-align: center;
    width: 40%;
    margin: 0 auto;
    margin-top: 9.375rem;
  }

  .pin-row-2 {
    text-align: center;
    width: 40%;
    margin: 0 auto;
    margin-top: 0.625rem;
  }

  .pin-button {
    border: 1px solid black;
    width: 4.375rem;
    height: 4.375rem;
    border-radius: 0.3125rem;
  }

  .pin-code {
    border-bottom: 0.125rem solid black;
    width: 3.75rem;
    height: 5rem;
    font-size: 4.5rem;
    font-weight: bold;
  }

  .pin-button button {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border-color: #1c1c1c;
    color: #1c1c1c;
  }
}

/* On screens that are 37.5rem or less, set the background color to olive */
@media screen and (max-width: 37.5rem) {
  .pin-row {
    text-align: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 7.5rem;
  }

  .pin-row-2 {
    text-align: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 0.625rem;
  }

  .pin-button {
    border: 1px solid black;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 0.3125rem;
  }

  .pin-code {
    border-bottom: 0.125rem solid black;
    width: 3.75rem;
    height: 5rem;
    font-size: 4.5rem;
    font-weight: bold;
  }

  .pin-button button {
    font-size: 2.25rem;
    font-weight: bold;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border-color: #1c1c1c;
    color: #1c1c1c;
  }
}

/* On screens that are 37.5rem or less, set the background color to olive */
@media screen and (max-width: 21.875rem) {
  .pin-row {
    text-align: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 5.625rem;
  }

  .pin-row-2 {
    text-align: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 0.625rem;
  }

  .pin-button {
    border: 1px solid black;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 0.3125rem;
  }

  .pin-code {
    border-bottom: 0.125rem solid black;
    width: 3.125rem;
    height: 5rem;
    font-size: 4.5rem;
    font-weight: bold;
  }

  .pin-button button {
    font-size: 2.25rem;
    font-weight: bold;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border-color: #1c1c1c;
    color: #1c1c1c;
  }
}

/* ========================================================================== */
/**
 * Register
 */
.view[data-page="register"] .navbar {
  display: none;
}

form .required::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

.btn-register {
  font-size: 1.125rem;
}

@media screen and (max-width: 62rem) {
  .btn-register {
    position: relative;
    top: 6.875rem;
  }
}

@media screen and (max-width: 40.625rem) {
  .btn-register {
    position: relative;
    top: 5.625rem;
  }
}

@media screen and (max-width: 37.5rem) {
  .btn-register {
    position: relative;
    top: 3.75rem;
  }
}

@media screen and (max-width: 21.875rem) {
  .btn-register {
    position: relative;
    top: 0.3125rem;
  }
}

/* ========================================================================== */
/**
 * Mode use App
 */
.view[data-page="mode"] .navbar {
  display: none;
}

#form-mode .item-media {
  font-size: 1.0625rem;
  min-width: 0.9375rem;
}

#form-mode .item-input {
  margin-left: 0.9375rem;
}

/* ========================================================================== */
/**
 * Navbar
 */
.navbar {
  border-bottom: none;
  /*background-color: #011680;*/
  /*background-color: #FACC2E;
    color: #ffffff;*/ /* color corporativo */
  background-color: #04b4ae;
  color: #fff;
}

/* .toolbar {
  margin-bottom: constant(safe-area-inset-bottom); */ /* iOS 11.0 */
/*  margin-bottom: env(safe-area-inset-bottom); */ /* iOS 11.2 */
/* } */

#tab-notifications .badge {
  position: absolute;
  right: 25%;
  top: 0.125rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  padding: 1px 0.3125rem;
}

@media screen and (max-width: 64rem) {
  .navbar {
    font-size: 2.25rem;
    height: 4.5rem;
  }
  .navbar .titulo {
    font-size: 1.5rem;
    color: #000000;
    line-height: 1.1;
  }
  .toolbar {
    font-size: 1.25rem;
    height: 4.5rem;
  }
}

@media screen and (max-width: 62rem) {
  .navbar {
    font-size: 1.625rem;
    height: 3.375rem;
  }
  .navbar .titulo {
    font-size: 1.125rem;
    color: #000000;
    line-height: 1.1;
  }
  .toolbar {
    font-size: 1.125rem;
    height: 3.375rem;
  }
  .toolbar-xbig {
    font-size: 1.875rem;
    height: 4.875rem;
  }
}

@media screen and (max-width: 37.5rem) {
  .navbar {
    font-size: 1.0625rem;
    height: 2.75rem;
  }
  .navbar .titulo {
    font-size: 1rem;
    color: #000000;
    line-height: 1.1;
  }
  .toolbar {
    font-size: 0.625rem;
    height: 2.75rem;
  }
  .toolbar-xbig {
    font-size: 1.375rem;
    height: 4.25rem;
  }
}

.navbar a.link {
  color: #ffffff;
  /*color: #007aff;*/
}

.navbar a.link i {
  font-size: 1.5rem;
}

.navbar span.logo {
  display: block;
  height: 2.5rem;
  /*width: 60%;*/
  width: auto;
}

.navbar span.logo > img {
  /*width: 100%;*/
  height: 2.5rem;
}

/* ========================================================================== */
/**
 * Preloader
 */
.content-block.loader {
  margin-top: 3.125rem;
}

span.preloader {
  width: 2.625rem;
  height: 2.625rem;
  left: 50%;
  position: relative;
}

/* ========================================================================== */
/**
 * Páginas (page)
 */
.page {
  /*background: #fff;*/
  /*background-color: #efeff4;*/
  /*background-color: #f6f6ef;*/
  /*background-color: #f7f7f8;*/
  background: #fff;
  color: #363636;
}

.page-title {
  color: #555;
  font-size: 0.875rem;
  line-height: 1.1;
  padding: 0.9375rem 0.9375rem;
  position: relative;
  /*text-transform: uppercase;*/
  text-align: center;
  /*white-space: nowrap;*/
  text-overflow: ellipsis;
  font-weight: bold;
}

.page-title > span {
  vertical-align: middle;
}

@media screen and (max-width: 64rem) {
  .page-title {
    font-size: 1.25rem;
  }
  .page-title > i {
    font-size: 2.375rem;
    vertical-align: middle;
  }
}

@media screen and (max-width: 62rem) {
  .page-title {
    font-size: 1.25rem;
  }
  .page-title > i {
    font-size: 1.875rem;
    vertical-align: middle;
  }
}

@media screen and (max-width: 37.5rem) {
  .page-title {
    font-size: 0.875rem;
  }
  .page-title > i {
    font-size: 1.5rem;
    vertical-align: middle;
  }
}

.page-no-content {
  color: #555;
  padding: 0 0.9375rem;
}

/* .page.toolbar-fixed {
  padding-bottom: 1.875rem;
} */

/* ========================================================================== */
/**
 * Toolbar
 */
.toolbar.tabbar .row {
  width: 100%;
}

.toolbar.tabbar .row .button {
  width: 100%;
}

.toolbar.tabbar .row .button.secundary {
  width: 100%;
  background: white;
  height: 3.125rem;
}

.toolbar.tabbar.button-big {
  height: 4rem;
}

/* ========================================================================== */
/**
 * Botones
 */
.button {
  border-radius: 0.1875rem;
}

.col-100 .button {
  width: 100%;
}

.content-block .button {
  width: 100%;
}

.button.button-fill.bg-purple,
.button.button-fill.color-purple {
  background: #9c27b0 none repeat scroll 0 0;
  color: #fff;
}
.button-action .row .button {
  width: 100%;
}

/* ========================================================================== */
/*
	Android optimization hacks
*/
html.android .navbar-from-right-to-center .left.sliding .back.link .icon,
html.android .navbar-from-center-to-right .left.sliding .back.link .icon,
html.android .navbar-from-center-to-left .left.sliding .back.link .icon,
html.android .navbar-from-left-to-center .left.sliding .back.link .icon {
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}
html.android .navbar-from-right-to-center .sliding,
html.android .navbar-from-center-to-right .sliding,
html.android .navbar-from-center-to-left .sliding,
html.android .navbar-from-left-to-center .sliding {
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}
html.android .page-from-right-to-center {
  -webkit-animation: pageFromRightToCenterDegrade 200ms forwards;
  animation: pageFromRightToCenterDegrade 200ms forwards;
}
html.android .page-from-center-to-right {
  -webkit-animation: pageFromCenterToRightDegrade 200ms forwards;
  animation: pageFromCenterToRightDegrade 200ms forwards;
}
html.android .page-on-left {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
html.android .page-from-center-to-left {
  -webkit-animation: emptyAnimation 50ms forwards;
  animation: emptyAnimation 50ms forwards;
}
html.android .page-from-left-to-center {
  -webkit-animation: emptyAnimation 50ms forwards;
  animation: emptyAnimation 50ms forwards;
}
@-webkit-keyframes emptyAnimation {
  to {
    opacity: 1;
  }
}
@keyframes emptyAnimation {
  to {
    opacity: 1;
  }
}
html.android .label-switch input[type="checkbox"] + .checkbox {
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
}
html.android .label-switch input[type="checkbox"] + .checkbox:before {
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
}
html.android .label-switch input[type="checkbox"] + .checkbox:after {
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
}
html.android .list-block .list-group-title {
  display: none;
}

/* ========================================================================== */
/**
 * Listado de shops de usuario
 */

.list-shops-content .item-media {
  width: 3.125rem;
}

.list-shops-content .item-subtitle {
  color: #808080;
}

.item-media img {
  border: 1px solid #d8d8d8;
  border-radius: 50%;
}

.item-media img {
  border: 1px solid #d8d8d8;
  border-radius: 50%;
}

.image-profile {
  border: 1px solid #d8d8d8;
  border-radius: 50%;
}

/* ========================================================================== */
/**
 * Ventana de nuevo comercio
 */

@media screen and (max-width: 62rem) {
  .shop-content button[data-action="qr"],
  .shop-content button[data-action="search"] {
    font-size: 2.25rem;
    height: 8.125rem;
  }
}

@media screen and (max-width: 37.5rem) {
  .shop-content button[data-action="qr"],
  .shop-content button[data-action="search"] {
    font-size: 1.875rem;
    height: 8.125rem;
  }
}

@media screen and (max-width: 21.875rem) {
  .shop-content button[data-action="qr"],
  .shop-content button[data-action="search"] {
    font-size: 1.625rem;
    height: 8.125rem;
  }
}

/* ========================================================================== */
/**
 * Listado de busqueda de nuevos comercios
 */

/*.list-shops-content button[data-action='search']{
    position: absolute;
    right: 0.3125rem;
    top: 0.5rem;
}*/

/* ========================================================================== */
/**
 * Detalle del comercio del usuario
 */

.company-detail {
  margin-bottom: 2.5rem;
}

.category-option {
  border: 0.125rem solid #d8d8d8;
  border-radius: 0.3125rem;
  text-align: left;
  background: #007aff;
  margin: 0.125rem;
  padding: 0.3125rem;
}

.category-option img {
  float: left;
  border: 1px solid #d8d8d8;
  border-radius: 50%;
}

.category-option .title {
  color: white;
  font-size: 1.5rem;
  margin-top: 0.9375rem;
  margin-left: 4.375rem;
}

@media screen and (max-width: 64rem) {
  .company-detail .content-image-company {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 1.5rem !important;
  }

  .company-detail .content-image-company img.cover {
    background: white;
    height: 32.5rem;
    width: 100%;
    margin-top: -0.1875rem;
  }

  .company-detail .content-image-company img.profile {
    background: white;
    width: 9.375rem;
    height: auto;
    border-radius: 7.5rem;
    border: 1px solid #000;
    margin-top: 1.25rem;
    position: absolute;
    left: 0.3125rem;
    top: 21.875rem;
    z-index: 1;
  }

  .tab-link.button {
    line-height: 5rem;
  }
  .tab-link.button i {
    font-size: 2.625rem;
  }
  .buttons-row .button {
    height: 3.75rem;
  }
  .company-detail .list-block.media-list {
    height: 50rem;
    overflow: scroll;
  }
}

@media screen and (max-width: 62rem) {
  .company-detail .content-image-company {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 1.5rem !important;
  }

  .company-detail .content-image-company img.cover {
    background: white;
    height: 25rem;
    width: 100%;
    margin-top: -0.1875rem;
  }

  .company-detail .content-image-company img.profile {
    background: white;
    width: 9.375rem;
    height: auto;
    border-radius: 7.5rem;
    border: 1px solid #000;
    margin-top: 1.25rem;
    position: absolute;
    left: 0.3125rem;
    top: 13.75rem;
    z-index: 1;
  }

  .tab-link.button {
    line-height: 3.75rem;
  }
  .tab-link.button i {
    font-size: 2rem;
  }
  .buttons-row .button {
    height: 3.125rem;
  }
  .company-detail .list-block.media-list {
    height: 37.5rem;
    overflow: scroll;
  }
}

@media screen and (max-width: 23.4375rem) and (max-height: 53.125rem) {
  .company-detail .content-image-company {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 1.5rem !important;
  }
  .company-detail .content-image-company img.cover {
    background: white;
    height: 13.75rem;
    width: 100%;
  }

  .company-detail .content-image-company img.profile {
    background: white;
    width: 5rem;
    height: auto;
    border-radius: 3.125rem;
    border: 1px solid #000;
    margin-top: 1.25rem;
    position: absolute;
    left: 0.1875rem;
    top: 7rem;
    z-index: 1;
  }
  .tab-link.button {
    line-height: 1.75rem;
  }
  .tab-link.button i {
    font-size: 1.375rem;
    margin-top: 1px;
  }
  .buttons-row .button {
    height: 1.8125rem;
  }
  .company-detail .list-block.media-list {
    height: 24.375rem;
    overflow: scroll;
  }
}

@media screen and (max-width: 23.4375rem) and (max-height: 43.75rem) {
  .company-detail .content-image-company {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 1.5rem !important;
  }
  .company-detail .content-image-company img.cover {
    background: white;
    height: 13.75rem;
    width: 100%;
  }

  .company-detail .content-image-company img.profile {
    background: white;
    width: 5rem;
    height: auto;
    border-radius: 3.125rem;
    border: 1px solid #000;
    margin-top: 1.25rem;
    position: absolute;
    left: 0.1875rem;
    top: 7rem;
    z-index: 1;
  }
  .tab-link.button {
    line-height: 1.75rem;
  }
  .tab-link.button i {
    font-size: 1.375rem;
    margin-top: 1px;
  }
  .buttons-row .button {
    height: 1.8125rem;
  }
  .company-detail .list-block.media-list {
    height: 100%;
    overflow: scroll;
  }
}

@media screen and (max-width: 20.625rem) and (max-height: 37.5rem) {
  .company-detail .content-image-company {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 1.5rem !important;
  }
  .company-detail .content-image-company img.cover {
    background: white;
    height: 13.75rem;
    width: 100%;
  }

  .company-detail .content-image-company img.profile {
    background: white;
    width: 5rem;
    height: auto;
    border-radius: 3.125rem;
    border: 1px solid #000;
    margin-top: 1.25rem;
    position: absolute;
    left: 0.1875rem;
    top: 7rem;
    z-index: 1;
  }
  .tab-link.button {
    line-height: 1.75rem;
  }
  .tab-link.button i {
    font-size: 1.375rem;
    margin-top: 1px;
  }
  .buttons-row .button {
    height: 1.8125rem;
  }
  .company-detail .list-block.media-list {
    height: 100%;
    overflow: scroll;
  }
}

.item-service-active {
  background-color: #007aff !important;
  color: #fff !important;
}

@media screen and (max-width: 62rem) {
  .order-content .data-table {
    /*margin: 0.625rem 0;*/
    font-size: 0.9375rem;
  }
  .item-service-active .item-inner .item-title {
    font-weight: bold !important;
    font-size: 1.375rem !important;
  }

  .item-service-active .item-inner .item-subtitle {
    font-weight: bold !important;
    font-size: 1.25rem !important;
  }
}

@media screen and (max-width: 37.5rem) {
  .order-content .data-table {
    /*margin: 0.625rem 0;*/
    font-size: 0.6875rem;
  }
  .item-service-active .item-inner .item-title {
    font-weight: bold !important;
    font-size: 1rem !important;
  }

  .item-service-active .item-inner .item-subtitle {
    font-weight: bold !important;
    font-size: 0.875rem !important;
  }
}

.order-content .data-table thead th {
  white-space: normal;
  height: 1.5rem;
  padding: 0 0.3125rem;
}

.order-content .data-table th,
.order-content .data-table td {
  padding: 0.25rem;
  height: 1.75rem;
}

.order-content .data-table-orders td {
  height: 0.625rem;
}

/* ========================================================================== */
/**
 * Formulario de cita
 */

.shop-content {
  margin-top: -1.25rem;
}

.shop-content.shop-detail .page-title {
  padding: 0;
}

.shop-content .item-content.corporativo {
  width: 100%;
  background: #04b4ae;
  color: #585858;
  font-size: 1.125rem;
}

.swiper-slide img {
  border: 1px solid #d8d8d8;
  border-radius: 50%;
}

#schedulesAvailable {
  margin-bottom: 5rem;
}

.item-schedule {
  padding: 0.3125rem;
  background: #04b4ae;
  text-align: center;
  border: 1px solid #c8c7cc;
  border-radius: 0.625rem;
  margin-left: 0.5rem;
  margin-bottom: 0.3125rem;
  display: inline-block;
}

.item-schedule.pending {
  border: 1px solid #04b4ae;
  font-weight: bold;
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0) 1.25rem,
    rgba(0, 0, 0, 0) 2.5rem,
    #04b4ae 2.5rem,
    #04b4ae 3.75rem
  );
}

.item-schedule.busy {
  background: #e6e6e6;
  text-decoration: line-through;
}

.item-schedule.selected {
  background: #007aff;
  color: #ffffff;
  font-weight: bold;
}

@media screen and (max-width: 62rem) {
  .swiper-slide .name-employe {
    position: absolute;
    top: 0.9375rem;
    right: 30%;
    margin: 0 auto;
    width: 18.75rem;
    font-size: 0.875rem;
  }
  .item-schedule {
    margin-left: 0.75rem;
    font-size: 0.875rem;
    width: 10%;
  }
}

@media screen and (max-width: 37.5rem) {
  .swiper-slide .name-employe {
    position: absolute;
    top: 0.9375rem;
    right: 20%;
    margin: 0 auto;
    width: 12.5rem;
    font-size: 0.75rem;
  }
  .item-schedule {
    margin-left: 0.625rem;
    font-size: 0.75rem;
    width: 18%;
  }
}

@media screen and (max-width: 21.875rem) {
  .swiper-slide .name-employe {
    position: absolute;
    top: 0.9375rem;
    right: 15%;
    margin: 0 auto;
    width: 12.5rem;
    font-size: 0.75rem;
  }
  .item-schedule {
    margin-left: 0.3125rem;
    font-size: 0.75rem;
    width: 18%;
  }
}

#dateBefore,
#dateNext {
  font-size: 3.5rem;
  color: #04b4ae;
}

#dateBefore.disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

/* ========================================================================== */
/**
 * Listado de notificaciones
 */
#notifications-list .item-content .item-media {
  font-size: 1.25rem;
}
#notifications-list .item-content.read {
  background: #f2f2f2;
}
#notifications-list .item-content .item-title.noread {
  font-size: 0.875rem;
  font-weight: bold;
}
#notifications-list .item-content .item-subtitle.noread {
  font-size: 0.9375rem;
  font-weight: bold;
}
/* ========================================================================== */
/**
 * Formulario de usuario
 */

.form-user-content .list-block {
  margin: 0.625rem 0;
}

.form-user-content .list-block input[type="text"],
.form-user-content .list-block input[type="password"],
.form-user-content .list-block select {
  font-size: 0.875rem;
}
.form-user-content i {
  font-size: 1.5rem;
}

#divImageCamera {
  text-align: center;
}

#divImageCamera img {
  border: 1px solid #d8d8d8;
  background: white;
  border-radius: 50% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
}

.form-user-content button[data-action="open-camera"],
.form-user-content button[data-action="select-photo"] {
  margin-right: 0.125rem;
  height: 2.5rem;
  text-align: center;
  width: 15%;
}

/*
Lista de puntos del usuario
*/

@media screen and (max-width: 62rem) {
  #toolbarPoints {
    margin-bottom: 3.75rem;
  }
}

@media screen and (max-width: 37.5rem) {
  #toolbarPoints {
    margin-bottom: 2.5rem;
  }
}

@media screen and (max-width: 21.875rem) {
  #toolbarPoints {
    margin-bottom: 2.5rem;
  }
}

/*
 Lista de opciones del comercio
*/

.shop-options i {
  font-size: 1.5rem;
}
.shop-options .item-content {
  background: #04b4ae;
}

.shop-options ul {
  border-top: 0;
}

.shop-options li {
  margin-bottom: 0.1875rem;
  border-radius: 0.625rem;
}

.shop-notifications {
  position: absolute;
  right: 2.1875rem;
  bottom: 0.625rem;
}

i.estado_0 {
  color: #ff3b30;
}

i.estado_1 {
  color: #ff9500;
}

i.estado_2 {
  color: #ff9500;
}

i.estado_3 {
  color: #4cd964;
}

i.estado_4 {
  color: #000000;
}

i.estado_5 {
  color: #4cd964;
}

.list-block .item-text {
  height: 1.4375rem !important;
}

.list-block .item-title-extra {
  width: 6.25rem;
  margin-left: 5rem;
}

/*
    Formulario de configuracion del comercio
*/

@media screen and (max-width: 62rem) {
  #form-company .content-image-company,
  #form-config-assistant .content-image-company {
    margin: 0 !important;
    padding: 0 !important;
    /*margin-bottom:-10rem!important;*/
  }

  #form-company .content-image-company img.cover,
  #form-config-assistant .content-image-company img.cover {
    background: white;
    height: 25rem;
    width: 100%;
  }

  #form-company .content-image-company img.profile,
  #form-config-assistant .content-image-company img.profile {
    background: white;
    width: 9.375rem;
    height: auto;
    border-radius: 7.5rem;
    border: 1px solid #000;
    /*position: relative;
        left: 0.3125rem;
        top: -10rem;*/
    z-index: 1;
  }
  #form-suscription .content-block {
    margin: 2.1875rem 0;
  }
  #tab-config .item-title.label {
    width: 31.25rem;
  }
}

@media screen and (max-width: 37.5rem) {
  #form-company .content-image-company,
  #form-config-assistant .content-image-company {
    margin: 0 !important;
    padding: 0 !important;
    /*margin-bottom:-5.9375rem!important;*/
  }
  #form-company .content-image-company img.cover,
  #form-config-assistant .content-image-company img.cover {
    background: white;
    height: 13.75rem;
    width: 100%;
    margin-top: 0.1875rem;
  }

  #form-company .content-image-company img.profile,
  #form-config-assistant .content-image-company img.profile {
    background: white;
    width: 5rem;
    height: auto;
    border-radius: 3.125rem;
    border: 1px solid #000;
    /*position: relative;
        left: 0.1875rem;
        top: -5.75rem;*/
    z-index: 1;
  }
  #form-suscription .content-block {
    margin: 0.875rem 0;
  }
  #tab-config .item-title.label {
    width: 18.75rem;
  }
}

/* ----- Fixes for subscription form layout ----- */
/* Reduce vertical separation for all content blocks in subscription */
#form-suscription .content-block {
  margin: 0.5rem 0 !important;
}

/* Center modality label and select inline and add spacing */
#form-suscription .content-block[style*="display:flex"],
#form-suscription .content-block .select-inline {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#form-suscription select,
#form-suscription .select-inline select {
  margin-left: 0.5rem;
  min-width: 8.75rem;
  max-width: 60%;
}

/* Make the action button not touch screen edges */
.page .row .col-100 > .button {
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}
.page .row .col-100 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* ----- Avatars / Images in lists ----- */
.media-list .item-media img,
.list-block .item-media img {
  display: block;
  margin: 0 auto;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  object-fit: cover;
}

/* For profile image containers used in forms */
#divImageCamera img,
.content-image-company img.profile {
  display: block;
  margin: 0 auto;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  object-fit: cover;
}

/* If an image was previously given only width attribute, ensure it doesn't stretch vertically */
img[width]:not([height]) {
  height: auto;
}

/* ----- Marcajes (employee detail) spacing ----- */
.page .titulo {
  margin-bottom: 0.5rem;
}
.company-registry .item-title {
  margin-bottom: 0.25rem;
}
.company-registry .item-subtitle {
  margin-top: 0.125rem;
  color: #666;
}

/* ----- Buttons 'Guardar datos' padding so they don't touch edges on mobile ----- */

.boton-guardar-datos {
  /* position: fixed !important;
    bottom: 10px !important; */
  bottom: env(safe-area-inset-bottom);
}

.button {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 26.25rem) {
  .button {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
}

/*
    Listado de citas del comercio
*/

.booking-pending {
  border-left: 0.625rem solid orange;
  margin-bottom: 0.3125rem;
}

.booking-confirmed {
  border-left: 0.625rem solid #4cd964;
  margin-bottom: 0.3125rem;
}

.booking-finished {
  border-left: 0.625rem solid #a4a4a4;
  margin-bottom: 0.3125rem;
}

.booking-canceled {
  border-left: 0.625rem solid red;
  margin-bottom: 0.3125rem;
}

.form-registry-content .content-block {
  margin: 0.75rem;
  text-align: right;
}

@media screen and (max-width: 62rem) {
  .history-button {
    font-size: 4.375rem;
  }
  .form-registry-content img {
    position: absolute;
    top: 8%;
    left: 0.9375rem;
    border-radius: 50%;
  }
  .device-ios .form-registry-content img {
    position: absolute;
    top: 11%;
    left: 0.9375rem;
    border-radius: 50%;
  }
}

@media screen and (max-width: 37.5rem) {
  .history-button {
    font-size: 2.5rem;
  }
  .form-registry-content img {
    position: absolute;
    top: 8%;
    left: 0.9375rem;
    border-radius: 50%;
  }

  .device-ios .form-registry-content img {
    position: absolute;
    top: 11%;
    left: 0.9375rem;
    border-radius: 50%;
  }
}

/*
    Formulario de cita del comercio
*/

.img-thumbnail-service img {
  height: 3rem;
}

/*
   Lista de tareas/citas
*/

.task-list i.estado_R {
  color: #ff9500;
}

.task-list i.estado_P {
  color: #ff3b30;
}

#form-task textarea {
  border: 1px solid #c8c7cc;
  background-color: #fff;
  border-radius: 0.1875rem;
  font-size: 0.75rem;
  padding: 0.375rem 0.5rem;
}

#form-task select {
  font-size: 1rem;
  padding: 0.375rem 0.5rem;
}

@media screen and (max-width: 62rem) {
  #form-task.card-header {
    min-height: 4.0625rem;
    font-size: 1.375rem;
  }
  #form-task .list-block textarea {
    font-size: 1.0625rem;
  }
}

@media screen and (max-width: 37.5rem) {
  #form-task .card-header {
    min-height: 2.8125rem;
    font-size: 1rem;
  }
  #form-task .list-block textarea {
    font-size: 0.75rem;
  }
}

/*
    CRM
    Nueva Oportunidad de venta
*/

.oportunity_new .list-block textarea {
  border: 1px solid #c8c7cc;
  background-color: #fff;
  border-radius: 0.1875rem;
  font-size: 0.75rem;
  padding: 0.375rem 0.5rem;
}

@media screen and (max-width: 62rem) {
  .oportunity_new .list-block textarea {
    font-size: 1.0625rem;
  }
}

@media screen and (max-width: 37.5rem) {
  .oportunity_new .list-block textarea {
    font-size: 0.75rem;
  }
}

/* ========================================================================== */
/**
 * input-group (basado en bootstrap)
 */
.input-group {
  border-collapse: separate;
  display: table;
  position: relative;
}

.input-group-btn {
  font-size: 0;
  position: relative;
  white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
}
.input-group .form-control,
.input-group-addon,
.input-group-btn {
  display: table-cell;
}

.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {
  margin-right: -1px;
}

.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
  margin-left: -1px;
}

@media screen and (max-width: 62rem) {
  .input-group-btn > .btn {
    position: relative;
    height: 2.875rem;
    padding: 0.375rem 1.25rem;
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 37.5rem) {
  .input-group-btn > .btn {
    position: relative;
    height: 2.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }
}

.input-group .form-control {
  float: left;
  margin-bottom: 0;
  position: relative;
  /*width: 100%;*/
  z-index: 2;
}

.btn {
  -moz-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  /*border-radius: 0.25rem;*/
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  line-height: 1.42857;
  margin-bottom: 0;
  text-align: center;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
}

.btn-white {
  background: white none repeat scroll 0 0;
  border: 1px solid #ccc;
  color: inherit;
}

.input-group-addon {
  position: relative;
  background-color: #eee;
  color: #555;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 0 0.5rem;
  text-align: center;
}

/* ========================================================================== */
/**
 * MARGINS & PADDINGS
 */
.m-none {
  margin: 0 !important;
}

.m-xs {
  margin: 0.3125rem;
}

.m-sm {
  margin: 0.625rem;
}

.m-md {
  margin: 1.25rem;
}

.m-lg {
  margin: 1.875rem;
}

.m-xl {
  margin: 3.125rem;
}

.m-t-none {
  margin-top: 0;
}

.m-t-xxs {
  margin-top: 1px;
}

.m-t-xs {
  margin-top: 0.3125rem;
}

.m-t-sm {
  margin-top: 0.625rem;
}

.m-t {
  margin-top: 0.9375rem;
}

.m-t-md {
  margin-top: 1.25rem;
}

.m-t-lg {
  margin-top: 1.875rem;
}

.m-t-xl {
  margin-top: 2.5rem;
}

.m-b-none {
  margin-bottom: 0;
}
.m-b-xxs {
  margin-bottom: 1px;
}
.m-b-xs {
  margin-bottom: 0.3125rem;
}
.m-b-sm {
  margin-bottom: 0.625rem;
}
.m-b {
  margin-bottom: 0.9375rem;
}
.m-b-md {
  margin-bottom: 1.25rem;
}
.m-b-lg {
  margin-bottom: 1.875rem;
}
.m-b-xl {
  margin-bottom: 2.5rem;
}
.m-t-none {
  margin-right: 0;
}

.m-r-xxs {
  margin-right: 1px;
}

.m-r-xs {
  margin-right: 0.3125rem;
}

.m-r-sm {
  margin-right: 0.625rem;
}

.m-r {
  margin-right: 0.9375rem;
}

.m-r-md {
  margin-right: 1.25rem;
}

.m-r-lg {
  margin-right: 1.875rem;
}

.m-r-xl {
  margin-right: 2.5rem;
}

.p-none {
  padding: 0 !important;
}

.p-xs {
  padding: 0.625rem;
}

.p-sm {
  padding: 0.9375rem;
}

.p-m {
  padding: 1.25rem;
}

.p-md {
  padding: 1.5625rem;
}

.p-lg {
  padding: 1.875rem;
}

.p-xl {
  padding: 2.5rem;
}

.p-t-none {
  padding-top: 0;
}

.p-b-none {
  padding-bottom: 0;
}

.p-l-xs {
  padding-left: 0.625rem;
}

.p-l-sm {
  padding-left: 0.9375rem;
}

/* ========================================================================== */
/**
 * Labels
 */
span.label {
  border-radius: 0.1875rem;
  display: inline-block;
  font-size: 0.8em;
  font-weight: bold;
  padding: 0.1875rem 0.5rem;
  text-align: center;
  text-shadow: none;
  vertical-align: baseline;
  white-space: nowrap;
}

.label-warning {
  background-color: #f8ac59;
  color: #ffffff;
}

.label-danger {
  background-color: #ed5565;
  color: #ffffff;
}

.label-info {
  background-color: #23c6c8;
  color: #ffffff;
}

.label-plain {
  border: 1px solid #8e8e93;
  font-weight: normal !important;
}

/*
* Badges
*/

span.badge {
  line-height: 1.0625rem;
  padding: 0.1875rem 0.4375rem;
}

.badge-info-light {
  background-color: #e6e6e6;
  color: #000000;
}

/* ========================================================================== */
/**
 * Colores
 */
.txt-info {
  color: #23c6c8;
}

.txt-danger {
  color: #ed5565;
}

.txt-warning {
  color: #f8ac59;
}

.txt-plain {
  color: #8e8e93;
}

/* ========================================================================== */
/**
 * Checkbox
 */
label.label-checkbox
  input[type="checkbox"]:checked
  + .item-media
  i.icon-form-checkbox {
  background-color: #007aff;
}

label.label-checkbox
  input[type="checkbox"]:disabled
  + .item-media
  i.icon-form-checkbox {
  background-color: #ccc;
}

/* ========================================================================== */
/**
 * Formulario de códigos de barras
 */
#barcode-form .list-block {
  padding: 0;
}

#barcode-form .list-block .item-inner {
  width: auto;
}

#chk_verify {
  margin: 0.375rem;
  height: 1.25rem;
  width: 1.25rem;
}

/* ========================================================================== */
/**
 * Home: listado de aplicaciones disponibles
 */
.home-app {
  border: 1px solid #ccc;
  min-height: 3.125rem;
  border-radius: 0.4375rem;
  background: #002146;
  color: #fff;
  font-size: 1.0625rem;
  text-align: center;
  padding: 0.4375rem 0.75rem;
  line-height: 3rem;
  margin-bottom: 0.875rem;
}

@media screen and (max-width: 64rem) {
  .home-app {
    font-size: 1.125rem;
  }
  #MyClockDisplay {
    font-size: 3.75rem;
    font-family: courier;
    text-align: center;
  }
  #MyDateDisplay {
    font-size: 1.25rem;
    text-align: center;
  }
  #MyRegisterStart {
    font-size: 2.25rem;
    font-family: courier;
    margin-top: 5rem;
    text-align: center;
    color: red;
  }
  .map-register {
    text-align: center;
    height: 25rem;
    width: 95%;
    max-width: 68.75rem;
    margin: 0 auto;
    border-radius: 0 !important;
  }
}

@media screen and (max-width: 62rem) {
  .home-app {
    font-size: 1.125rem;
  }
  #MyClockDisplay {
    font-size: 3.75rem;
    font-family: courier;
    text-align: center;
  }
  #MyDateDisplay {
    font-size: 1.25rem;
    text-align: center;
  }
  #MyRegisterStart {
    font-size: 2.25rem;
    font-family: courier;
    margin-top: 5rem;
    text-align: center;
    color: red;
  }
  .map-register {
    text-align: center;
    height: 18.75rem;
    width: 95%;
    max-width: 56.25rem;
    margin: 0 auto;
    border-radius: 0 !important;
  }
}

@media screen and (max-width: 37.5rem) {
  .home-app {
    font-size: 1.0625rem;
  }
  #MyClockDisplay {
    font-size: 3rem;
    font-family: courier;
    text-align: center;
  }
  #MyDateDisplay {
    font-size: 1rem;
    text-align: center;
  }
  #MyRegisterStart {
    font-size: 1.75rem;
    font-family: courier;
    margin-top: 3.125rem;
    text-align: center;
    color: red;
  }
  .map-register {
    text-align: center;
    height: 12.5rem;
    width: 95%;
    max-width: 40rem;
    margin: 0 auto;
    border-radius: 0 !important;
  }
}

.home-app .icon {
  margin-top: 0.625rem;
  font-size: 2rem;
}

.home-app i {
  display: inline-block;
  line-height: 1;
}

.home-app .title {
  text-transform: uppercase;
  font-weight: bold;
}

/* ========================================================================== */
/**
 * Panel lateral
 */
.panel {
  background-color: #fefefe;
}

.panel .list-block .item-content {
  padding-left: 0;
}

.panel .list-block .item-title.label {
  width: 45%;
}
.linkPersonal {
  font-size: 1rem;
  font-weight: bold;
  text-decoration: underline;
}

/* ========================================================================== */
/**
 * Listado de inventarios
 */
.inventory .list-block .list-group-title {
  font-weight: bold;
  text-transform: uppercase;
  padding-bottom: 0.9375rem;
  padding-top: 0.9375rem;
}

/*
.inventory .list-block ul {
    border-top: none;
    border-bottom: none;
}*/

/*
.inventory li.h2 {
    background-color: white;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.375rem;
    padding: 1.25rem 0.9375rem 0;
}
*/
/*
.inventory .list-block .inventory-data .title {
    color: #000;
    font-weight: 300;
}*/

.inventory .list-block .inventory-data .description {
  color: #555;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory .floating-button {
  font-size: 1.125rem;
}

/* ========================================================================== */
/**
 * Inventario: Nuevo
 */
#form-inve .list-block input[type="text"],
.list-block input[type="date"],
.list-block input[type="datetime-local"],
.list-block select {
  font-size: 0.875rem;
}

#form-inve .list-block .item-inner {
  margin-left: 0.3125rem;
}

#form-inve .item-title.label {
  font-weight: bold;
  text-transform: uppercase;
}

#form-inve .item-media i {
  font-size: 1.5rem;
  min-width: 1.5rem;
}

/* ========================================================================== */
/**
 * Inventario: Formulario
 */
#form-inve .searchbar {
  background-color: #ddd;
  border-bottom: none;
}

#lineinve-list .item-content .item-title .title {
  display: block;
  font-weight: bold;
  line-height: 1.5rem;
}

#lineinve-list .item-content .item-title .subtitle {
  display: block;
  color: inherit;
}

#lineinve-list .item-content .item-title .subtitle2 {
  font-size: 0.75rem;
  display: block;
}

/* ========================================================================== */
/**
 * Inventario: Formulario de línea
 */
/*.lineinve-form input[type="number"], .lineinve-form input[type="text"] {
    display: inline-block;
    width: auto;
}
*/

.lineinve-form .list-block ul {
  border-top: 0;
  border-bottom: 0;
}

.barcode {
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  display: inline-block;
  max-width: 1.75rem;
  padding: 0.3125rem 0.25rem 0;
  vertical-align: middle;
}

.barcode img {
  width: 100%;
}

.article .card-header {
  justify-content: normal;
}

.lineinve-form .card-header.text-center {
  display: block;
}

.article input[type="text"] {
  border: 1px solid #ccc;
  border-radius: 0;
  font-size: 0.875rem;
  line-height: 1.4375rem;
  padding: 0.375rem 0.5rem;
  margin-right: 0.3125rem;
}

.article .item-title {
  white-space: normal;
  color: #6d6d72;
}
/*
.article-img {
    width: 4rem;
}*/

.article-img img {
  width: 50%;
}

.lineinve-form .touchspin input[type="text"] {
  border: none;
  font-size: 0.9375rem;
  font-weight: bold;
  line-height: 1.4375rem;
  margin: 0 0.3125rem;
  padding: 0.375rem 0.75rem;
  text-align: center;
  width: 90%;
}

.lineinve-form .input-group-btn {
  z-index: 3;
}

/* ========================================================================== */
/**
 * Search bar
 */

/*
* Popup small center screen
*/

.popup-small-center {
  width: 6.25rem;
  height: 6.25rem;
  background-color: red;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  margin: auto;
}

/* ========================================================================== */
/**
 * Listado de entradas
 */

.entry .floating-button {
  font-size: 1.125rem;
  bottom: 3.125rem;
}

#entry-list {
  font-size: 0.75rem;
}

#entry-list tbody td {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/*
*  Ventana de documentación
*/

.icon-doc-pdf {
  background: transparent url(../img/icons-extensions.png) repeat scroll -1px -1px;
  width: 2rem;
  height: 2.375rem;
}

/*
*  Ventana de cuestionario
*/

@media screen and (max-width: 62rem) {
  .tituloBienvenida {
    font-size: 1.5rem;
  }
  .imagenPregunta {
    max-width: 100%;
  }
  .tituloPregunta {
    font-size: 2rem;
  }

  .tituloRespuesta {
    font-size: 1.125rem;
    color: #6e6e6e;
  }
}

@media screen and (max-width: 37.5rem) {
  .tituloBienvenida {
    font-size: 1.25rem;
  }
  .imagenPregunta {
    max-width: 15.625rem;
  }
  .tituloPregunta {
    font-size: 1.5rem;
  }

  .tituloRespuesta {
    font-size: 0.875rem;
    color: #6e6e6e;
  }
}

.titleLogin,
.titleRegister {
  margin-top: 10% !important;
}

img:not(.map img):not(.map-register img):not(.gm-style img):not(.navbar img) {
  border-radius: 50% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
}

/* Para que las imágenes dentro de listas no se deformen */
.item-media img {
  width: 3.75rem !important;
  height: 3.75rem !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.imagenEmpleadoMarcaje {
  max-width: 5rem !important;
}

.nombreEmpleadoMarcaje .fechaEmpleadoMarcaje {
  padding: 0.4rem 0 !important;
}

.descripcionMarcaje {
  padding: 0.4rem !important;
}

.mensajeDia {
  padding: 0 0.4rem !important;
}

#employees-list img {
  width: 3.75rem !important;
  height: 3.75rem !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

#registry-list img {
  width: 3.75rem !important;
  height: 3.75rem !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Evitar que las páginas popup se situen tras el notch */
/* 🔹 Navbar: bajar para que no quede debajo del notch */
.device-android .popup .view-popup.navbar-fixed .navbar,
.device-android .popup .view-popup.navbar-through .navbar {
  top: env(safe-area-inset-top);
}

/* 🔹 Contenido: ajustar para que no se tape arriba ni abajo */
.device-android .popup .view-popup .page-content {
  padding-top: calc(env(safe-area-inset-top) + 44px); /* 44px altura navbar */
  padding-bottom: calc(
    env(safe-area-inset-bottom) + 50px
  ); /* 50px altura toolbar */
}

/* 🔹 Toolbar: subir sobre el home indicator / barra de gestos */
.device-android .popup .view-popup .toolbar {
  bottom: env(safe-area-inset-bottom);
}

/* 🔹 Por compatibilidad con Androids antiguos sin notch */
@supports not (padding: max(0px)) {
  .device-android .popup .view-popup .navbar {
    top: 0;
  }

  .device-android .popup .view-popup .page-content {
    padding-top: 44px;
    padding-bottom: 50px;
  }

  .device-android .popup .view-popup .toolbar {
    bottom: 0;
  }
}

/* Respetar el notch en IOS */

/* Navbar: respeta notch */
.device-ios .navbar-inner {
  padding-top: 1.5rem; /* espacio extra dentro del navbar */
}

.device-ios .navbar {
  height: calc(4.4rem);
  line-height: calc(4.4rem);
}

/* Contenido: baja un poco más respecto al navbar */
.device-ios .page-content,
.device-ios .popup .page-content {
  padding-top: calc(4.4rem) !important;
}

/* Toolbar: también baja un poco más del borde inferior */
.device-ios .toolbar,
.device-ios .tabbar {
  padding-bottom: 0rem !important; /* espacio extra visible sobre el borde */
}

/* Evitar franja de color en login por espacio reservado para notch */

/* Evita color de navbar fantasma en páginas sin barra superior */
.page.no-navbar::before {
  content: "";
  display: block;
  height: env(safe-area-inset-top);
  background-color: #fff; /* color del fondo real de tu login */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* Asegurar que el contenido no quede oculto tras el notch */
.page.no-navbar .page-content {
  padding-top: env(safe-area-inset-top);
}

/* .device-ios .toolbar {
  position: absolute;
  bottom: 0;
}*/

/* //// Estilo notificaciones push //// */
.notification {
  top: 0 !important;
  left: 0;
  right: 0;
  width: auto !important;
  border-radius: 0 0 8px 8px;
  background: #323232;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transform: translateY(-100%);
  animation: slideDown 0.4s ease-out forwards;
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.notification-title {
  font-weight: 600;
  color: #00bcd4;
  margin-bottom: 4px;
  font-size: 15px;
}
.notification-text {
  font-size: 14px;
  line-height: 1.3;
  color: #f1f1f1;
}
.notification-item {
  border: none;
  padding: 10px 15px;
}

/* //////////////// */

/* --- Fix general de formularios Framework7 --- */
.login-screen-content form,
.register-screen-content form {
  width: 100%;
  max-width: 400px; /* o el ancho que prefieras */
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 16px;
  overflow-x: hidden;
}

.login-screen-content form input,
.register-screen-content form input,
.login-screen-content form button,
.register-screen-content form button {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
}

/* Evitar que el botón empuje el ancho */
.login-screen-content form .button,
.register-screen-content form .button {
  display: block;
  width: 100%;
  max-width: 100%;
}

.pin-pad {
  margin-top: 3em;
}
/* ////////////TAMAÑOS TABLET HORIZONTAL //////////// */

@media screen and (min-width: 48rem) and (orientation: landscape) {
  /* Estilos para tablets en horizontal */
  .logo-navbar img {
    padding-top: 0.625rem;
    height: 2.5rem;
  }
  .titleLogin,
  .titleRegister {
    margin-top: 0 !important;
  }

  .btnJornada {
    margin-top: 2%;
  }

  .map-register {
    width: 80%;
    height: 50vh;
    max-height: 60vh;
    border-radius: 0 !important;

    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* ==== BLOQUE EXCLUSIVO DEL PIN ==== */
  .pin-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin: 10em auto;
    position: relative;
    padding-top: 0.5rem; /* deja espacio arriba */
    padding-bottom: 0.5rem; /* deja espacio abajo */
    overflow: visible !important; /* permite mostrar bordes enteros */
  }

  /* Indicadores del PIN */
  .pin-wrapper .pin-row {
    display: flex !important; /* fuerza su propio flexbox */
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
  }
  .pin-wrapper .pin-row-2,
  .pin-wrapper .pin-pad {
    overflow: visible !important;
  }

  /* Teclado numérico */
  .pin-wrapper .pin-pad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .pin-pad {
    margin-top: 0;
  }

  .pin-wrapper .pin-row-2 {
    display: flex !important; /* ignora el .row global */
    justify-content: center;
    gap: 2em;
    width: 100%;
  }

  .pin-wrapper .pin-button {
    flex: 0 0 auto;
  }

  /* Pequeña animación al pulsar */
  .pin-wrapper .pin-button button:active {
    transform: scale(0.95);
  }

  .pin-wrapper .pin-button button {
    font-size: 2.25rem;
    font-weight: bold;
    margin: 0 auto;
    width: 5rem;
    height: 5rem;
    border: 1px solid #1c1c1c;
    color: #1c1c1c;
    padding: 0.2em;
    box-sizing: border-box;
  }
  .pin-wrapper .pin-code {
    border-bottom: 0.125rem solid black;
    width: 5rem;
    height: 5rem;
    font-size: 4.5rem;
    font-weight: bold;
    text-align: center;
  }

  /* Fuerza que cada "celda" del teclado tenga el mismo tamaño */
  .pin-wrapper .pin-row-2 {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }

  /* Cada botón ocupa el mismo ancho aunque esté vacío */
  .pin-wrapper .pin-button {
    flex: 0 0 70px; /* mismo tamaño base que el botón */
    display: flex;
    justify-content: center;
  }
}


.button-notes {
  font-size: 16px;
  vertical-align: middle;
}