/* ═══════════════════════════════════════════════════════════
   VtaScan Mobile — Sistema de Diseño Unificado
   Canónico: mobile_mostrador / mobile_mostradorCamara
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   RESET GLOBAL — pegar AL INICIO de mobile_styles.css
   antes de cualquier otra regla
   ══════════════════════════════════════════════ */

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

html {
  height: 100%;
  overflow: hidden;          /* evita scroll en el html mismo */
}

body {
  height: 100%;
  overflow: hidden;
  background: #f2f2f7;
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; /* evita que iOS agrande texto automáticamente */
}

/* Contenedor principal de la app — inyectado por el router */
#app {
  position: fixed;           /* ocupa exactamente la pantalla visible */
  inset: 0;                  /* top/right/bottom/left = 0 */
  overflow-y: auto;          /* scroll solo dentro de #app */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#app::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════════
   VARIABLES Y SISTEMA DE DISEÑO
   ══════════════════════════════════════════════ */

:root {
  --m-font:      system-ui, -apple-system, sans-serif;

  /* Fondos */
  --m-bg:        #f2f2f7;
  --m-surface:   #ffffff;
  --m-border:    #e0e0e5;

  /* Texto */
  --m-text:      #1c1c1e;
  --m-text-2:    #3a3a3c;
  --m-muted:     #8e8e93;

  /* Colores de acción */
  --m-blue:      #007aff;
  --m-green:     #34c759;
  --m-red:       #ff3b30;
  --m-orange:    #ff9500;
  --m-dark:      #1c1c1e;
  --m-purple:    #8b5cf6;
  --m-amber:     #f0a30a;
  --m-teal:      #0891b2;

  /* Botón volver canónico */
  --m-back-bg:   #e6e8ec;

  /* Radios */
  --m-r-sm:      8px;
  --m-r-md:      14px;
  --m-r-lg:      16px;
  --m-r-pill:    20px;
  --m-r-card:    18px;

  /* Sombras */
  --m-sh-sm:     0 1px 4px rgba(0,0,0,.08);
  --m-sh-md:     0 4px 16px rgba(0,0,0,.12);

  /* Botones grandes */
  --m-btn-h:     8vh;
  --m-btn-fs:    1.6rem;
  --m-btn-fw:    700;
}


/* ══════════════════════════════════════════════
   LOGIN
   ══════════════════════════════════════════════ */
.mobile_login_container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  min-height: 100dvh;
  background: var(--m-bg);
  font-family: var(--m-font);
  box-sizing: border-box;
}

.mobile_login_screen {
  background: var(--m-bg);
  width: 100%;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.mobile_login_app_title {
  color: var(--m-text);
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  text-align: center;
  width: 100%;
}

.mobile_login_card {
  background: #35b98b;
  width: 100%;
  border-radius: var(--m-r-card);
  padding: 2.5rem 1.5rem;
  box-shadow: var(--m-sh-md);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.mobile_login_icon_container { margin-bottom: 0.25rem; }

.mobile_login_label {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

/* Candado CSS — sin cambios */
.mobile_login_lock {
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mobile_login_lock_shackle {
  width: 32px; height: 32px;
  border: 5px solid #333;
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  transform: translateY(5px);
}
.mobile_login_lock_body {
  background: #f6c153;
  width: 48px; height: 40px;
  border: 5px solid #333;
  border-radius: var(--m-r-sm);
  position: relative;
  display: flex;
  justify-content: center;
}
.mobile_login_lock_keyhole {
  position: absolute;
  top: 10px;
  width: 7px; height: 7px;
  background: #333;
  border-radius: 50%;
}
.mobile_login_lock_keyhole::after {
  content: '';
  position: absolute;
  top: 5px; left: 1.5px;
  width: 4px; height: 9px;
  background: #333;
}

.mobile_login_form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}

.mobile_login_input {
  background: var(--m-surface);
  border: none;
  border-radius: var(--m-r-md);
  padding: 0 1.25rem;
  height: 48px;
  font-size: 1rem;
  width: 100%;
  color: var(--m-text);
  box-sizing: border-box;
  outline: none;
  font-family: var(--m-font);
}
.mobile_login_input::placeholder { color: var(--m-muted); }

.mobile_login_password_wrapper {
  position: relative;
  width: 100%;
}
.mobile_login_password_input { padding-right: 3rem; }

.mobile_login_visibility_icon {
  position: absolute;
  top: 50%; right: 1.25rem;
  width: 20px; height: 20px;
  border: 2px solid var(--m-muted);
  border-radius: 70% 15%;
  transform: rotate(45deg) translateY(-8px);
}
.mobile_login_visibility_icon::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  background: var(--m-muted);
  border-radius: 50%;
  top: 7px; left: 7px;
}

.mobile_login_button {
  border: none;
  border-radius: var(--m-r-lg);
  font-weight: var(--m-btn-fw);
  font-size: var(--m-btn-fs);
  height: var(--m-btn-h);
  min-height: 52px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  width: 100%;
}
.mobile_login_button:active { opacity: .75; transform: scale(.98); }

.mobile_login_btn_submit { background: var(--m-blue); color: #fff; margin-top: 0.25rem; }
.mobile_login_btn_exit   { background: var(--m-red);  color: #fff; }


/* ══════════════════════════════════════════════
   SELECCIONAR LOCAL
   ══════════════════════════════════════════════ */
.mobile_selecLocal_container {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.mobile_selecLocal_screen {
  background: var(--m-bg);
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mobile_selecLocal_topbar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile_selecLocal_back_btn {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_selecLocal_back_btn:active { opacity: .7; }

.mobile_selecLocal_back_icon {
  display: inline-block;
  width: 8px; height: 8px;
  border-top: 2px solid #111;
  border-left: 2px solid #111;
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.mobile_selecLocal_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1rem 1rem;
}
.mobile_selecLocal_header_text { flex: 1; }

.mobile_selecLocal_title {
  color: var(--m-text);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.3rem 0;
}
.mobile_selecLocal_subtitle {
  color: var(--m-text-2);
  font-size: 1rem;
  margin: 0;
}

.mobile_selecLocal_avatar {
  width: 50px; height: 50px;
  background: var(--m-border);
  border-radius: 50%;
  border: 2px solid var(--m-surface);
  box-shadow: var(--m-sh-sm);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 1rem;
}
.mobile_selecLocal_avatar_inner {
  width: 30px; height: 35px;
  background: var(--m-muted);
  border-radius: 15px 15px 0 0;
}
.mobile_selecLocal_avatar_inner::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 20px;
  background: #cbd5e1;
  border-radius: 50%;
}

.mobile_selecLocal_main_area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 1rem 1rem;
}

.mobile_selecLocal_dropdown_btn {
  background: var(--m-blue);
  border: none;
  border-radius: var(--m-r-card);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--m-sh-md);
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s;
}
.mobile_selecLocal_dropdown_btn:active { opacity: .85; transform: scale(.98); }

.mobile_selecLocal_icon_wrapper {
  position: relative;
  width: 70px; height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ícono tienda CSS — sin cambios */
.mobile_selecLocal_store_css {
  width: 45px; height: 35px;
  background: #e0f2fe;
  border: 3px solid #334155;
  border-radius: 4px;
  position: relative;
  margin-right: 10px; margin-bottom: 5px;
}
.mobile_selecLocal_store_awning {
  position: absolute;
  top: -12px; left: -5px;
  width: 55px; height: 15px;
  background: repeating-linear-gradient(90deg,#ef4444,#ef4444 10px,#fff 10px,#fff 20px);
  border: 3px solid #334155;
  border-radius: 4px 4px 2px 2px;
}
.mobile_selecLocal_store_door {
  position: absolute;
  bottom: 0; left: 5px;
  width: 12px; height: 20px;
  background: #bae6fd;
  border: 2px solid #334155;
  border-bottom: none;
}
.mobile_selecLocal_pin_css {
  position: absolute;
  bottom: 0; right: 5px;
  width: 20px; height: 20px;
  background: #ef4444;
  border: 3px solid #334155;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 2px 2px 4px rgba(0,0,0,.2);
}
.mobile_selecLocal_pin_css::after {
  content: '';
  position: absolute;
  top: 5px; left: 5px;
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
}

.mobile_selecLocal_dropdown_text {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 0.5rem;
}
.mobile_selecLocal_dropdown_text span {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}

.mobile_selecLocal_chevron_down {
  width: 12px; height: 12px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
  margin-left: 1rem; margin-bottom: 5px;
  flex-shrink: 0;
}

.mobile_selecLocal_card {
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  margin-top: -12px;
  z-index: 1;
  padding: 6rem 1.5rem 2rem;
  box-shadow: var(--m-sh-sm);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex: 1;
}

.mobile_selecLocal_continue_btn {
  background: var(--m-blue);
  color: #fff;
  border: none;
  border-radius: var(--m-r-lg);
  width: 100%;
  height: var(--m-btn-h);
  min-height: 52px;
  font-size: var(--m-btn-fs);
  font-weight: var(--m-btn-fw);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  transition: opacity .15s, transform .1s;
}
.mobile_selecLocal_continue_btn:active { opacity: .75; transform: scale(.98); }

.mobile_selecLocal_chevron_right {
  display: inline-block;
  width: 12px; height: 12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}


/* ══════════════════════════════════════════════
   CAJERO VIEW — pantalla principal cajero
   ══════════════════════════════════════════════ */
.mobile_cajeroView_container {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.mobile_cajeroView_screen {
  background: var(--m-bg);
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  box-sizing: border-box;
}

.mobile_cajeroView_menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.mobile_cajeroView_card {
  border: none;
  border-radius: var(--m-r-card);
  width: 100%;
  flex: 1;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  box-shadow: var(--m-sh-sm);
  transition: opacity .15s, transform .1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 28vh;
}
.mobile_cajeroView_card:active { opacity: .85; transform: scale(.97); }

.mobile_cajeroView_card_orange { background: var(--m-orange); }
.mobile_cajeroView_card_red    { background: var(--m-red); }

.mobile_cajeroView_icon_area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  width: 100%;
}
.mobile_cajeroView_icon_placeholder {
  width: 90px; height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Íconos CSS — sin cambios */
.mobile_cajeroView_icon_register {
  width: 70px; height: 55px;
  background: #d1d5db;
  border: 3px solid #374151;
  border-radius: var(--m-r-sm);
  position: relative;
}
.mobile_cajeroView_icon_register::after {
  content: '';
  position: absolute;
  top: -18px; left: 12px;
  width: 24px; height: 18px;
  background: #f3f4f6;
  border: 3px solid #374151;
  border-bottom: none;
}
.mobile_cajeroView_icon_exit {
  width: 40px; height: 60px;
  background: #fca5a5;
  border: 3px solid #374151;
  border-radius: 4px;
  position: relative;
  transform: perspective(50px) rotateY(-20deg);
}
.mobile_cajeroView_icon_exit::after {
  content: '';
  position: absolute;
  right: -28px; top: 22px;
  width: 18px; height: 12px;
  background: #fcd34d;
  clip-path: polygon(0 20%,60% 20%,60% 0,100% 50%,60% 100%,60% 80%,0 80%);
}

.mobile_cajeroView_card_text {
  color: #fff;
  font-size: 1.6rem;
  font-weight: var(--m-btn-fw);
  text-align: center;
  width: 100%;
}


/* ══════════════════════════════════════════════
   ADMIN VIEW — pantalla principal admin/encargado
   ══════════════════════════════════════════════ */
.mobile_adminView_container {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.mobile_adminView_screen {
  background: var(--m-bg);
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  box-sizing: border-box;
}

.mobile_adminView_menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.mobile_adminView_card {
  border: none;
  border-radius: var(--m-r-card);
  width: 100%;
  flex: 1;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  box-shadow: var(--m-sh-sm);
  transition: opacity .15s, transform .1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 20vh;
}
.mobile_adminView_card:active { opacity: .85; transform: scale(.97); }

.mobile_adminView_card_orange { background: var(--m-orange); }
.mobile_adminView_card_blue   { background: var(--m-blue); }
.mobile_adminView_card_red    { background: var(--m-red); }

.mobile_adminView_icon_area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  width: 100%;
}
.mobile_adminView_icon_placeholder {
  width: 80px; height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Íconos CSS — sin cambios */
.mobile_adminView_icon_register {
  width: 60px; height: 50px;
  background: #d1d5db;
  border: 3px solid #374151;
  border-radius: var(--m-r-sm);
  position: relative;
}
.mobile_adminView_icon_register::after {
  content: '';
  position: absolute;
  top: -15px; left: 10px;
  width: 20px; height: 15px;
  background: #f3f4f6;
  border: 3px solid #374151;
  border-bottom: none;
}
.mobile_adminView_icon_panel {
  width: 65px; height: 45px;
  background: #f3f4f6;
  border: 3px solid #374151;
  border-radius: 6px;
  position: relative;
}
.mobile_adminView_icon_panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 12px;
  background: #9ca3af;
  border-bottom: 3px solid #374151;
}
.mobile_adminView_icon_exit {
  width: 35px; height: 55px;
  background: #fca5a5;
  border: 3px solid #374151;
  border-radius: 4px;
  position: relative;
  transform: perspective(50px) rotateY(-20deg);
}
.mobile_adminView_icon_exit::after {
  content: '';
  position: absolute;
  right: -25px; top: 20px;
  width: 15px; height: 10px;
  background: #fcd34d;
  clip-path: polygon(0 20%,60% 20%,60% 0,100% 50%,60% 100%,60% 80%,0 80%);
}

.mobile_adminView_card_text {
  color: #fff;
  font-size: 1.6rem;
  font-weight: var(--m-btn-fw);
  text-align: center;
  width: 100%;
}


/* ══════════════════════════════════════════════
   APERTURA CAJA
   ══════════════════════════════════════════════ */
.mobile_aperturaCaja_container {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.mobile_aperturaCaja_screen {
  background: var(--m-bg);
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mobile_aperturaCaja_topbar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile_aperturaCaja_back_btn {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_aperturaCaja_back_btn:active { opacity: .7; }

.mobile_aperturaCaja_back_icon {
  display: inline-block;
  width: 8px; height: 8px;
  border-top: 2px solid #111;
  border-left: 2px solid #111;
  transform: rotate(-45deg);
  flex-shrink: 0;
}

/* Ilustración caja registradora — sin cambios */
.mobile_aperturaCaja_illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 160px;
  margin: 1.5rem 0 1rem;
  position: relative;
}
.mobile_aperturaCaja_register_css { position: relative; width: 140px; height: 100px; }
.mobile_aperturaCaja_register_base {
  position: absolute;
  top: 30px; left: 20px;
  width: 100px; height: 50px;
  background: #94a3b8;
  border: 3px solid #334155;
  border-radius: 4px;
  transform: skewX(-20deg);
}
.mobile_aperturaCaja_register_top {
  position: absolute;
  top: 15px; left: 25px;
  width: 100px; height: 30px;
  background: #cbd5e1;
  border: 3px solid #334155;
  border-radius: 4px;
  transform: skewX(-20deg);
  z-index: 2;
}
.mobile_aperturaCaja_money_bills {
  position: absolute;
  bottom: 10px; left: 40px;
  width: 45px; height: 25px;
  background: #86efac;
  border: 3px solid #166534;
  border-radius: 2px;
  box-shadow: 0 -4px 0 #86efac, 0 -4px 0 3px #166534, 0 -8px 0 #86efac, 0 -8px 0 3px #166534;
}
.mobile_aperturaCaja_money_coins {
  position: absolute;
  bottom: 5px; left: 15px;
  width: 16px; height: 16px;
  background: #fcd34d;
  border: 2px solid #b45309;
  border-radius: 50%;
  box-shadow: 0 -4px 0 #fcd34d, 0 -4px 0 2px #b45309, 8px 4px 0 #fcd34d, 8px 4px 0 2px #b45309;
}
.mobile_aperturaCaja_register_drawer {
  position: absolute;
  top: 50px; left: -10px;
  width: 100px; height: 40px;
  background: #e2e8f0;
  border: 3px solid #334155;
  border-radius: 4px;
  transform: skewX(-20deg);
  z-index: 3;
  box-shadow: -5px 5px 0 rgba(0,0,0,.1);
  overflow: hidden;
}
.mobile_aperturaCaja_drawer_bills {
  position: absolute;
  top: 5px; left: 10px;
  width: 30px; height: 15px;
  background: #86efac;
  border: 2px solid #166534;
  border-radius: 2px;
  transform: rotate(-10deg);
}
.mobile_aperturaCaja_drawer_bills_2 {
  position: absolute;
  top: 8px; left: 45px;
  width: 30px; height: 15px;
  background: #86efac;
  border: 2px solid #166534;
  border-radius: 2px;
  transform: rotate(5deg);
}
.mobile_aperturaCaja_drawer_handle {
  position: absolute;
  top: 15px; left: 80px;
  width: 8px; height: 8px;
  background: #94a3b8;
  border: 2px solid #334155;
  border-radius: 50%;
}
.mobile_aperturaCaja_register_key {
  position: absolute;
  bottom: -15px; right: 0;
  width: 25px; height: 10px;
  background: #cbd5e1;
  border: 2px solid #334155;
  border-radius: 8px 3px 3px 8px;
  transform: rotate(35deg);
  z-index: 4;
}
.mobile_aperturaCaja_register_key::after {
  content: '';
  position: absolute;
  bottom: -6px; right: 4px;
  width: 4px; height: 6px;
  background: #cbd5e1;
  border: 2px solid #334155;
  border-top: none;
}

/* Card de input */
.mobile_aperturaCaja_input_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 1.5rem;
  box-shadow: var(--m-sh-sm);
  margin: 0 1rem 1rem;
}
.mobile_aperturaCaja_input_label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
  margin-bottom: 1rem;
  line-height: 1.3;
}
.mobile_aperturaCaja_input_wrapper {
  display: flex;
  align-items: center;
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-md);
  padding: 0.8rem 1rem;
  background: var(--m-surface);
}
.mobile_aperturaCaja_currency {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--m-muted);
  margin-right: 0.5rem;
}
.mobile_aperturaCaja_input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--m-text-2);
  outline: none;
  width: 100%;
  font-family: var(--m-font);
}
.mobile_aperturaCaja_input::placeholder { color: var(--m-muted); }

/* Botón submit */
.mobile_aperturaCaja_submit_btn {
  background: var(--m-green);
  border: none;
  border-radius: var(--m-r-lg);
  padding: 1.25rem;
  margin: 0 1rem 1.5rem;
  width: calc(100% - 2rem);
  height: var(--m-btn-h);
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(52,199,89,.3);
  transition: opacity .15s, transform .1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mobile_aperturaCaja_submit_btn:active { opacity: .8; transform: scale(.98); }

.mobile_aperturaCaja_btn_text {
  color: #fff;
  font-size: var(--m-btn-fs);
  font-weight: var(--m-btn-fw);
  font-family: var(--m-font);
}

/* Ícono compuesto del botón */
.mobile_aperturaCaja_btn_icon_wrapper {
  position: relative;
  width: 50px; height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile_aperturaCaja_icon_clock {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.2);
  border: 3px solid rgba(255,255,255,.6);
  border-radius: 50%;
  position: relative;
  z-index: 2;
}
.mobile_aperturaCaja_icon_clock_hands {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 10px;
  background: #fff;
  transform-origin: bottom center;
  transform: translate(-50%,-100%) rotate(45deg);
  border-radius: 2px;
}
.mobile_aperturaCaja_icon_clock_hands::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 3px; height: 14px;
  background: #fff;
  transform-origin: bottom center;
  transform: rotate(-75deg);
  border-radius: 2px;
}
.mobile_aperturaCaja_icon_arrow {
  position: absolute;
  top: 3px; left: 3px;
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,.5);
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-15deg);
  z-index: 1;
}
.mobile_aperturaCaja_icon_arrow::after {
  content: '';
  position: absolute;
  top: -2px; right: 2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid rgba(255,255,255,.5);
  transform: rotate(-45deg);
}
.mobile_aperturaCaja_icon_key {
  position: absolute;
  bottom: -2px; right: -5px;
  width: 22px; height: 12px;
  background: #fbbf24;
  border: 2px solid #b45309;
  border-radius: 8px 3px 3px 8px;
  transform: rotate(-25deg);
  z-index: 3;
}
.mobile_aperturaCaja_icon_key::after {
  content: '';
  position: absolute;
  right: 2px; bottom: -6px;
  width: 4px; height: 6px;
  background: #fbbf24;
  border: 2px solid #b45309;
  border-top: none;
}


/* ══════════════════════════════════════════════
   PANEL ADMIN VIEW
   ══════════════════════════════════════════════ */
.mobile_panelAdminView_container {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.mobile_panelAdminView_screen {
  background: var(--m-bg);
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mobile_panelAdminView_topbar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile_panelAdminView_back_btn {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_panelAdminView_back_btn:active { opacity: .7; }

.mobile_panelAdminView_back_icon {
  display: inline-block;
  width: 8px; height: 8px;
  border-top: 2px solid #111;
  border-left: 2px solid #111;
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.mobile_panelAdminView_menu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  padding: 1rem;
}

.mobile_panelAdminView_btn {
  border: none;
  border-radius: var(--m-r-lg);
  width: 100%;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-shadow: var(--m-sh-sm);
  transition: opacity .15s, transform .1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 68px;
  box-sizing: border-box;
  font-family: var(--m-font);
}
.mobile_panelAdminView_btn:active { opacity: .8; transform: scale(.98); }

/* Colores flat — sin gradiente */
.mobile_panelAdminView_btn_orange   { background: var(--m-orange); }
.mobile_panelAdminView_btn_lightblue{ background: var(--m-blue); }
.mobile_panelAdminView_btn_purple   { background: var(--m-purple); }
.mobile_panelAdminView_btn_green    { background: var(--m-green); }
.mobile_panelAdminView_btn_yellow   { background: var(--m-amber); }
.mobile_panelAdminView_btn_darkblue { background: var(--m-teal); }
.mobile_panelAdminView_btn_red      { background: var(--m-red); }

.mobile_panelAdminView_icon_wrapper {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 1rem;
}
.mobile_panelAdminView_icon {
  position: relative;
  width: 36px; height: 36px;
}

/* Íconos CSS — sin cambios */
.mobile_panelAdminView_icon_shop {
  background: #fca5a5;
  border: 2px solid #374151;
  border-radius: 4px;
  width: 36px; height: 28px;
  margin-top: 10px;
}
.mobile_panelAdminView_icon_shop::before {
  content: '';
  position: absolute;
  top: -12px; left: -2px;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 12px solid #ef4444;
}
.mobile_panelAdminView_icon_employees {
  width: 24px; height: 24px;
  background: #cbd5e1;
  border: 2px solid #374151;
  border-radius: 50%;
  margin: 0 auto;
}
.mobile_panelAdminView_icon_employees::after {
  content: '';
  position: absolute;
  top: 22px; left: 4px;
  width: 28px; height: 14px;
  background: #94a3b8;
  border: 2px solid #374151;
  border-radius: 10px 10px 0 0;
}
.mobile_panelAdminView_icon_categories {
  width: 36px; height: 26px;
  background: #d8b4fe;
  border: 2px solid #374151;
  border-radius: 4px;
  margin-top: 10px;
}
.mobile_panelAdminView_icon_categories::before {
  content: '';
  position: absolute;
  top: -6px; left: -2px;
  width: 14px; height: 6px;
  background: #c084fc;
  border: 2px solid #374151;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.mobile_panelAdminView_icon_inventory,
.mobile_panelAdminView_icon_stock {
  width: 32px; height: 28px;
  background: #fcd34d;
  border: 2px solid #374151;
  border-radius: 2px;
  margin-top: 8px;
}
.mobile_panelAdminView_icon_inventory::before,
.mobile_panelAdminView_icon_stock::before {
  content: '';
  position: absolute;
  top: 6px; left: 14px;
  width: 2px; height: 22px;
  background: #374151;
}
.mobile_panelAdminView_icon_ctacte {
  width: 28px; height: 34px;
  background: #e2e8f0;
  border: 2px solid #374151;
  border-radius: 3px;
  margin-left: 4px;
}
.mobile_panelAdminView_icon_ctacte::after {
  content: '';
  position: absolute;
  bottom: -4px; right: -8px;
  width: 16px; height: 16px;
  background: #fbbf24;
  border: 2px solid #374151;
  border-radius: 50%;
}
.mobile_panelAdminView_icon_history {
  width: 30px; height: 36px;
  background: #fef08a;
  border: 2px solid #374151;
  border-radius: 2px;
}
.mobile_panelAdminView_icon_history::before {
  content: '';
  position: absolute;
  top: 6px; left: 6px;
  width: 14px; height: 2px;
  background: #374151;
  box-shadow: 0 8px 0 #374151, 0 16px 0 #374151;
}

.mobile_panelAdminView_btn_text {
  color: #fff;
  font-size: 1.2rem;
  font-weight: var(--m-btn-fw);
  text-align: left;
  line-height: 1.2;
  flex: 1;
}


/* ══════════════════════════════════════════════
   AJUSTE DE STOCK
   ══════════════════════════════════════════════ */
.mobile_ajusteStock_container {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.mobile_ajusteStock_screen {
  background: var(--m-bg);
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile_ajusteStock_screen::-webkit-scrollbar { display: none; }

.mobile_ajusteStock_topbar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile_ajusteStock_back_btn {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_ajusteStock_back_btn:active { opacity: .7; }

.mobile_ajusteStock_back_icon {
  display: inline-block;
  width: 8px; height: 8px;
  border-top: 2px solid #111;
  border-left: 2px solid #111;
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.mobile_ajusteStock_header { padding: 1.25rem 1rem 0.5rem; }

.mobile_ajusteStock_title_wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.mobile_ajusteStock_title {
  color: var(--m-text);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

/* Ícono depósito CSS — sin cambios */
.mobile_ajusteStock_icon_warehouse {
  width: 36px; height: 30px;
  position: relative;
  flex-shrink: 0;
}
.mobile_ajusteStock_warehouse_roof {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 10px solid #374151;
}
.mobile_ajusteStock_warehouse_door {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 20px;
  background: #374151;
  border-radius: 2px 2px 0 0;
}

.mobile_ajusteStock_subtitle {
  color: var(--m-text);
  font-size: 1rem;
  font-weight: 700;
  margin: 0.5rem 0 0;
  padding: 0 1rem;
}

.mobile_ajusteStock_form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  padding: 1rem;
}
.mobile_ajusteStock_field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mobile_ajusteStock_label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--m-text);
}
.mobile_ajusteStock_input_wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.mobile_ajusteStock_input,
.mobile_ajusteStock_textarea,
.mobile_ajusteStock_select {
  width: 100%;
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-md);
  font-size: 1rem;
  color: var(--m-text);
  box-shadow: var(--m-sh-sm);
  box-sizing: border-box;
  outline: none;
  font-family: var(--m-font);
  transition: border-color .2s;
}
.mobile_ajusteStock_input:focus,
.mobile_ajusteStock_textarea:focus,
.mobile_ajusteStock_select:focus { border-color: var(--m-blue); }

.mobile_ajusteStock_input,
.mobile_ajusteStock_select { height: 48px; padding: 0 1rem; }

.mobile_ajusteStock_textarea {
  height: 90px;
  padding: 0.8rem 1rem;
  resize: none;
}
.mobile_ajusteStock_input::placeholder { color: var(--m-muted); }

/* Input con ícono izquierda */
.mobile_ajusteStock_input_with_left_icon { padding-left: 2.5rem; }
.mobile_ajusteStock_search_icon {
  position: absolute;
  left: 0.8rem;
  width: 14px; height: 14px;
  border: 2px solid var(--m-muted);
  border-radius: 50%;
  pointer-events: none;
}
.mobile_ajusteStock_search_icon::after {
  content: '';
  position: absolute;
  bottom: -4px; right: -4px;
  width: 6px; height: 2px;
  background: var(--m-muted);
  transform: rotate(45deg);
}

/* Select con wrapper destacado */
.mobile_ajusteStock_select_wrapper {
  background: #fdfaf4;
  border: 2px solid #d99a4a;
  border-radius: var(--m-r-md);
  overflow: hidden;
}
.mobile_ajusteStock_select {
  border: none;
  box-shadow: none;
  background: transparent;
  padding-left: 2.2rem;
  padding-right: 2rem;
  appearance: none;
  -webkit-appearance: none;
  font-weight: 500;
  color: var(--m-text);
  cursor: pointer;
}
.mobile_ajusteStock_box_icon {
  position: absolute;
  left: 0.8rem;
  width: 14px; height: 12px;
  background: #cda27a;
  border: 1.5px solid #8c6239;
  border-radius: 2px;
  pointer-events: none;
}
.mobile_ajusteStock_box_icon::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 4px;
  background: #8c6239;
}
.mobile_ajusteStock_chevron_down {
  position: absolute;
  right: 1rem;
  width: 8px; height: 8px;
  border-right: 2px solid #d99a4a;
  border-bottom: 2px solid #d99a4a;
  transform: rotate(45deg);
  pointer-events: none;
}

/* Campo URL */
.mobile_ajusteStock_field_url { margin-top: 0.25rem; }
.mobile_ajusteStock_input_with_right_icon { padding-right: 2.5rem; }
.mobile_ajusteStock_clipboard_icon {
  position: absolute;
  right: 1rem;
  width: 12px; height: 14px;
  border: 1.5px solid var(--m-muted);
  border-radius: 2px;
  pointer-events: none;
}
.mobile_ajusteStock_clipboard_icon::before {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 4px;
  background: var(--m-surface);
  border: 1.5px solid var(--m-muted);
  border-radius: 1px;
}

/* Botones de acción */
.mobile_ajusteStock_actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-bottom: 2rem;
}
.mobile_ajusteStock_btn {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: var(--m-r-lg);
  font-size: 1rem;
  font-weight: var(--m-btn-fw);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s;
  font-family: var(--m-font);
}
.mobile_ajusteStock_btn:active { opacity: .75; transform: scale(.98); }

.mobile_ajusteStock_btn_confirm { background: var(--m-blue); }
.mobile_ajusteStock_btn_cancel  { background: var(--m-dark); }

.mobile_ajusteStock_check_icon {
  display: inline-block;
  width: 6px; height: 12px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
  margin-bottom: 4px;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════
   MOSTRADOR — canónico, sin cambios
   ══════════════════════════════════════════════ */
.mobile_mostrador_root * { box-sizing: border-box; margin: 0; padding: 0; }
.mobile_mostrador_root {
  font-family: var(--m-font);
  background: #f2f2f7;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
}
.mobile_mostrador_topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e5;
  position: sticky;
  top: 0;
  z-index: 10;
}
.mobile_mostrador_back {
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  font-size: 17px;
  color: #007aff;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.mobile_mostrador_back:active { opacity: .5; }
.mobile_mostrador_back_icon { font-size: 24px; line-height: 1; }
.mobile_mostrador_topbar_title { font-size: 17px; font-weight: 600; color: #1c1c1e; }
.mobile_mostrador_content {
  flex: 1;
  padding: 16px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile_mostrador_balance_card {
  background: #007aff;
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 18px rgba(0,122,255,.35);
}
.mobile_mostrador_balance_label {
  font-size: 13px;
  opacity: .85;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.mobile_mostrador_balance_amount {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -1.5px;
}
.mobile_mostrador_search_card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  padding: 13px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.mobile_mostrador_search_input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 17px;
  background: transparent;
  color: #1c1c1e;
}
.mobile_mostrador_search_input::placeholder { color: #aeaeb2; }
.mobile_mostrador_qty_card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.mobile_mostrador_qty_label {
  font-size: 12px;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 10px;
}
.mobile_mostrador_qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f2f2f7;
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
}
.mobile_mostrador_qty_btn {
  width: 72px; height: 60px;
  border: none;
  background: transparent;
  font-size: 32px;
  color: #007aff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.mobile_mostrador_qty_btn:active { background: #dcdce0; }
.mobile_mostrador_qty_value {
  flex: 1;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #1c1c1e;
  user-select: none;
}
.mobile_mostrador_actions { display: flex; gap: 10px; }
.mobile_mostrador_action_btn {
  flex: 1;
  padding: 15px 10px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  -webkit-tap-highlight-color: transparent;
}
.mobile_mostrador_action_btn:active { opacity: .6; transform: scale(.97); }
.mobile_mostrador_action_btn_add { background: #34c759; color: #fff; flex: 3; height: 8vh; font-size: 1.6rem; }
.mobile_mostrador_summary_card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  color: #3a3a3c;
}
.mobile_mostrador_summary_total { font-weight: 700; color: #1c1c1e; }
.mobile_mostrador_footer {
  background: #fff;
  border-top: 1px solid #e0e0e5;
  padding: 14px 14px 28px;
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile_mostrador_footer_btn {
  border: none;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s;
  font-family: var(--m-font);
}
.mobile_mostrador_footer_btn:active { opacity: .7; transform: scale(.98); }
.mobile_mostrador_footer_btn_charge {
  background: #007aff; color: #fff;
  width: 100%; padding: 18px;
  height: 8vh; font-size: 1.6rem;
}
.mobile_mostrador_footer_row { display: flex; gap: 8px; }
.mobile_mostrador_footer_btn_exit  { background: #ff3b30; color: #fff; flex: 1; padding: 15px 8px; height: 8vh; font-size: 1.6rem; }
.mobile_mostrador_footer_btn_close { background: #ff9500; color: #fff; flex: 1; padding: 15px 8px; height: 8vh; font-size: 1.6rem; }


/* ══════════════════════════════════════════════
   MOSTRADOR CÁMARA — back button corregido a canónico gris
   ══════════════════════════════════════════════ */
.mobile_mostrador_modal_root * { box-sizing: border-box; margin: 0; padding: 0; }
.mobile_mostrador_modal_root {
  font-family: var(--m-font);
  background: #f2f2f7;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
}
.mobile_mostrador_modal_topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e5;
  flex-shrink: 0;
}
.mobile_mostrador_modal_back {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--m-back-bg);
  border: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  cursor: pointer;
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  border-radius: var(--m-r-pill);
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_mostrador_modal_back:active { opacity: .7; }
.mobile_mostrador_modal_back_icon { font-size: 20px; line-height: 1; color: #111; }

.mobile_mostrador_modal_total_wrap { text-align: right; }
.mobile_mostrador_modal_total_label {
  font-size: 11px;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.mobile_mostrador_modal_total_amount {
  font-size: 22px;
  font-weight: 700;
  color: #34c759;
  letter-spacing: -.5px;
}
.mobile_mostrador_modal_viewfinder {
  background: #111;
  margin: 14px 14px 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  height: 34vh;
}
.mobile_mostrador_modal_video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.mobile_mostrador_modal_placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.mobile_mostrador_modal_frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mobile_mostrador_modal_frame_box { width: 160px; height: 160px; position: relative; }
.mobile_mostrador_modal_frame_box::before,
.mobile_mostrador_modal_frame_box::after,
.mobile_mostrador_modal_frame_bl,
.mobile_mostrador_modal_frame_br {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  border-color: rgba(255,255,255,.8);
  border-style: solid;
}
.mobile_mostrador_modal_frame_box::before { top:0;    left:0;  border-width:3px 0 0 3px; border-radius:4px 0 0 0; }
.mobile_mostrador_modal_frame_box::after  { top:0;    right:0; border-width:3px 3px 0 0; border-radius:0 4px 0 0; }
.mobile_mostrador_modal_frame_bl          { bottom:0; left:0;  border-width:0 0 3px 3px; border-radius:0 0 0 4px; }
.mobile_mostrador_modal_frame_br          { bottom:0; right:0; border-width:0 3px 3px 0; border-radius:0 0 4px 0; }
.mobile_mostrador_modal_scan_line {
  position: absolute;
  left: 4px; right: 4px;
  height: 2px;
  background: #007aff;
  box-shadow: 0 0 8px rgba(0,122,255,.8);
  animation: mobile_mostrador_scan_anim 1.8s ease-in-out infinite;
}
@keyframes mobile_mostrador_scan_anim {
  0%   { top: 8px; }
  50%  { top: 148px; }
  100% { top: 8px; }
}
.mobile_mostrador_modal_controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 0;
}
.mobile_mostrador_modal_btn_laser {
  width: 100%; padding: 18px;
  border: none; border-radius: 16px;
  background: #007aff; color: #fff;
  font-size: 17px; font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center;
  justify-content: center; gap: 8px;
  font-family: var(--m-font);
}
.mobile_mostrador_modal_btn_laser:active { opacity: .75; transform: scale(.98); }
.mobile_mostrador_modal_btn_manual {
  width: 100%; padding: 16px;
  border: none; border-radius: 16px;
  background: #1c1c1e; color: #fff;
  font-size: 15px; font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center;
  justify-content: center; gap: 8px;
  font-family: var(--m-font);
}
.mobile_mostrador_modal_btn_manual:active { opacity: .75; transform: scale(.98); }
.mobile_mostrador_modal_qty_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.mobile_mostrador_modal_qty_label {
  font-size: 11px;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mobile_mostrador_modal_qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.mobile_mostrador_modal_qty_btn {
  width: 80px; height: 52px;
  border: none;
  font-size: 28px; font-weight: 300;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.mobile_mostrador_modal_qty_btn_minus { background: #ff3b30; color: #fff; border-radius: 14px 0 0 14px; }
.mobile_mostrador_modal_qty_btn_plus  { background: #34c759; color: #fff; border-radius: 0 14px 14px 0; }
.mobile_mostrador_modal_qty_btn:active { opacity: .65; }
.mobile_mostrador_modal_qty_value {
  flex: 1; text-align: center;
  font-size: 28px; font-weight: 700;
  color: #1c1c1e; user-select: none;
}
.mobile_mostrador_modal_footer { padding: 12px 14px 28px; flex-shrink: 0; }
.mobile_mostrador_modal_btn_charge {
  width: 100%; padding: 18px;
  border: none; border-radius: 16px;
  background: #007aff; color: #fff;
  font-size: 20px; font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_mostrador_modal_btn_charge:active { opacity: .75; transform: scale(.98); }


/* ══════════════════════════════════════════════
   CLASES COMPARTIDAS — formularios genéricos
   Topbar, card, fields, botones de acción
   ══════════════════════════════════════════════ */

/* Topbar canónico reutilizable — usado por todos los forms */
.mobile_cambiarPass_topbar,
.mobile_cierreCaja_topbar,
.mobile_cuentaCorriente_topbar,
.mobile_finalizarVenta_topbar,
.mobile_formEmpleado_topbar,
.mobile_formLocal_topbar,
.mobile_formProducto_topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Botón volver canónico — compartido por todos */
.mobile_cambiarPass_back,
.mobile_cierreCaja_back,
.mobile_cuentaCorriente_back,
.mobile_finalizarVenta_back,
.mobile_formEmpleado_back,
.mobile_formLocal_back,
.mobile_formProducto_back {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_cambiarPass_back:active,
.mobile_cierreCaja_back:active,
.mobile_cuentaCorriente_back:active,
.mobile_finalizarVenta_back:active,
.mobile_formEmpleado_back:active,
.mobile_formLocal_back:active,
.mobile_formProducto_back:active { opacity: .7; }

.mobile_cambiarPass_back_icon,
.mobile_cierreCaja_back_icon,
.mobile_cuentaCorriente_back_icon,
.mobile_finalizarVenta_back_icon,
.mobile_formEmpleado_back_icon,
.mobile_formLocal_back_icon,
.mobile_formProducto_back_icon {
  font-size: 20px;
  line-height: 1;
}

/* Root containers */
.mobile_cambiarPass_root,
.mobile_cierreCaja_root,
.mobile_cuentaCorriente_root,
.mobile_finalizarVenta_root,
.mobile_formEmpleado_root,
.mobile_formLocal_root,
.mobile_formProducto_root {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
}

/* Área de contenido scrolleable */
.mobile_cambiarPass_content,
.mobile_cierreCaja_content,
.mobile_cuentaCorriente_content,
.mobile_finalizarVenta_content,
.mobile_formEmpleado_content,
.mobile_formLocal_content,
.mobile_formProducto_content {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile_cambiarPass_content::-webkit-scrollbar,
.mobile_cierreCaja_content::-webkit-scrollbar,
.mobile_cuentaCorriente_content::-webkit-scrollbar,
.mobile_finalizarVenta_content::-webkit-scrollbar,
.mobile_formEmpleado_content::-webkit-scrollbar,
.mobile_formLocal_content::-webkit-scrollbar,
.mobile_formProducto_content::-webkit-scrollbar { display: none; }

/* Títulos de página */
.mobile_cambiarPass_title,
.mobile_cierreCaja_title,
.mobile_cuentaCorriente_title,
.mobile_formEmpleado_title,
.mobile_formLocal_title,
.mobile_formProducto_title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 0;
}

/* Subtítulos de bienvenida */
.mobile_cierreCaja_subtitle,
.mobile_cuentaCorriente_subtitle,
.mobile_formEmpleado_subtitle,
.mobile_formLocal_subtitle,
.mobile_formProducto_subtitle {
  font-size: 0.95rem;
  color: var(--m-muted);
  margin: 0;
}

/* Cards de formulario */
.mobile_cambiarPass_card,
.mobile_cuentaCorriente_card,
.mobile_formEmpleado_card,
.mobile_formLocal_card,
.mobile_formProducto_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 1.25rem;
  box-shadow: var(--m-sh-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Card title dentro del form */
.mobile_cuentaCorriente_card_title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 0 0 0.25rem;
}

/* Fields */
.mobile_cambiarPass_field,
.mobile_cuentaCorriente_field,
.mobile_formEmpleado_field,
.mobile_formLocal_field,
.mobile_formProducto_field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Labels */
.mobile_cambiarPass_label,
.mobile_cuentaCorriente_label,
.mobile_formEmpleado_label,
.mobile_formLocal_label,
.mobile_formProducto_label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--m-text);
}

/* Inputs */
.mobile_cambiarPass_input,
.mobile_cuentaCorriente_input,
.mobile_formEmpleado_input,
.mobile_formLocal_input,
.mobile_formProducto_input {
  height: 48px;
  padding: 0 1rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-md);
  font-size: 1rem;
  color: var(--m-text);
  outline: none;
  font-family: var(--m-font);
  box-sizing: border-box;
  width: 100%;
  transition: border-color .2s;
}
.mobile_cambiarPass_input:focus,
.mobile_cuentaCorriente_input:focus,
.mobile_formEmpleado_input:focus,
.mobile_formLocal_input:focus,
.mobile_formProducto_input:focus { border-color: var(--m-blue); }

.mobile_cambiarPass_input::placeholder,
.mobile_cuentaCorriente_input::placeholder,
.mobile_formEmpleado_input::placeholder,
.mobile_formLocal_input::placeholder,
.mobile_formProducto_input::placeholder { color: var(--m-muted); }

/* Selects */
.mobile_formEmpleado_select,
.mobile_formProducto_select {
  height: 48px;
  padding: 0 1rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-md);
  font-size: 1rem;
  color: var(--m-text);
  outline: none;
  font-family: var(--m-font);
  box-sizing: border-box;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .2s;
}
.mobile_formEmpleado_select:focus,
.mobile_formProducto_select:focus { border-color: var(--m-blue); }

/* Checkbox rows */
.mobile_formEmpleado_checkbox_row,
.mobile_formLocal_toggle_row,
.mobile_formProducto_checkbox_row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  padding: 0.25rem 0;
}
.mobile_formEmpleado_checkbox,
.mobile_formLocal_checkbox,
.mobile_formProducto_checkbox {
  width: 20px; height: 20px;
  accent-color: var(--m-blue);
  cursor: pointer;
  flex-shrink: 0;
}
.mobile_formEmpleado_checkbox_label,
.mobile_formLocal_toggle_label,
.mobile_formProducto_checkbox_label {
  font-size: 0.95rem;
  color: var(--m-text);
  font-weight: 500;
}

/* Botones de acción — compartidos */
.mobile_cambiarPass_actions,
.mobile_cuentaCorriente_actions,
.mobile_formEmpleado_actions,
.mobile_formLocal_actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.mobile_cambiarPass_btn,
.mobile_cuentaCorriente_btn,
.mobile_formEmpleado_btn,
.mobile_formLocal_btn {
  border: none;
  border-radius: var(--m-r-lg);
  height: 52px;
  font-size: 1rem;
  font-weight: var(--m-btn-fw);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s;
  font-family: var(--m-font);
  width: 100%;
}
.mobile_cambiarPass_btn:active,
.mobile_cuentaCorriente_btn:active,
.mobile_formEmpleado_btn:active,
.mobile_formLocal_btn:active { opacity: .75; transform: scale(.98); }

.mobile_cambiarPass_btn_confirm,
.mobile_cuentaCorriente_btn_save,
.mobile_formEmpleado_btn_save,
.mobile_formLocal_btn_save { background: var(--m-blue); }

.mobile_cambiarPass_btn_cancel,
.mobile_cuentaCorriente_btn_cancel,
.mobile_formEmpleado_btn_cancel,
.mobile_formLocal_btn_cancel { background: var(--m-dark); }

/* Toast */
.mobile_cambiarPass_toast,
.mobile_cierreCaja_toast {
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  min-height: 20px;
  color: var(--m-red);
}


/* ══════════════════════════════════════════════
   CIERRE DE CAJA — específico
   ══════════════════════════════════════════════ */
.mobile_cierreCaja_title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 0;
}
.mobile_cierreCaja_subtitle {
  font-size: 0.95rem;
  color: var(--m-muted);
  margin: 0;
}
.mobile_cierreCaja_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 1.25rem;
  box-shadow: var(--m-sh-sm);
}
.mobile_cierreCaja_card_label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 0 0 0.75rem;
}
.mobile_cierreCaja_input_wrapper {
  display: flex;
  align-items: center;
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-md);
  padding: 0.8rem 1rem;
  background: var(--m-bg);
  gap: 0.5rem;
}
.mobile_cierreCaja_currency {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--m-muted);
}
.mobile_cierreCaja_input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--m-text);
  outline: none;
  font-family: var(--m-font);
  width: 100%;
}
.mobile_cierreCaja_input::placeholder { color: var(--m-muted); }
.mobile_cierreCaja_btn_action {
  border: none;
  border-radius: var(--m-r-lg);
  background: var(--m-red);
  color: #fff;
  font-size: var(--m-btn-fs);
  font-weight: var(--m-btn-fw);
  height: var(--m-btn-h);
  min-height: 60px;
  width: 100%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s;
  font-family: var(--m-font);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile_cierreCaja_btn_action:active { opacity: .75; transform: scale(.98); }


/* ══════════════════════════════════════════════
   FINALIZAR VENTA — específico
   ══════════════════════════════════════════════ */
.mobile_finalizarVenta_total_card {
  background: var(--m-blue);
  border-radius: var(--m-r-card);
  padding: 20px;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 18px rgba(0,122,255,.35);
}
.mobile_finalizarVenta_total_label {
  font-size: 13px;
  opacity: .85;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.mobile_finalizarVenta_total_value {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -1.5px;
  margin: 0;
}
.mobile_finalizarVenta_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 1.25rem;
  box-shadow: var(--m-sh-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mobile_finalizarVenta_payment_row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--m-border);
  padding-bottom: 0.75rem;
}
.mobile_finalizarVenta_payment_row:last-of-type { border-bottom: none; }
.mobile_finalizarVenta_payment_label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--m-text);
  min-width: 120px;
  flex-shrink: 0;
}
.mobile_finalizarVenta_payment_input {
  flex: 1;
  height: 44px;
  padding: 0 0.75rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-md);
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-text);
  outline: none;
  font-family: var(--m-font);
  text-align: right;
  transition: border-color .2s;
  box-sizing: border-box;
}
.mobile_finalizarVenta_payment_input:focus { border-color: var(--m-blue); }
.mobile_finalizarVenta_status_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.25rem;
}
.mobile_finalizarVenta_status_label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--m-muted);
}
.mobile_finalizarVenta_status_value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-red);
}
.mobile_finalizarVenta_footer {
  background: var(--m-surface);
  border-top: 1px solid var(--m-border);
  padding: 14px 14px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.mobile_finalizarVenta_btn {
  border: none;
  border-radius: var(--m-r-lg);
  font-size: var(--m-btn-fs);
  font-weight: var(--m-btn-fw);
  color: #fff;
  height: var(--m-btn-h);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s;
  font-family: var(--m-font);
  width: 100%;
}
.mobile_finalizarVenta_btn:active { opacity: .75; transform: scale(.98); }
.mobile_finalizarVenta_btn_confirm { background: var(--m-green); }
.mobile_finalizarVenta_btn_cancel  { background: var(--m-dark); font-size: 1rem; height: 48px; min-height: 48px; }


/* ══════════════════════════════════════════════
   FORMULARIO PRODUCTO — específico
   ══════════════════════════════════════════════ */
.mobile_formProducto_row {
  display: flex;
  gap: 0.75rem;
}
.mobile_formProducto_field_half { flex: 1; min-width: 0; }

.mobile_formProducto_section_title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--m-muted);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin: 0.25rem 0 0;
}
.mobile_formProducto_help_text {
  font-size: 0.8rem;
  color: var(--m-muted);
  margin: 0;
}
.mobile_formProducto_footer {
  background: var(--m-surface);
  border-top: 1px solid var(--m-border);
  padding: 14px 14px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.mobile_formProducto_btn {
  border: none;
  border-radius: var(--m-r-lg);
  font-size: var(--m-btn-fs);
  font-weight: var(--m-btn-fw);
  color: #fff;
  height: var(--m-btn-h);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s;
  font-family: var(--m-font);
  width: 100%;
}
.mobile_formProducto_btn:active { opacity: .75; transform: scale(.98); }
.mobile_formProducto_btn_save   { background: var(--m-blue); }
.mobile_formProducto_btn_cancel { background: var(--m-dark); font-size: 1rem; height: 48px; min-height: 48px; }

/* Botón topbar — "Nuevo X" en la derecha del header */
.mobile_cuentaCorriente_btn_nuevo,
.mobile_formEmpleado_btn_nuevo {
  background: var(--m-blue);
  color: #fff;
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  transition: opacity .15s;
}
.mobile_cuentaCorriente_btn_nuevo:active,
.mobile_formEmpleado_btn_nuevo:active { opacity: .75; }


/* ══════════════════════════════════════════════
   CTA CTE VIEW — lista de cuentas corrientes
   ══════════════════════════════════════════════ */
.mobile_ctaCteView_root {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
}

.mobile_ctaCteView_topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile_ctaCteView_back {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_ctaCteView_back:active { opacity: .7; }

.mobile_ctaCteView_back_icon { font-size: 20px; line-height: 1; }

.mobile_ctaCteView_btn_nuevo {
  background: var(--m-blue);
  color: #fff;
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  transition: opacity .15s;
}
.mobile_ctaCteView_btn_nuevo:active { opacity: .75; }

.mobile_ctaCteView_content {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile_ctaCteView_content::-webkit-scrollbar { display: none; }

.mobile_ctaCteView_title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 0;
}

.mobile_ctaCteView_search_card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 13px 16px;
  box-shadow: var(--m-sh-sm);
}
.mobile_ctaCteView_search_icon { font-size: 16px; flex-shrink: 0; }
.mobile_ctaCteView_search_input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 17px;
  background: transparent;
  color: var(--m-text);
  font-family: var(--m-font);
}
.mobile_ctaCteView_search_input::placeholder { color: var(--m-muted); }

/* Lista */
.mobile_ctaCteView_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Item individual — generado por JS */
.mobile_ctaCteView_item {
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 14px 16px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile_ctaCteView_item_info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.mobile_ctaCteView_item_nombre {
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile_ctaCteView_item_deuda {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--m-red);
}

.mobile_ctaCteView_item_actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.mobile_ctaCteView_item_btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--m-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s;
}
.mobile_ctaCteView_item_btn:active { opacity: .7; transform: scale(.93); }

.mobile_ctaCteView_item_btn_historial {
  background: var(--m-bg);
  color: var(--m-blue);
}
.mobile_ctaCteView_item_btn_editar {
  background: var(--m-bg);
  color: var(--m-orange);
}

/* Estado vacío */
.mobile_ctaCteView_empty {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  margin: 2rem 0 0;
  display: none; /* el JS lo muestra cuando la lista está vacía */
}


/* ══════════════════════════════════════════════
   LOCALES VIEW — lista de locales
   ══════════════════════════════════════════════ */
.mobile_localesView_root {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
}

.mobile_localesView_topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile_localesView_back {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_localesView_back:active { opacity: .7; }
.mobile_localesView_back_icon { font-size: 20px; line-height: 1; }

.mobile_localesView_btn_nuevo {
  background: var(--m-blue);
  color: #fff;
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  transition: opacity .15s;
}
.mobile_localesView_btn_nuevo:active { opacity: .75; }

.mobile_localesView_content {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile_localesView_content::-webkit-scrollbar { display: none; }

.mobile_localesView_title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 0;
}

.mobile_localesView_search_card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 13px 16px;
  box-shadow: var(--m-sh-sm);
}
.mobile_localesView_search_icon { font-size: 16px; flex-shrink: 0; }
.mobile_localesView_search_input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 17px;
  background: transparent;
  color: var(--m-text);
  font-family: var(--m-font);
}
.mobile_localesView_search_input::placeholder { color: var(--m-muted); }

.mobile_localesView_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile_localesView_item {
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 14px 16px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile_localesView_item_info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.mobile_localesView_item_nombre {
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile_localesView_item_direccion {
  font-size: 0.85rem;
  color: var(--m-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile_localesView_item_actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.mobile_localesView_item_btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--m-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s;
  background: var(--m-bg);
}
.mobile_localesView_item_btn:active { opacity: .7; transform: scale(.93); }

.mobile_localesView_item_btn_ver    { color: var(--m-blue); }
.mobile_localesView_item_btn_editar { color: var(--m-orange); }

.mobile_localesView_empty {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  margin: 2rem 0 0;
}


/* ══════════════════════════════════════════════
   EMPLEADOS VIEW — idéntica a localesView
   ══════════════════════════════════════════════ */
.mobile_empleadosView_root {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
}
.mobile_empleadosView_topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.mobile_empleadosView_back {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_empleadosView_back:active { opacity: .7; }
.mobile_empleadosView_back_icon { font-size: 20px; line-height: 1; }
.mobile_empleadosView_btn_nuevo {
  background: var(--m-blue);
  color: #fff;
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  transition: opacity .15s;
}
.mobile_empleadosView_btn_nuevo:active { opacity: .75; }
.mobile_empleadosView_content {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile_empleadosView_content::-webkit-scrollbar { display: none; }
.mobile_empleadosView_title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 0;
}
.mobile_empleadosView_search_card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 13px 16px;
  box-shadow: var(--m-sh-sm);
}
.mobile_empleadosView_search_icon { font-size: 16px; flex-shrink: 0; }
.mobile_empleadosView_search_input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 17px;
  background: transparent;
  color: var(--m-text);
  font-family: var(--m-font);
}
.mobile_empleadosView_search_input::placeholder { color: var(--m-muted); }
.mobile_empleadosView_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile_empleadosView_item {
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 14px 16px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mobile_empleadosView_item_info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.mobile_empleadosView_item_nombre {
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile_empleadosView_item_rol {
  font-size: 0.85rem;
  color: var(--m-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile_empleadosView_item_actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.mobile_empleadosView_item_btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--m-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s;
  background: var(--m-bg);
}
.mobile_empleadosView_item_btn:active { opacity: .7; transform: scale(.93); }
.mobile_empleadosView_item_btn_ver    { color: var(--m-blue); }
.mobile_empleadosView_item_btn_editar { color: var(--m-orange); }
.mobile_empleadosView_empty {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  margin: 2rem 0 0;
}

/* ══════════════════════════════════════════════
   ENCARGADO VIEW — color teal para el panel
   (reutiliza las clases mobile_adminView_* para
   la estructura; solo se agrega el modificador
   de color que diferencia el botón de panel)
   ══════════════════════════════════════════════ */
.mobile_adminView_card_teal { background: var(--m-teal); }

/* ══════════════════════════════════════════════
   REPOSITOR VIEW — color ámbar y su ícono stock
   (reutiliza clases mobile_cajeroView_* para la
   estructura; agrega el modificador de color y el
   ícono de caja/stock que no existe en cajeroView)
   ══════════════════════════════════════════════ */

/* Modificador de color ámbar — usado por repositor */
.mobile_cajeroView_card_amber { background: var(--m-amber); }

/* Ícono CSS caja de stock */
.mobile_cajeroView_icon_stock {
  width: 60px;
  height: 50px;
  background: #fcd34d;
  border: 3px solid #374151;
  border-radius: 4px;
  position: relative;
}
.mobile_cajeroView_icon_stock::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 14px;
  background: #fbbf24;
  border: 3px solid #374151;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.mobile_cajeroView_icon_stock::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 28px;
  background: #374151;
  box-shadow: -8px 0 0 #374151, 8px 0 0 #374151;
}

/* ══════════════════════════════════════════════
   HISTORIAL DE CIERRES
   ══════════════════════════════════════════════ */
.mobile_historialCierres_root {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
}

/* Topbar */
.mobile_historialCierres_topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile_historialCierres_back {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_historialCierres_back:active { opacity: .7; }
.mobile_historialCierres_back_icon   { font-size: 20px; line-height: 1; }

.mobile_historialCierres_topbar_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
}

/* Área de contenido scrolleable */
.mobile_historialCierres_content {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile_historialCierres_content::-webkit-scrollbar { display: none; }

/* Grilla de resumen 2x2 */
.mobile_historialCierres_resumen_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mobile_historialCierres_stat_card {
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 14px 12px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.mobile_historialCierres_stat_label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--m-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.mobile_historialCierres_stat_value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--m-text);
  line-height: 1.1;
}

/* Card de filtros */
.mobile_historialCierres_filtros_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 14px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile_historialCierres_filtros_title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--m-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 2px;
}

.mobile_historialCierres_filtros_row {
  display: flex;
  gap: 8px;
}

.mobile_historialCierres_filtro_input,
.mobile_historialCierres_filtro_select {
  flex: 1;
  height: 42px;
  padding: 0 0.75rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-md);
  font-size: 0.9rem;
  color: var(--m-text);
  outline: none;
  font-family: var(--m-font);
  box-sizing: border-box;
  transition: border-color .2s;
  min-width: 0;
}
.mobile_historialCierres_filtro_input:focus,
.mobile_historialCierres_filtro_select:focus { border-color: var(--m-blue); }
.mobile_historialCierres_filtro_input::placeholder { color: var(--m-muted); }

.mobile_historialCierres_filtro_btn_limpiar {
  height: 42px;
  padding: 0 1rem;
  background: var(--m-dark);
  color: #fff;
  border: none;
  border-radius: var(--m-r-md);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s;
}
.mobile_historialCierres_filtro_btn_limpiar:active { opacity: .75; }

/* Lista de cierres */
.mobile_historialCierres_lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile_historialCierres_loading {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 1.5rem 0;
  margin: 0;
}

/* Card individual de cierre — generado por JS */
.mobile_historialCierres_item {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 14px 16px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile_historialCierres_item_header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.mobile_historialCierres_item_empleado {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
}

.mobile_historialCierres_item_fecha {
  font-size: 0.8rem;
  color: var(--m-muted);
  margin-top: 2px;
}

.mobile_historialCierres_item_local {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--m-muted);
  background: var(--m-bg);
  border-radius: var(--m-r-sm);
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Fila de datos numéricos */
.mobile_historialCierres_item_datos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.mobile_historialCierres_item_dato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--m-bg);
  border-radius: var(--m-r-sm);
  padding: 8px 4px;
}

.mobile_historialCierres_item_dato_label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--m-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  text-align: center;
}

.mobile_historialCierres_item_dato_valor {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--m-text);
}

/* Badge de diferencia */
.mobile_historialCierres_item_badge {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--m-r-pill);
  font-size: 0.85rem;
  font-weight: 700;
}
.mobile_historialCierres_badge_ok       { background: #dcfce7; color: #16a34a; }
.mobile_historialCierres_badge_positivo { background: #dbeafe; color: #2563eb; }
.mobile_historialCierres_badge_negativo { background: #fee2e2; color: #dc2626; }

/* Estado vacío */
.mobile_historialCierres_empty {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 2rem 0;
}

/* ══════════════════════════════════════════════
   CATEGORÍAS
   ══════════════════════════════════════════════ */
.mobile_categorias_root {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
}

/* Topbar */
.mobile_categorias_topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile_categorias_back {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_categorias_back:active { opacity: .7; }
.mobile_categorias_back_icon   { font-size: 20px; line-height: 1; }

.mobile_categorias_topbar_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
}

/* Contenido scrolleable */
.mobile_categorias_content {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile_categorias_content::-webkit-scrollbar { display: none; }

/* Card del formulario */
.mobile_categorias_form_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 16px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile_categorias_form_title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--m-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0;
}

.mobile_categorias_form_row {
  display: flex;
  gap: 8px;
}

.mobile_categorias_input {
  flex: 1;
  height: 46px;
  padding: 0 1rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-md);
  font-size: 1rem;
  color: var(--m-text);
  outline: none;
  font-family: var(--m-font);
  box-sizing: border-box;
  transition: border-color .2s;
  min-width: 0;
}
.mobile_categorias_input:focus { border-color: var(--m-blue); }
.mobile_categorias_input::placeholder { color: var(--m-muted); }

.mobile_categorias_btn_crear {
  height: 46px;
  padding: 0 1.1rem;
  background: var(--m-blue);
  color: #fff;
  border: none;
  border-radius: var(--m-r-md);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s, transform .1s;
}
.mobile_categorias_btn_crear:active { opacity: .75; transform: scale(.97); }

.mobile_categorias_error {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--m-red);
  padding: 4px 2px;
}

/* Encabezado de la lista */
.mobile_categorias_lista_label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--m-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 2px;
}

/* Contenedor de la lista */
.mobile_categorias_lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile_categorias_loading {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 1.5rem 0;
  margin: 0;
}

/* Item individual — generado por JS */
.mobile_categorias_item {
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 14px 16px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile_categorias_item_nombre {
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile_categorias_item_btn_eliminar {
  height: 38px;
  padding: 0 0.9rem;
  background: #fee2e2;
  color: var(--m-red);
  border: none;
  border-radius: var(--m-r-sm);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  flex-shrink: 0;
  transition: opacity .15s, transform .1s;
}
.mobile_categorias_item_btn_eliminar:active { opacity: .75; transform: scale(.95); }

/* Estado vacío */
.mobile_categorias_empty {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 2rem 0;
  margin: 0;
}

/* ══════════════════════════════════════════════
   MOSTRADOR — elementos adicionales (Paso 9)
   ══════════════════════════════════════════════ */

/* Resultados de búsqueda */
.mobile_mostrador_resultados {
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  box-shadow: var(--m-sh-md);
  overflow: hidden;
  max-height: 55vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  z-index: 50;
}
.mobile_mostrador_resultados::-webkit-scrollbar { display: none; }

.mobile_mostrador_resultados_seccion {
  padding: 6px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  background: var(--m-bg);
  color: var(--m-muted);
}

.mobile_mostrador_resultado_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--m-border);
  cursor: pointer;
  gap: 10px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mobile_mostrador_resultado_item:active    { background: var(--m-bg); }
.mobile_mostrador_resultado_cc             { background: #fff7ed; }
.mobile_mostrador_resultado_cc:active      { background: #fed7aa; }

.mobile_mostrador_resultado_info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mobile_mostrador_resultado_nombre {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile_mostrador_resultado_sub {
  font-size: 0.8rem;
  color: var(--m-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mobile_mostrador_resultado_precio {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-green);
  flex-shrink: 0;
}

/* Badges en resultados */
.mobile_mostrador_resultado_badge_granel {
  background: #fef3c7;
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.mobile_mostrador_resultado_badge_deudor {
  background: #fee2e2;
  color: var(--m-red);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.mobile_mostrador_resultado_badge_ok {
  background: #dcfce7;
  color: #16a34a;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Carrito mobile */
.mobile_mostrador_carrito {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 1rem;
}

.mobile_mostrador_carrito_empty {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.9rem;
  padding: 1.5rem 0;
  margin: 0;
}

.mobile_mostrador_carrito_item {
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 12px 14px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile_mostrador_carrito_item_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mobile_mostrador_carrito_item_nombre {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--m-text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile_mostrador_carrito_item_sub {
  font-size: 0.8rem;
  color: var(--m-muted);
}

.mobile_mostrador_carrito_item_eliminar {
  width: 32px;
  height: 32px;
  border: none;
  background: #fee2e2;
  color: var(--m-red);
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s;
}
.mobile_mostrador_carrito_item_eliminar:active { opacity: .7; }

.mobile_mostrador_carrito_item_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile_mostrador_carrito_item_qty {
  display: flex;
  align-items: center;
  background: var(--m-bg);
  border-radius: var(--m-r-md);
  overflow: hidden;
  flex: 1;
  max-width: 160px;
}

.mobile_mostrador_carrito_item_subtotal {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-blue);
  flex-shrink: 0;
}

/* Modal granel — overlay */
.mobile_mostrador_granel_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.mobile_mostrador_granel_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 1.5rem;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--m-sh-md);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile_mostrador_granel_titulo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 0;
  text-align: center;
}

.mobile_mostrador_granel_precio {
  font-size: 0.9rem;
  color: var(--m-muted);
  text-align: center;
  margin: 0;
}

.mobile_mostrador_granel_input {
  width: 100%;
  height: 56px;
  border: 2px solid var(--m-border);
  border-radius: var(--m-r-md);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--m-text);
  outline: none;
  box-sizing: border-box;
  font-family: var(--m-font);
  background: var(--m-bg);
  transition: border-color .2s;
}
.mobile_mostrador_granel_input:focus { border-color: var(--m-blue); }

.mobile_mostrador_granel_btns {
  display: flex;
  gap: 10px;
}

.mobile_mostrador_granel_btn {
  flex: 1;
  height: 50px;
  border: none;
  border-radius: var(--m-r-lg);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  transition: opacity .15s, transform .1s;
}
.mobile_mostrador_granel_btn:active          { opacity: .75; transform: scale(.97); }
.mobile_mostrador_granel_btn_cancel          { background: var(--m-dark); }
.mobile_mostrador_granel_btn_confirm         { background: var(--m-green); }

/* Overlay cobro de deuda desde mostrador */
.mobile_mostrador_deuda_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.mobile_mostrador_deuda_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card) var(--m-r-card) 0 0;
  padding: 1.5rem 1.25rem 2rem;
  width: 100%;
  max-width: 430px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile_mostrador_deuda_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile_mostrador_deuda_titulo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--m-text);
}

.mobile_mostrador_deuda_cerrar {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--m-bg);
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--m-muted);
  touch-action: manipulation;
}
.mobile_mostrador_deuda_cerrar:active { opacity: .7; }

.mobile_mostrador_deuda_cliente {
  background: #fff7ed;
  border-radius: var(--m-r-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile_mostrador_deuda_nombre {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
}
.mobile_mostrador_deuda_saldo {
  font-size: 1.3rem;
  font-weight: 700;
}

.mobile_mostrador_deuda_form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile_mostrador_deuda_input,
.mobile_mostrador_deuda_select {
  width: 100%;
  height: 52px;
  padding: 0 1rem;
  border: 2px solid #fed7aa;
  border-radius: var(--m-r-md);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--m-text);
  background: var(--m-surface);
  outline: none;
  box-sizing: border-box;
  font-family: var(--m-font);
  transition: border-color .2s;
}
.mobile_mostrador_deuda_input:focus,
.mobile_mostrador_deuda_select:focus { border-color: var(--m-orange); }
.mobile_mostrador_deuda_input { text-align: center; }

.mobile_mostrador_deuda_error {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--m-red);
  padding: 2px 0;
}

.mobile_mostrador_deuda_ok {
  text-align: center;
  color: var(--m-green);
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}

.mobile_mostrador_deuda_btns {
  display: flex;
  gap: 10px;
}

.mobile_mostrador_deuda_btn {
  flex: 1;
  height: 52px;
  border: none;
  border-radius: var(--m-r-lg);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  transition: opacity .15s, transform .1s;
}
.mobile_mostrador_deuda_btn:active          { opacity: .75; transform: scale(.97); }
.mobile_mostrador_deuda_btn_cancel          { background: var(--m-dark); }
.mobile_mostrador_deuda_btn_confirm         { background: var(--m-orange); flex: 2; }

/* ══════════════════════════════════════════════
   PANTALLA COBRAR — campos adicionales
   ══════════════════════════════════════════════ */

.mobile_finalizarVenta_cc_resultados {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-md);
  margin-top: 4px;
  overflow: hidden;
  max-height: 180px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile_finalizarVenta_cc_item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--m-border);
  font-size: 0.9rem;
  color: var(--m-text);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mobile_finalizarVenta_cc_item:active { background: var(--m-bg); }

.mobile_finalizarVenta_cc_item_empty {
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--m-muted);
  text-align: center;
}

.mobile_finalizarVenta_cc_seleccionado {
  margin-top: 6px;
  padding: 8px 12px;
  background: #dcfce7;
  color: #16a34a;
  border-radius: var(--m-r-md);
  font-size: 0.88rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════
   INVENTARIO — lista de productos
   ══════════════════════════════════════════════ */
.mobile_inventario_root {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
}

.mobile_inventario_topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile_inventario_back {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
}
.mobile_inventario_back:active { opacity: .7; }
.mobile_inventario_back_icon   { font-size: 20px; line-height: 1; }

.mobile_inventario_topbar_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
}

.mobile_inventario_btn_nuevo {
  height: 36px;
  padding: 0 0.9rem;
  background: var(--m-green);
  color: #fff;
  border: none;
  border-radius: var(--m-r-pill);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  transition: opacity .15s;
}
.mobile_inventario_btn_nuevo:active { opacity: .75; }

.mobile_inventario_content {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile_inventario_content::-webkit-scrollbar { display: none; }

/* Búsqueda */
.mobile_inventario_search_card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 0 12px;
  box-shadow: var(--m-sh-sm);
  height: 46px;
}

.mobile_inventario_search_input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  color: var(--m-text);
  outline: none;
  font-family: var(--m-font);
  height: 100%;
}
.mobile_inventario_search_input::placeholder { color: var(--m-muted); }

/* Lista */
.mobile_inventario_lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile_inventario_loading {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 1.5rem 0;
  margin: 0;
}

.mobile_inventario_empty {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 2rem 0;
  margin: 0;
}

/* Card de producto */
.mobile_inventario_item {
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 12px 14px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile_inventario_item_info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mobile_inventario_item_nombre {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile_inventario_item_sub {
  font-size: 0.78rem;
  color: var(--m-muted);
}

.mobile_inventario_item_precios {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.mobile_inventario_item_precio {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-green);
}

.mobile_inventario_item_stock {
  font-size: 0.82rem;
  font-weight: 600;
}
.mobile_inventario_stock_ok    { color: var(--m-text); }
.mobile_inventario_stock_bajo  { color: #d97706; }
.mobile_inventario_stock_cero  { color: var(--m-red); }
.mobile_inventario_stock_sinasignar { color: var(--m-muted); }

.mobile_inventario_item_btn_edit {
  width: 36px;
  height: 36px;
  border: none;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: var(--m-r-sm);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s;
}
.mobile_inventario_item_btn_edit:active { opacity: .7; }

/* Corrección topbar del form producto — agrega título */
.mobile_formProducto_topbar_title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--m-text);
}

/* Error en form producto */
.mobile_formProducto_error {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--m-red);
  padding: 6px 2px;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════
   AJUSTE STOCK — elementos nuevos (Paso 11)
   Los estilos base de .mobile_ajusteStock_* ya
   existen en el CSS. Solo se agregan los faltantes.
   ══════════════════════════════════════════════ */

/* Resultados de búsqueda de producto */
.mobile_ajusteStock_resultados {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-md);
  margin-top: 4px;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--m-sh-sm);
  scrollbar-width: none;
}
.mobile_ajusteStock_resultados::-webkit-scrollbar { display: none; }

.mobile_ajusteStock_resultado_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--m-border);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  gap: 10px;
}
.mobile_ajusteStock_resultado_item:active { background: #fef3c7; }

.mobile_ajusteStock_resultado_nombre {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--m-text);
}
.mobile_ajusteStock_resultado_stock {
  font-size: 0.85rem;
  color: var(--m-muted);
  flex-shrink: 0;
}

/* Info del producto seleccionado */
.mobile_ajusteStock_producto_info {
  margin: 0 16px 4px;
  background: #fef3c7;
  border-radius: var(--m-r-md);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.mobile_ajusteStock_prod_nombre {
  font-size: 0.95rem;
  font-weight: 700;
  color: #92400e;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile_ajusteStock_prod_stock {
  font-size: 0.85rem;
  font-weight: 600;
  color: #92400e;
  flex-shrink: 0;
}

/* Mensaje de error */
.mobile_ajusteStock_error {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--m-red);
  padding: 4px 2px;
}

/* ══════════════════════════════════════════════
   CUENTAS CORRIENTES — lista (Paso 12)
   Complementa las clases mobile_ctaCteView_*
   y mobile_cuentaCorriente_* ya existentes.
   ══════════════════════════════════════════════ */

/* Topbar title en lista */
.mobile_ctaCteView_topbar_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
}

/* Lista de clientes */
.mobile_ctaCteView_lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile_ctaCteView_loading {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 1.5rem 0;
  margin: 0;
}

.mobile_ctaCteView_empty {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 2rem 0;
  margin: 0;
}

/* Card de cliente — generado por JS */
.mobile_ctaCteView_item {
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 14px 16px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s;
}
.mobile_ctaCteView_item:active { opacity: .85; }

.mobile_ctaCteView_item_info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mobile_ctaCteView_item_nombre {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile_ctaCteView_item_sub {
  font-size: 0.8rem;
  color: var(--m-muted);
}

.mobile_ctaCteView_item_saldo {
  font-size: 1.05rem;
  font-weight: 700;
  flex-shrink: 0;
}

.mobile_ctaCteView_item_btn_cobrar {
  height: 36px;
  padding: 0 0.8rem;
  background: var(--m-orange);
  color: #fff;
  border: none;
  border-radius: var(--m-r-sm);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  flex-shrink: 0;
  transition: opacity .15s;
}
.mobile_ctaCteView_item_btn_cobrar:active { opacity: .75; }

/* Error en form nuevo cliente */
.mobile_cuentaCorriente_error {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--m-red);
  padding: 4px 2px;
}

/* ══════════════════════════════════════════════
   DETALLE DE CUENTA CORRIENTE
   ══════════════════════════════════════════════ */
.mobile_detalleCC_root {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
}

.mobile_detalleCC_topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.mobile_detalleCC_back {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--m-font);
}
.mobile_detalleCC_back:active   { opacity: .7; }
.mobile_detalleCC_back_icon     { font-size: 20px; line-height: 1; }
.mobile_detalleCC_topbar_title  { font-size: 1rem; font-weight: 700; color: var(--m-text); }

.mobile_detalleCC_btn_editar {
  height: 34px;
  padding: 0 0.9rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--m-text);
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--m-font);
}
.mobile_detalleCC_btn_editar:active { opacity: .7; }

.mobile_detalleCC_content {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile_detalleCC_content::-webkit-scrollbar { display: none; }

.mobile_detalleCC_loading {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 1rem 0;
  margin: 0;
}

/* Info card */
.mobile_detalleCC_info_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 16px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile_detalleCC_info_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mobile_detalleCC_info_field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mobile_detalleCC_info_label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--m-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mobile_detalleCC_info_value {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--m-text);
}
.mobile_detalleCC_codigo {
  font-family: monospace;
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--m-bg);
  padding: 8px 12px;
  border-radius: var(--m-r-sm);
  letter-spacing: 2px;
  grid-column: 1 / -1;
}
.mobile_detalleCC_saldo_banner {
  grid-column: 1 / -1;
  border-radius: var(--m-r-md);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile_detalleCC_saldo_label { font-weight: 700; font-size: 0.9rem; }
.mobile_detalleCC_saldo_valor { font-size: 1.6rem; font-weight: 700; }

/* Botón cobrar */
.mobile_detalleCC_btn_cobrar {
  width: 100%;
  height: 52px;
  background: var(--m-orange);
  color: #fff;
  border: none;
  border-radius: var(--m-r-lg);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--m-font);
  transition: opacity .15s, transform .1s;
}
.mobile_detalleCC_btn_cobrar:active { opacity: .75; transform: scale(.98); }

/* Form cobro inline */
.mobile_detalleCC_cobro_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 16px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile_detalleCC_cobro_title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--m-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0;
}
.mobile_detalleCC_cobro_input,
.mobile_detalleCC_cobro_select {
  width: 100%;
  height: 50px;
  padding: 0 1rem;
  border: 2px solid #fed7aa;
  border-radius: var(--m-r-md);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--m-text);
  background: var(--m-surface);
  outline: none;
  box-sizing: border-box;
  font-family: var(--m-font);
  transition: border-color .2s;
}
.mobile_detalleCC_cobro_input:focus,
.mobile_detalleCC_cobro_select:focus { border-color: var(--m-orange); }
.mobile_detalleCC_cobro_input { text-align: center; }
.mobile_detalleCC_cobro_error {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--m-red);
}
.mobile_detalleCC_cobro_btns {
  display: flex;
  gap: 10px;
}
.mobile_detalleCC_cobro_btn {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: var(--m-r-lg);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--m-font);
  transition: opacity .15s;
}
.mobile_detalleCC_cobro_btn:active          { opacity: .75; }
.mobile_detalleCC_cobro_btn_cancel          { background: var(--m-dark); }
.mobile_detalleCC_cobro_btn_confirm         { background: var(--m-orange); flex: 2; }

/* Movimientos */
.mobile_detalleCC_movimientos_titulo {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--m-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 2px;
}
.mobile_detalleCC_movimientos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 1rem;
}
.mobile_detalleCC_mov_item {
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 12px 14px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.mobile_detalleCC_mov_info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mobile_detalleCC_mov_tipo { font-size: 0.9rem; font-weight: 700; color: var(--m-text); }
.mobile_detalleCC_mov_fecha { font-size: 0.78rem; color: var(--m-muted); }
.mobile_detalleCC_mov_monto { font-size: 1rem; font-weight: 700; flex-shrink: 0; }
.mobile_detalleCC_mov_empty {
  text-align: center; color: var(--m-muted);
  font-size: 0.9rem; padding: 1.5rem 0; margin: 0;
}

/* ══════════════════════════════════════════════
   EMPLEADOS — lista (Paso 13)
   Complementa clases mobile_empleadosView_* ya existentes
   ══════════════════════════════════════════════ */

.mobile_empleadosView_topbar_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
}

.mobile_empleadosView_toggle_row {
  display: flex;
  justify-content: flex-end;
}

.mobile_empleadosView_toggle_btn {
  height: 34px;
  padding: 0 1rem;
  background: var(--m-dark);
  color: #fff;
  border: none;
  border-radius: var(--m-r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--m-font);
  transition: opacity .15s;
}
.mobile_empleadosView_toggle_btn:active { opacity: .75; }

.mobile_empleadosView_lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile_empleadosView_loading {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 1.5rem 0;
  margin: 0;
}

.mobile_empleadosView_empty {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 2rem 0;
  margin: 0;
}

/* Card de empleado */
.mobile_empleadosView_item {
  background: var(--m-surface);
  border-radius: var(--m-r-md);
  padding: 12px 14px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mobile_empleadosView_item_inactivo { opacity: .65; }

.mobile_empleadosView_item_info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mobile_empleadosView_item_nombre {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile_empleadosView_item_sub {
  font-size: 0.78rem;
  color: var(--m-muted);
}

.mobile_empleadosView_rol_badge {
  padding: 3px 10px;
  border-radius: var(--m-r-pill);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.mobile_empleadosView_item_btn_edit,
.mobile_empleadosView_item_btn_baja,
.mobile_empleadosView_item_btn_reactivar {
  height: 34px;
  padding: 0 0.7rem;
  border: none;
  border-radius: var(--m-r-sm);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--m-font);
  flex-shrink: 0;
  transition: opacity .15s;
}
.mobile_empleadosView_item_btn_edit:active,
.mobile_empleadosView_item_btn_baja:active,
.mobile_empleadosView_item_btn_reactivar:active { opacity: .75; }
.mobile_empleadosView_item_btn_edit      { background: #ede9fe; color: #6d28d9; }
.mobile_empleadosView_item_btn_baja      { background: #fee2e2; color: var(--m-red); }
.mobile_empleadosView_item_btn_reactivar { background: #dcfce7; color: #16a34a; }

/* Form empleado — complementos */
.mobile_formEmpleado_topbar_title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--m-text);
}
.mobile_formEmpleado_error {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--m-red);
  padding: 4px 2px;
}

/* ══════════════════════════════════════════════
   DETALLE / EDICIÓN DE EMPLEADO
   ══════════════════════════════════════════════ */
.mobile_detalleEmp_root {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
}

.mobile_detalleEmp_topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.mobile_detalleEmp_back {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--m-font);
}
.mobile_detalleEmp_back:active { opacity: .7; }
.mobile_detalleEmp_back_icon   { font-size: 20px; line-height: 1; }
.mobile_detalleEmp_topbar_title { font-size: 1rem; font-weight: 700; color: var(--m-text); }

.mobile_detalleEmp_content {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2rem;
}
.mobile_detalleEmp_content::-webkit-scrollbar { display: none; }

.mobile_detalleEmp_loading {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 1rem 0;
  margin: 0;
}

/* Info card */
.mobile_detalleEmp_info_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 16px;
  box-shadow: var(--m-sh-sm);
}
.mobile_detalleEmp_info_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.mobile_detalleEmp_username {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--m-text);
}
.mobile_detalleEmp_email {
  font-size: 0.85rem;
  color: var(--m-muted);
  margin-top: 2px;
}
.mobile_detalleEmp_info_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--m-bg);
  border-radius: var(--m-r-sm);
  padding: 10px 12px;
  margin-top: 8px;
}
.mobile_detalleEmp_info_row_label { font-size: 0.85rem; font-weight: 600; color: var(--m-muted); }
.mobile_detalleEmp_info_row_value { font-size: 0.9rem;  font-weight: 700; color: var(--m-text); }
.mobile_detalleEmp_warning {
  background: #fef3c7;
  border-radius: var(--m-r-sm);
  padding: 10px 12px;
  color: #92400e;
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 8px;
}

/* Edición */
.mobile_detalleEmp_edit_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 16px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile_detalleEmp_section_title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--m-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0;
}
.mobile_detalleEmp_field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile_detalleEmp_label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--m-muted);
}
.mobile_detalleEmp_username_display {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 0;
  padding: 8px 0;
}
.mobile_detalleEmp_input,
.mobile_detalleEmp_select {
  height: 46px;
  padding: 0 1rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-md);
  font-size: 0.95rem;
  color: var(--m-text);
  outline: none;
  font-family: var(--m-font);
  box-sizing: border-box;
  width: 100%;
  transition: border-color .2s;
}
.mobile_detalleEmp_input:focus,
.mobile_detalleEmp_select:focus { border-color: var(--m-blue); }
.mobile_detalleEmp_error {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--m-red);
}
.mobile_detalleEmp_btn_guardar {
  width: 100%;
  height: 48px;
  background: var(--m-blue);
  color: #fff;
  border: none;
  border-radius: var(--m-r-lg);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--m-font);
  transition: opacity .15s;
}
.mobile_detalleEmp_btn_guardar:active { opacity: .75; }

/* Baja / Reactivar */
.mobile_detalleEmp_btn_baja {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--m-r-lg);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--m-font);
  color: #fff;
  background: var(--m-red);
  transition: opacity .15s;
}
.mobile_detalleEmp_btn_baja:active { opacity: .75; }

/* ══════════════════════════════════════════════
   LOCALES — lista y form (Paso 14)
   Complementa clases mobile_localesView_* y
   mobile_formLocal_* ya existentes en el CSS.
   ══════════════════════════════════════════════ */

.mobile_localesView_topbar_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
}

.mobile_localesView_lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile_localesView_loading {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 1.5rem 0;
  margin: 0;
}

.mobile_localesView_empty {
  text-align: center;
  color: var(--m-muted);
  font-size: 0.95rem;
  padding: 2rem 0;
  margin: 0;
}

/* Card de local */
.mobile_localesView_item {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 16px;
  box-shadow: var(--m-sh-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile_localesView_item_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.mobile_localesView_item_nombre {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--m-text);
}

.mobile_localesView_item_badge {
  padding: 3px 10px;
  border-radius: var(--m-r-pill);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.mobile_localesView_badge_activo   { background: #dcfce7; color: #16a34a; }
.mobile_localesView_badge_inactivo { background: #fee2e2; color: var(--m-red); }

.mobile_localesView_item_direccion {
  font-size: 0.85rem;
  color: var(--m-muted);
}

.mobile_localesView_item_id {
  font-size: 0.72rem;
  color: var(--m-muted);
  font-family: monospace;
}

/* Aviso de límite de plan */
.mobile_localesView_plan_aviso {
  background: #fef3c7;
  border-radius: var(--m-r-md);
  padding: 12px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #92400e;
  text-align: center;
}

/* Form local — complementos */
.mobile_formLocal_topbar_title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--m-text);
}

.mobile_formLocal_error {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--m-red);
  padding: 4px 2px;
}

/* ══════════════════════════════════════════════
   SELECCIONAR LOCAL — rediseño funcional
   Las clases mobile_selecLocal_* anteriores eran
   decorativas. Se reemplazan por este bloque.
   ══════════════════════════════════════════════ */
.mobile_selecLocal_root {
  font-family: var(--m-font);
  background: var(--m-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
}

.mobile_selecLocal_topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border);
}

.mobile_selecLocal_back_btn {
  background: var(--m-back-bg);
  border: none;
  border-radius: var(--m-r-pill);
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--m-font);
}
.mobile_selecLocal_back_btn:active { opacity: .7; }
.mobile_selecLocal_back_icon       { font-size: 20px; line-height: 1; }

.mobile_selecLocal_topbar_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
}

/* Contenido */
.mobile_selecLocal_content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.mobile_selecLocal_card {
  background: var(--m-surface);
  border-radius: var(--m-r-card);
  padding: 28px 20px;
  box-shadow: var(--m-sh-md);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.mobile_selecLocal_icon_wrapper {
  width: 72px;
  height: 72px;
  background: var(--m-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile_selecLocal_store_icon {
  font-size: 2.4rem;
  line-height: 1;
}

.mobile_selecLocal_subtitle {
  font-size: 0.92rem;
  color: var(--m-muted);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* Select nativo */
.mobile_selecLocal_select {
  width: 100%;
  height: 52px;
  padding: 0 1rem;
  background: var(--m-bg);
  border: 2px solid var(--m-border);
  border-radius: var(--m-r-md);
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-text);
  outline: none;
  font-family: var(--m-font);
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color .2s;
  appearance: auto;
}
.mobile_selecLocal_select:focus { border-color: var(--m-blue); }

.mobile_selecLocal_error {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--m-red);
  text-align: center;
  width: 100%;
}

/* Footer con botón continuar */
.mobile_selecLocal_footer {
  padding: 16px;
  background: var(--m-surface);
  border-top: 1px solid var(--m-border);
}

.mobile_selecLocal_continue_btn {
  width: 100%;
  height: 56px;
  background: var(--m-blue);
  color: #fff;
  border: none;
  border-radius: var(--m-r-lg);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--m-font);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .15s, transform .1s;
}
.mobile_selecLocal_continue_btn:active { opacity: .8; transform: scale(.98); }

.mobile_selecLocal_chevron_right {
  font-size: 1.3rem;
  line-height: 1;
}

/* ══════════════════════════════════════════════
   LOGIN — botón ojo ver/ocultar contraseña
   ══════════════════════════════════════════════ */
.mobile_login_eye_btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--m-muted);
  font-size: 1rem;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile_login_eye_btn:active { opacity: .6; }

/* El wrapper ya tiene position:relative en el CSS existente,
   pero por si acaso lo reforzamos: */
.mobile_login_password_wrapper { position: relative; }