:root {
  --pape-amarillo: #ffd43b;
  --pape-amarillo-fuerte: #ffbd00;
  --pape-rosa: #ff3b85;
  --pape-rosa-fuerte: #f72572;
  --pape-negro: #111111;
  --pape-verde: #0a9f4f;
  --pape-rojo: #d60000;
  --pape-azul: #3483fa;
  --pape-fondo: #f7f7f8;
  --pape-card: #ffffff;
  --pape-gris: #777777;
  --pape-borde: #ececec;
  --sombra-suave: 0 8px 20px rgba(0,0,0,0.08);

  --alto-header: 78px;
  --alto-display: 150px;
  --alto-busqueda: 88px;
  --alto-camara: 220px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
  background:
  radial-gradient(circle at top left, rgba(255,212,59,0.20), transparent 220px),
  #fffdf8;
    var(--pape-fondo);
  color: var(--pape-negro);
}

body {
  overscroll-behavior: none;
}

.app,
main {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
}

.app {
  padding: 0;
}

button {
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.12s ease;
}

button:active {
  transform: scale(0.96);
}

input,
select,
textarea {
  width: 100%;
  max-width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid #d8d8d8;
  background: white;
  color: #222;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--pape-azul);
  box-shadow: 0 0 0 3px rgba(52,131,250,0.12);
}

input:disabled {
  background: #eeeeee;
  color: #999;
}

img,
video,
canvas {
  max-width: 100%;
}

/* HEADER */

.header-global,
#headerGlobal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  width: 100%;
  height: var(--alto-header);

  margin: 0;
  padding: 8px 14px;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 9000;

  background:
  radial-gradient(circle at top left, rgba(255,212,59,0.20), transparent 220px),
  #fffdf8;

  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

.marca-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  line-height: 1;
}

.logo-header {
  width: 116px;
  max-height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(255,189,0,0.28));
}

.marca-header span {
  font-size: 11px;
  color: var(--pape-gris);
  margin-top: -4px;
}

.header-total,
#totalHeaderBox,
#total {
  font-size: 34px;
  font-weight: 900;
  color: var(--pape-verde);
  letter-spacing: -1px;
  white-space: nowrap;
}

/* PANTALLAS */

.pantalla {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;

  display: flex;
  flex-direction: column;

  justify-content: flex-start;
  align-items: stretch;

  gap: 12px;

  padding:
    calc(var(--alto-header) + 18px)
    16px
    140px;

  overflow-y: auto;
  overflow-x: hidden;

  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;
}

.pantalla h2 {
  font-size: 30px;
  margin: 12px 0 6px;
  text-align: left;
}

.pantalla > button,
.btn-principal,
.panel-busqueda button,
.panel-monto button {
  width: 100%;
  max-width: 360px;
  min-height: 48px;
  padding: 13px 15px;
  font-size: 18px;
  font-weight: 900;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, var(--pape-amarillo), var(--pape-amarillo-fuerte));
  color: #111;
  box-shadow: 0 8px 18px rgba(255,189,0,0.22);
}

.btn-peligro,
#pantallaRetirarDinero button:not(.btn-volver) {
  background: linear-gradient(135deg, #ff4d4d, var(--pape-rojo)) !important;
  color: white !important;
  box-shadow: 0 8px 18px rgba(214,0,0,0.24) !important;
}

.btn-cancelar {
  width: 100%;
  flex-shrink: 0;
  margin-top: 10px;
  padding: 14px;
  border-radius: 16px;
  border: none;
  background: #f0f0f0;
  color: #333;
  font-size: 16px;
  font-weight: 800;
  box-shadow: none;
}

.btn-volver {
  position: absolute;
  top: 16px;
  left: 16px;
  width: auto !important;
  max-width: none !important;
  min-height: auto !important;
  padding: 8px 10px !important;
  font-size: 16px !important;
  font-weight: bold;
  border: none !important;
  background: transparent !important;
  color: #555 !important;
  box-shadow: none !important;
}

/* LOGIN */

#pantallaLogin {
  min-height: 100dvh;
  max-height: 100dvh;
  justify-content: flex-start;
  align-items: center;
  gap: 9px;
  padding: 14px 18px 12px;
  overflow-y: auto;
  background:
  radial-gradient(circle at top left, rgba(255,212,59,0.20), transparent 220px),
  #fffdf8;
    radial-gradient(circle at top right, rgba(255,189,0,.12), transparent 240px),
    #fffdf8;
}

#pantallaLogin::before {
  content: "";
  width: 98px;
  height: 98px;
  flex-shrink: 0;
  border-radius: 50%;
  background-image: url("assets/avatar-chica-pape.png");
  background-size: cover;
  background-position: center;
  border: 4px solid white;
  box-shadow: 0 9px 22px rgba(255,189,0,.22);
  margin-top: 2px;
  margin-bottom: -3px;
}

#pantallaLogin h2 {
  font-size: 0;
  width: 168px;
  height: 76px;
  flex-shrink: 0;
  margin: -2px 0 6px;
  background-image: url("assets/logo-la-pape.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#pantallaLogin input {
  width: 100%;
  max-width: 330px;
  height: 50px;
  min-height: 50px;
  padding: 0 18px;
  font-size: 19px;
  border-radius: 21px;
  border: 1px solid #eadfca;
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}

#pantallaLogin input:focus {
  border-color: var(--pape-amarillo-fuerte);
  box-shadow:
    0 0 0 4px rgba(255,189,0,.14),
    0 6px 16px rgba(0,0,0,.04);
}

#pantallaLogin button {
  width: 100%;
  max-width: 330px;
  height: 50px;
  min-height: 50px;
  border-radius: 21px;
  font-size: 19px;
  font-weight: 900;
}

#pantallaLogin button[onclick="login()"] {
  margin-top: 5px;
  border: none;
  background: linear-gradient(135deg, #ffd43b, #ffbd00);
  color: #111;
  box-shadow: 0 10px 20px rgba(255,189,0,.25);
}

.link-recuperar {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: auto !important;
  align-self: flex-end;
  margin-right: calc((100% - min(330px,100%))/2);
  margin-top: -4px;
  margin-bottom: 3px;
  padding: 0 2px 1px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: underline;
  text-decoration-color: #ffbd00;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

#pantallaLogin .btn-google {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: white !important;
  color: #111 !important;
  border: 1px solid #eadfca !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.05) !important;
}

#pantallaLogin .btn-google .google-icon {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
  flex-shrink: 0;
}

#mensajeLogin {
  max-width: 330px;
  min-height: 16px;
  font-size: 13px;
}


/* POS */

#appCaja,
.pantalla-pos {
  height: 100dvh;
  min-height: 100dvh;

  padding:
    calc(var(--alto-header) + var(--alto-display) + 10px)
    16px
    22px
    16px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  overflow-y: auto;
  overflow-x: hidden;
}

/* DISPLAY */

#resultado,
.resultado {
  position: fixed;
  top: var(--alto-header);
  left: 0;
  right: 0;

  height: var(--alto-display);
  min-height: var(--alto-display);
  max-height: var(--alto-display);

  margin: 0;
  padding: 8px 16px;

  z-index: 8500;

  background: white;
  border-radius: 0 0 22px 22px;
  border: 1px solid var(--pape-borde);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  text-align: center;
  font-weight: 900;
}

.display-venta {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 82px 1fr auto;
  gap: 14px;
  align-items: center;
}

.display-img {
  width: 82px;
  height: 82px;
  border-radius: 20px;
  object-fit: cover;
  background: #f6f6f6;
}

.display-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

.display-linea strong,
.display-nombre {
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.display-sku {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}

.display-unitario {
  font-size: 14px;
  font-weight: 700;
  color: #444;
  margin-top: 4px;
}

.display-total {
  font-size: 32px;
  font-weight: 900;
  color: var(--pape-verde);
  line-height: 1;
}

.display-pzas {
  font-size: 12px;
  font-weight: 800;
  color: #777;
}

.display-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.btn-eliminar-display,
.btn-quitar {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: #fff8df !important;
  color: #111 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.display-cantidad {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.display-cantidad button {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: #ffd43b;
  color: #111;
  font-size: 26px;
  font-weight: 900;
  display: grid;
  place-items: center;
  padding: 0;
}

.input-cantidad {
  width: 58px !important;
  min-width: 58px;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 14px;
  background: #f5f5f5;
  text-align: center;
  font-size: 22px !important;
  font-weight: 900;
  color: #111;
}

#resultado.display-stock-bajo {
  border-color: #ffbd00;
  background: #fff8df;
}

#resultado.display-stock-agotado {
  border-color: #ff6b6b;
  background: #fff0f0;
}

/* DISPLAY VACÍO */

.display-vacio-premium {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: center;
  gap: 14px;
}

.display-cajera {
  width: 100%;
  max-height: 96px;
  object-fit: contain;
  object-position: center bottom;
}

.display-vacio-textos {
  min-width: 0;
  text-align: left;
}

.display-vacio-textos strong {
  display: block;
  font-size: clamp(22px, 6vw, 34px);
  line-height: .95;
  font-weight: 900;
  color: #111;
}

.display-vacio-textos span {
  display: block;
  margin-top: 8px;
  font-size: clamp(13px, 3.8vw, 18px);
  line-height: 1.25;
  font-weight: 600;
  color: #666;
}

/* BOTONES POS Y CÁMARA */

.contenedor-camara {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto;
  overflow: visible;
}

.acciones-pos {
  order: 1;
  position: static;
  inset: auto;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;

  width: 100%;
  padding: 0;
}

.acciones-stock {
  grid-template-columns: repeat(2, 1fr);
}

.acciones-pos .btn-accion,
.acciones-stock button {
  width: 100%;
  height: 82px;
  min-height: 82px;
  padding: 8px 4px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  color: #111;

  box-shadow:
    0 8px 20px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.acciones-pos .btn-accion img.icono-pos {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.acciones-pos .btn-accion span {
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #222;
}

.acciones-pos .btn-accion:nth-child(1) span {
  color: var(--pape-rosa);
}

.acciones-pos .btn-accion:nth-child(3) span {
  color: var(--pape-verde);
}

.codigo-oculto {
  opacity: 0;
  height: 1px;
  width: 1px;
  position: absolute;
}

/* CÁMARA HTML5QRCODE LIMPIA */

#reader {
  order: 2;
  display: none;
  width: 100%;
  height: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #111;
  border-radius: 26px;
}

body.camara-activa #reader {
  display: block !important;
  height: var(--alto-camara) !important;
  min-height: var(--alto-camara) !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.16) !important;
  border: 2px solid rgba(255,212,59,.45);
}

#reader__dashboard,
#reader__dashboard_section,
#reader__header_message,
#reader__status_span {
  display: none !important;
}

#reader img {
  display: none !important;
}

body.camara-activa #reader > div,
body.camara-activa #reader div {
  width: 100% !important;
  height: 100% !important;
  min-height: var(--alto-camara) !important;
  overflow: hidden !important;
}

body.camara-activa #reader video {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;

  width: 100% !important;
  height: var(--alto-camara) !important;
  min-width: 100% !important;
  min-height: var(--alto-camara) !important;

  object-fit: cover !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  border-radius: 24px !important;
}

body.camara-activa #reader canvas {
  display: none !important;
}

/* AVISOS */

#estadoVenta {
  margin: 0;
  text-align: center;
}

.pos-aviso {
  margin-top: 6px;
  font-weight: 800;
}

.pos-stock {
  background: #ffe5e5;
  color: #c40000;
  padding: 8px;
  border-radius: 10px;
  font-size: 18px;
}

.pos-stock-bajo {
  background: #fff4d6 !important;
  color: #9a6a00 !important;
}

.pos-comision {
  background: #e6fff1;
  color: #0a8f47;
  padding: 6px;
  border-radius: 10px;
  font-size: 16px;
  margin-top: 6px;
}

/* BOTONERA */

.botonera {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  position: relative;
  z-index: 3;
}

.botonera button {
  min-height: 58px;
  padding: 12px;
  font-size: 18px;
  font-weight: 900;
  border-radius: 22px;
  border: none;
  background: white;
  color: #111;
  box-shadow: var(--sombra-suave);
}

.btn-nueva-venta {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-nueva-venta img,
.btn-deshacer img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.comision-acumulada,
#comisionAcumuladaVista {
  font-size: 14px;
  color: var(--pape-verde);
  text-align: left;
  margin: 0;
  opacity: .8;
  font-weight: 900;
}

/* BUSCADOR Y MONTO */

.panel-busqueda,
.panel-monto {
  width: 100%;
  margin-top: 10px;
  background: white;
  padding: 10px;
  border-radius: 24px;
  box-shadow: var(--sombra-suave);
  border: 1px solid var(--pape-borde);
}

.panel-busqueda {
  border: 2px solid rgba(255,212,59,.42);
  box-shadow: 0 12px 28px rgba(255,189,0,.12);
}

.panel-busqueda input,
.panel-monto input {
  height: 54px;
  font-size: 22px;
  padding: 0 16px;
  border-radius: 18px;
}

#panelBusqueda {
  display: none;
}

body.pos-activo #panelBusqueda.busqueda-activa {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(10px, env(safe-area-inset-bottom));

  z-index: 9500;

  display: flex !important;
  align-items: center;
  gap: 8px;

  margin: 0;
  padding: 8px;

  background: #fff8d6;
  border: 2px solid #ffd84d;
  border-radius: 22px;

  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

body.pos-activo #panelBusqueda.busqueda-activa input {
  width: 100%;
  height: 52px;
  min-height: 52px;
  border: none;
  outline: none;
  background: white;
  border-radius: 18px;
  padding: 14px;
  font-size: 18px;
}

body.pos-activo #panelBusqueda.busqueda-activa::after {
  content: "✕";
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #111;
  color: white;
  display: grid;
  place-items: center;
  font-weight: bold;
  flex: 0 0 38px;
}

/* CAJA */

#pantallaAbrirCaja {
  min-height: 100dvh;
  padding: calc(var(--alto-header) + 30px) 20px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: center;
  gap: 18px;
}

#pantallaCerrarCaja,
#pantallaIngresarDinero,
#pantallaRetirarDinero {
  min-height: 100dvh;
  justify-content: center;
  align-items: center;
}

#pantallaIngresarDinero button:not(.btn-volver) {
  background: var(--pape-verde);
  color: white;
}

#pantallaRetirarDinero {
  background: #fff7f7;
}

#pantallaRetirarDinero input {
  border-color: #ffb3b3;
}

#resumenCierre {
  width: 100%;
  max-width: 360px;
  margin-top: 20px;
  background: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#resumenCierre p {
  margin: 4px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}

#diferencia {
  font-size: 16px;
  font-weight: bold;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: center;
}

.faltante {
  background: #ffe5e5;
  color: var(--pape-rojo);
}

.sobrante {
  background: #fff4d6;
  color: #c48a00;
}

.perfecto {
  background: #e6f7ec;
  color: var(--pape-verde);
}

/* INVENTARIO */

.pantalla-inventario {
  gap: 10px;
}

.pantalla-inventario h2 {
  font-size: 28px;
  margin: 18px 0 8px;
}

.bloque {
  width: 100%;
  background: white;
  padding: 15px;
  border-radius: 16px;
  box-shadow: 0 3px 8px rgba(0,0,0,.05);
  border: 1px solid var(--pape-borde);
}

.bloque h3 {
  margin-top: 0;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campo span {
  font-size: 12px;
  font-weight: 700;
  color: #666;
  padding-left: 4px;
}

.campo-flex {
  flex: 1;
}

.fila-doble,
.fila-codigos,
.controles-lista {
  display: flex;
  gap: 10px;
  width: 100%;
}

.fila-doble > *,
.controles-lista > * {
  flex: 1;
}

.controles-lista select {
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: white;
  padding: 6px;
  font-size: 13px;
}

.btn-mas {
  width: 42px !important;
  max-width: 42px !important;
  height: 42px;
  min-height: 42px !important;
  padding: 0 !important;
  font-size: 22px !important;
  font-weight: 900;
  border-radius: 10px !important;
  background: #111 !important;
  color: white !important;
  box-shadow: none !important;
  flex-shrink: 0;
  align-self: flex-end;
}

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

.check-linea {
  width: 100%;
  min-height: 44px;
  background: white;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  border: 1px solid #ddd;
}

.check-linea input {
  width: auto;
  min-height: auto;
  transform: scale(1.25);
}

.margen-box {
  background: #f2f4f7;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 12px;
  margin-top: 6px;
}

.margen-contenido {
  display: flex;
  gap: 10px;
}

.margen-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: #666;
}

.margen-item strong {
  font-size: 20px;
  color: #111;
}

.precio-solo-lectura {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.precio-solo-lectura span {
  color: #666;
  font-size: 14px;
}

.precio-solo-lectura strong {
  font-size: 20px;
}

#busquedaInicio {
  border-radius: 22px;
  margin-bottom: 4px;
}

#listaProductosInicio,
#listaStockBajo,
#listaHistoricoCajas,
#listaCajas,
#listaUsuariosComisiones {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-producto,
.item-producto,
.caja-item,
.usuario-item {
  background: white;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  border: 1px solid #eee;
}

.item-producto {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.img-producto,
.img-producto-pos {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

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

.nombre-producto,
.item-info strong {
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-producto,
.item-info span {
  font-size: 12px;
  color: #777;
}

.item-precio {
  font-weight: bold;
  margin-left: 8px;
  flex-shrink: 0;
  font-size: 15px;
}

.item-producto.stock-bajo,
.stock-alerta {
  background: #fff8e1;
  border-color: #ffcf66;
}

.item-producto.stock-cero {
  background: #ffeaea;
  border-color: #ffb3b3;
}

/* ADMIN */

.pantalla-admin {
  gap: 14px;
}

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

.header-admin h2 {
  margin: 0;
}

.header-admin button {
  width: auto;
  min-height: auto;
  padding: 10px 14px;
  font-size: 15px;
}

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

.usuario-info {
  display: flex;
  flex-direction: column;
}

.usuario-nombre,
.caja-usuario {
  font-weight: bold;
}

.usuario-comision {
  color: var(--pape-verde);
  font-size: 14px;
}

.caja-datos {
  font-size: 14px;
  color: #555;
  line-height: 1.45;
  margin-top: 6px;
}

.usuario-item button,
.caja-item button {
  width: auto;
  max-width: none;
  min-height: auto;
  padding: 9px 12px;
  font-size: 14px;
  border-radius: 12px;
}

/* MODALES */

.modal,
.modal-productos {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal-contenido {
  background: white;
  width: 92%;
  max-width: 420px;
  max-height: min(72dvh, 620px);
  border-radius: 26px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  overflow: hidden;
}

.modal-contenido h2,
.modal-contenido h3 {
  margin: 0 0 8px;
  text-align: center;
}

#listaModalProductos,
#detalleRecibo {
  overflow-y: auto;
  max-height: 65vh;
  padding-right: 4px;
}

.opcion-producto {
  width: 100%;
  display: flex;
  border: none;
  background: white;
  color: #111;
  padding: 10px;
  border-radius: 14px;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  cursor: pointer;
}

.opcion-producto-con-imagen {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.opcion-producto-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.opcion-producto-info strong {
  font-size: 15px;
  text-align: left;
}

.opcion-producto-info span {
  color: var(--pape-verde);
  font-weight: 900;
}

/* RESPONSIVE */

body.teclado-abierto #estadoVenta,
body.teclado-abierto .comision-acumulada,
body.teclado-abierto #comisionAcumuladaVista {
  display: none !important;
}

.menu-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 17px;
  border: none;
  background: white;
  color: var(--pape-negro);
  font-size: 27px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  display: grid;
  place-items: center;
  padding: 0;
}

.menu-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
}

@media (max-height: 700px) {
  :root {
    --alto-header: 64px;
    --alto-display: 130px;
    --alto-camara: 180px;
  }

  .logo-header {
    width: 96px;
    max-height: 44px;
  }

  .marca-header span {
    display: none;
  }

  .header-total,
  #totalHeaderBox,
  #total {
    font-size: 28px;
  }

  .acciones-pos .btn-accion {
    height: 74px;
    min-height: 74px;
  }

  .botonera button {
    min-height: 50px;
    font-size: 16px;
  }
}

/* QRBOX LIMPIO PARA CÓDIGOS DE BARRAS */

#reader__scan_region {
  display: block !important;
  background: transparent !important;
}

#reader__scan_region img {
  display: none !important;
}

#reader__scan_region > div {
  border: 3px solid #ffd43b !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 999px rgba(0,0,0,.12) !important;
  background: transparent !important;
}

/* FIX CÁMARA NEGRA */

body.camara-activa #reader {
  display: block !important;
  height: 220px !important;
  min-height: 220px !important;
  background: #111 !important;
  overflow: hidden !important;
}

body.camara-activa #reader__scan_region {
  display: block !important;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  background: transparent !important;
  overflow: hidden !important;
}

body.camara-activa #reader__scan_region video,
body.camara-activa #reader video {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  width: 100% !important;
  height: 220px !important;
  min-width: 100% !important;
  min-height: 220px !important;

  object-fit: cover !important;
  position: relative !important;
  z-index: 10 !important;
}

body.camara-activa #reader__dashboard,
body.camara-activa #reader__header_message,
body.camara-activa #reader__status_span {
  display: none !important;
}

/* SCANNER: video visible + qrbox útil */

body.camara-activa #reader {
  display: block !important;
  height: 220px !important;
  min-height: 220px !important;
  background: #111 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
}

body.camara-activa #reader__scan_region {
  display: block !important;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  background: transparent !important;
  overflow: hidden !important;
}

body.camara-activa #reader video,
body.camara-activa #reader__scan_region video {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  object-fit: cover !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Quita imagen/cuadro blanco raro, pero NO apagues scan_region */
body.camara-activa #reader__scan_region img {
  display: none !important;
}

body.camara-activa #reader__dashboard,
body.camara-activa #reader__header_message,
body.camara-activa #reader__status_span {
  display: none !important;
}

.btn-nueva-venta{
  background: linear-gradient(
    135deg,
    var(--pape-amarillo),
    var(--pape-amarillo-fuerte)
  ) !important;

  color:#111 !important;

  box-shadow:
    0 10px 24px rgba(255,189,0,.28) !important;

  border:none !important;
}

.btn-nueva-venta:active{
  transform:scale(.98);
}

.icono-no-encontrado{
  width:110px;
  height:110px;

  object-fit:contain;

  filter:
    drop-shadow(0 8px 18px rgba(255,189,0,.18));
}

.busqueda-premium{
  width:100%;

  display:flex;
  align-items:center;
  gap:12px;

  background:white;

  border-radius:24px;

  padding:0 16px;

  min-height:74px;

  box-shadow:
    inset 0 0 0 2px rgba(255,212,59,.18);
}

.busqueda-premium input{
  flex:1;

  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;

  height:100%;

  font-size:15px;
  font-weight:300;
  padding:0 !important;
  color:#111;
}

.icono-busqueda,
.icono-codigo{
  flex-shrink:0;

  display:grid;
  place-items:center;

  font-size:28px;
}

.icono-busqueda{
  opacity:.7;
}

.icono-codigo{
  opacity:.55;
}

.header-total-box{
  display:flex;
  flex-direction:column;
  align-items:flex-end;

  line-height:1;
}

.header-total-label{
  margin-top:2px;

  font-size:11px;
  font-weight:700;

  color:#777;

  letter-spacing:.2px;
}

.header-total-monto{
  display:flex;
  align-items:flex-end;
  gap:2px;

  font-size:38px;
  font-weight:900;
  color:var(--pape-verde);

  line-height:1;
}

.accesos-rapidos {
  width: 100%;
  background: white;
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.04);
}

.accesos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.accesos-header strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
}

.accesos-header span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #888;
}

.accesos-header button {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: #f5f5f5;
  font-size: 20px;
  font-weight: 900;
}

.lista-accesos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.btn-acceso-producto {
  position: relative;
  min-height: 95px;
  padding: 10px 6px 8px;
  border: 1px solid #eeeeee;
  border-radius: 18px;
  background: white;
  box-shadow: 0 6px 16px rgba(0,0,0,.045);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-acceso-producto img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
}

.btn-acceso-producto .ranking {
  position: absolute;
  top: 6px;
  left: 6px;

  width: 22px;
  height: 22px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: var(--pape-rosa);
  color: white;

  font-size: 12px;
  font-weight: 900;
}

.btn-acceso-producto strong {
  width: 100%;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-acceso-producto span {
  font-size: 13px;
  font-weight: 900;
  color: var(--pape-verde);
}

.toast-stock{
  position:fixed;
  top:90px;
  left:50%;
  transform:
    translateX(-50%)
    translateY(-12px);
  background:#111;
  color:white;
  padding:14px 18px;
  border-radius:18px;
  font-size:15px;
  font-weight:800;
  z-index:20000;
  opacity:0;
  transition:.25s ease;
  box-shadow:
    0 10px 24px rgba(0,0,0,.22);
}

.toast-stock.visible{

  opacity:1;

  transform:
    translateX(-50%)
    translateY(0);

}

/* CÁMARA STOCK IGUAL A POS */

#readerStock {
  order: 2;
  display: none;
  width: 100%;
  height: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #111;
  border-radius: 26px;
}

body.camara-stock #readerStock {
  display: block !important;

  height: var(--alto-camara) !important;
  min-height: var(--alto-camara) !important;

  margin-top: 10px !important;
  margin-bottom: 8px !important;

  box-shadow: 0 14px 32px rgba(0,0,0,.16) !important;
  border: 2px solid rgba(255,212,59,.45);
}

body.camara-stock #readerStock > div,
body.camara-stock #readerStock div {
  width: 100% !important;
  height: 100% !important;
  min-height: var(--alto-camara) !important;
  overflow: hidden !important;
}

body.camara-stock #readerStock video,
body.camara-stock #readerStock__scan_region video {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  width: 100% !important;
  height: var(--alto-camara) !important;
  min-height: var(--alto-camara) !important;

  object-fit: cover !important;
  position: relative !important;
  z-index: 2 !important;

  border-radius: 24px !important;
}

body.camara-stock #readerStock canvas {
  display: none !important;
}

body.camara-stock #readerStock__dashboard,
body.camara-stock #readerStock__dashboard_section,
body.camara-stock #readerStock__header_message,
body.camara-stock #readerStock__status_span {
  display: none !important;
}

/* FIX BOTONES STOCK ENCIMA DE CÁMARA */

#pantallaStockRapido .contenedor-camara{
  position:relative;
  z-index:1;
}

#pantallaStockRapido .acciones-pos{
  position:relative;
  z-index:20;
}

#pantallaStockRapido #readerStock{
  position:relative;
  z-index:1;
}

#pantallaStockRapido .contenedor-camara{
  position:relative;
  z-index:1;
}

#pantallaStockRapido .acciones-pos{
  position:relative;
  z-index:20;
}

#pantallaStockRapido #readerStock{
  position:relative;
  z-index:1;
}

/* =========================================================
   STOCK RÁPIDO LIMPIO Y FINAL
========================================================= */

#pantallaStockRapido{
  padding: calc(var(--alto-header) + 14px) 16px 22px !important;
  gap: 12px !important;
}

/* =========================================================
   CÁMARA + BOTONES
========================================================= */

#pantallaStockRapido .contenedor-camara{
  order:1 !important;

  position:relative !important;
  z-index:10 !important;

  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

#pantallaStockRapido .acciones-pos{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;

  gap:10px !important;

  position:relative !important;
  z-index:30 !important;
}

#pantallaStockRapido .acciones-pos .btn-accion{
  height:74px !important;
  min-height:74px !important;

  border-radius:22px !important;

  padding:6px !important;
}

#pantallaStockRapido .acciones-pos .btn-accion img{
  width:24px !important;
  height:24px !important;
}

#pantallaStockRapido .acciones-pos .btn-accion span{
  font-size:11px !important;
  font-weight:900 !important;
}

/* =========================================================
   CÁMARA
========================================================= */

#readerStock{
  order:2;

  display:none;

  width:100%;
  height:0;

  overflow:hidden;

  background:#111;

  border-radius:24px;
}

body.camara-stock #readerStock{
  display:block !important;

  height:220px !important;
  min-height:220px !important;

  border:2px solid rgba(255,212,59,.4);

  box-shadow:
    0 14px 32px rgba(0,0,0,.16);
}

body.camara-stock #readerStock video{
  width:100% !important;
  height:220px !important;

  object-fit:cover !important;

  border-radius:22px !important;
}

body.camara-stock #readerStock canvas{
  display:none !important;
}

body.camara-stock #readerStock__dashboard,
body.camara-stock #readerStock__dashboard_section,
body.camara-stock #readerStock__header_message,
body.camara-stock #readerStock__status_span{
  display:none !important;
}

/* =========================================================
   BUSCADOR
========================================================= */

#pantallaStockRapido #panelBusquedaStock{
  order:2 !important;

  display:block !important;
}

#pantallaStockRapido .busqueda-premium{
  min-height:66px !important;

  border-radius:22px !important;
}

#pantallaStockRapido .busqueda-premium input{
  font-size:15px !important;
  font-weight:600 !important;
}

#pantallaStockRapido .busqueda-premium input::placeholder{
  color:#8a8a8a !important;
}

/* =========================================================
   DISPLAY
========================================================= */

#pantallaStockRapido #productoStockVista{
  order:3 !important;

  position:relative !important;

  top:auto !important;
  left:auto !important;
  right:auto !important;

  width:100% !important;

  height:145px !important;
  min-height:145px !important;
  max-height:145px !important;

  margin:0 !important;
  padding:12px !important;

  border-radius:28px !important;

  overflow:hidden !important;

  background:white !important;

  border:1px solid #eeeeee !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,.06) !important;
}

/* =========================================================
   DISPLAY VACÍO
========================================================= */

.display-vacio-premium{
  width:100%;
  height:100%;

  display:grid;
  grid-template-columns:72px 1fr;
  align-items:center;

  gap:12px;
}

.display-cajera{
  width:72px;
  height:72px;

  object-fit:contain;
}

.display-vacio-textos strong{
  display:block;

  font-size:24px;
  line-height:1;

  font-weight:900;

  color:#111;
}

.display-vacio-textos span{
  display:block;

  margin-top:6px;

  font-size:14px;
  line-height:1.25;

  font-weight:700;

  color:#777;
}

/* =========================================================
   PRODUCTO DETECTADO
========================================================= */

.stock-producto-detectado{
  width:100%;
  height:100%;

  display:grid;
  grid-template-columns:64px 1fr auto;

  align-items:center;

  gap:12px;

  text-align:left;
}

.stock-img-producto{
  width:64px;
  height:64px;

  border-radius:18px;

  object-fit:cover;

  background:#f5f5f5;
}

.stock-info-producto{
  min-width:0;
}

.stock-info-producto span{
  display:block;

  font-size:11px;
  font-weight:800;

  color:#888;

  margin-bottom:4px;
}

.stock-info-producto strong{
  display:block;

  font-size:18px;
  line-height:1.05;

  font-weight:900;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stock-info-producto small{
  display:inline-block;

  margin-top:6px;
  padding:4px 8px;

  border-radius:999px;

  background:#f5f5f5;

  font-size:11px;
  font-weight:800;

  color:#666;
}

.stock-numero{
  min-width:72px;

  padding-left:10px;

  border-left:1px solid #eee;

  text-align:center;
}

.stock-numero span{
  display:block;

  font-size:10px;
  font-weight:800;

  color:#777;
}

.stock-numero strong{
  display:block;

  margin-top:2px;

  font-size:30px;
  line-height:1;

  font-weight:900;

  color:var(--pape-verde);
}

.stock-numero small{
  font-size:10px;
  font-weight:700;

  color:#888;
}

/* =========================================================
   INPUT CANTIDAD
========================================================= */

#pantallaStockRapido #cantidadStockRapido{
  order:4 !important;

  height:62px !important;
  min-height:62px !important;

  border-radius:22px !important;

  font-size:22px !important;
  font-weight:800 !important;

  text-align:center !important;

  border:2px solid #eeeeee !important;
  background:#ffffff !important;

  margin-top:2px !important;

  box-shadow:
    0 8px 18px rgba(0,0,0,.04) !important;
}

/* =========================================================
   BOTÓN
========================================================= */

#pantallaStockRapido #btnSumarStockRapido{
  order:5 !important;

  width:100% !important;
  max-width:none !important;

  height:74px !important;
  min-height:74px !important;

  border-radius:24px !important;

  font-size:23px !important;
  font-weight:900 !important;

  margin-top:2px !important;

  background:
    linear-gradient(
      135deg,
      var(--pape-amarillo),
      var(--pape-amarillo-fuerte)
    ) !important;

  color:#111 !important;

  border:none !important;

  box-shadow:
    0 10px 24px rgba(255,189,0,.28) !important;
}

/* =========================================================
   STOCK AGREGADO OK
========================================================= */

.stock-ok-card{
  width:100%;
  height:100%;

  display:grid;
  grid-template-columns:56px 72px 1fr;

  align-items:center;

  gap:12px;
}

.stock-ok-avatar{
  width:56px;
  height:56px;

  object-fit:contain;
}

.stock-ok-img{
  width:72px;
  height:72px;

  border-radius:18px;

  object-fit:cover;

  background:#f5f5f5;
}

.stock-ok-info{
  min-width:0;
}

.stock-ok-header{
  font-size:14px;
  line-height:1;

  font-weight:900;

  color:#12a150;

  margin-bottom:6px;
}

.stock-ok-info strong{
  display:block;

  font-size:20px;
  line-height:1.05;

  font-weight:900;

  color:#111;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stock-ok-info span{
  display:block;

  margin-top:5px;

  font-size:16px;
  line-height:1;

  font-weight:900;

  color:#12a150;
}

/* =========================================================
   STOCK AGREGADO NUEVO
========================================================= */

.stock-ok-card-nuevo{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;

  padding:4px;

  text-align:left;
}

.stock-ok-titulo{
  display:flex;
  align-items:center;
  gap:8px;

  color:#15a653;
  font-size:18px;
  font-weight:900;
}

.stock-ok-icono{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  border-radius:999px;

  background:#32b857;
  color:white;

  font-size:22px;
  font-weight:900;
}

.stock-ok-cuerpo{
  display:grid;
  grid-template-columns:78px 1fr;
  align-items:center;
  gap:14px;
}

.stock-ok-img-nueva{
  width:78px;
  height:78px;

  object-fit:cover;

  border-radius:20px;

  background:#f4f4f4;

  border:1px solid #eee;
}

.stock-ok-datos{
  min-width:0;
}

.stock-ok-datos h3{
  margin:0 0 8px;

  font-size:28px;
  line-height:1;

  font-weight:900;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  color:#111;
}

.stock-ok-cantidad{
  display:inline-block;

  margin-right:8px;

  font-size:20px;
  font-weight:900;

  color:#069447;
}

.stock-ok-nuevo{
  display:inline-block;

  font-size:14px;
  font-weight:800;

  color:#777;
}

.stock-ok-nuevo strong{
  margin-left:6px;

  font-size:22px;
  font-weight:900;

  color:#111;
}

.btn-deshacer-stock{
  width:100% !important;
  height:42px !important;
  min-height:42px !important;

  margin-top:2px !important;

  border-radius:16px !important;

  border:1px solid #e2e2e2 !important;

  background:#ffffff !important;
  color:#111 !important;

  box-shadow:0 4px 12px rgba(0,0,0,.05) !important;

  font-size:17px !important;
  font-weight:900 !important;
}

.stock-revertido .stock-ok-titulo{
  color:#111;
}

.stock-revertido .stock-ok-icono{
  background:#111;
}

/* =========================================================
   STOCK AGREGADO COMPACTO - FINAL
========================================================= */

#pantallaStockRapido #productoStockVista{
  height:145px !important;
  min-height:145px !important;
  max-height:145px !important;

  padding:10px 12px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.stock-ok-compacto{
  width:100%;
  height:100%;

  display:grid;
  grid-template-columns:72px 1fr 46px;
  align-items:center;
  gap:12px;

  text-align:left;
}

.stock-ok-img-mini{
  width:72px;
  height:72px;

  border-radius:18px;

  object-fit:cover;

  background:#f5f5f5;
  border:1px solid #eeeeee;
}

.stock-ok-centro{
  min-width:0;
}

.stock-ok-label{
  margin-bottom:3px;

  font-size:13px;
  line-height:1;

  font-weight:900;

  color:#14a34a;

  white-space:nowrap;
}

.stock-ok-centro strong{
  display:block;

  margin-bottom:7px;

  font-size:28px;
  line-height:.95;

  font-weight:900;

  color:#111;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stock-ok-linea{
  display:flex;
  align-items:center;
  gap:9px;

  min-width:0;
}

.stock-ok-linea span{
  font-size:18px;
  line-height:1;

  font-weight:900;

  color:#079447;

  white-space:nowrap;
}

.stock-ok-linea small{
  font-size:12px;
  line-height:1;

  font-weight:800;

  color:#777;

  white-space:nowrap;
}

.stock-ok-linea b{
  font-size:17px;
  color:#111;
}

.btn-deshacer-stock-mini{
  width:44px !important;
  height:44px !important;
  min-height:44px !important;

  padding:0 !important;

  border:none !important;
  border-radius:999px !important;

  background:#111 !important;
  color:white !important;

  font-size:22px !important;
  font-weight:900 !important;

  box-shadow:0 6px 14px rgba(0,0,0,.14) !important;
}

.stock-revertido .stock-ok-label,
.stock-revertido .stock-ok-linea span{
  color:#111 !important;
}

/* =========================================================
   STOCK RÁPIDO DISPLAY MÁS ALTO Y ADAPTATIVO
========================================================= */

#pantallaStockRapido #productoStockVista{
  height: clamp(200px, 35vh, 230px) !important;
  min-height: 185px !important;
  max-height: 230px !important;

  padding: 14px !important;

  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.stock-ok-compacto{
  width: 100%;
  height: 100%;

  display: grid !important;
  grid-template-columns: 76px 1fr !important;
  grid-template-rows: 1fr 48px !important;

  gap: 12px !important;

  align-items: center !important;
}

.stock-ok-img-mini{
  width: 76px !important;
  height: 76px !important;

  grid-column: 1;
  grid-row: 1;
}

.stock-ok-centro{
  grid-column: 2;
  grid-row: 1;

  min-width: 0;
}

.stock-ok-label{
  font-size: 18px !important;
  margin-bottom: 4px !important;
}

.stock-ok-centro strong{
  font-size: 22px !important;
  margin-bottom: 8px !important;
}

.stock-ok-linea{
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
}

.stock-ok-linea span{
  font-size: 21px !important;
}

.stock-ok-linea small{
  font-size: 15px !important;
}

.stock-ok-linea b{
  font-size: 24px !important;
}

.btn-deshacer-stock-mini{
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;

  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;

  border-radius: 18px !important;

  background: #ffffff !important;
  color: #111 !important;

  border: 1px solid #e4e4e4 !important;

  font-size: 18px !important;
  font-weight: 900 !important;

  box-shadow: 0 5px 14px rgba(0,0,0,.06) !important;
}

/* =========================================================
   AJUSTE STOCK OK: CHECK EN IMAGEN + TEXTO ARRIBA
========================================================= */

.stock-ok-compacto{
  grid-template-columns: 118px 1fr !important;
  grid-template-rows: 1fr 48px !important;
  align-items: center !important;
}

.stock-ok-imagen-wrap{
  position: relative;

  grid-column: 1;
  grid-row: 1;

  width: 98px;
  height: 98px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.stock-ok-img-mini{
  width: 86px !important;
  height: 86px !important;

  border-radius: 20px !important;
}

.stock-ok-check-flotante{
  position: absolute;
  left: -4px;
  bottom: -4px;

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 999px;

  background: #27b44f;
  color: white;

  font-size: 30px;
  font-weight: 900;

  box-shadow: 0 8px 18px rgba(39,180,79,.28);
  border: 4px solid white;
}

.stock-ok-centro{
  align-self: start !important;
  padding-top: 2px !important;
}

.stock-ok-label{
  margin-bottom: 8px !important;

  font-size: 26px !important;
  line-height: 1 !important;

  color: #079447 !important;
}

.stock-ok-centro strong{
  font-size: clamp(34px, 8vw, 48px) !important;
  margin-bottom: 8px !important;
}

.stock-ok-linea{
  gap: 12px !important;
}

.stock-ok-linea span{
  font-size: 23px !important;
}

.stock-ok-linea small{
  font-size: 16px !important;
}

.btn-deshacer-stock-mini{
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

/* =========================================================
   FIX FINAL LETRAS STOCK RÁPIDO MÁS PEQUEÑAS
========================================================= */

#pantallaStockRapido #productoStockVista{
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
}

#pantallaStockRapido .stock-ok-compacto{
  grid-template-columns: 96px 1fr !important;
  grid-template-rows: 1fr 44px !important;
  gap: 8px !important;
}

#pantallaStockRapido .stock-ok-imagen-wrap{
  width: 82px !important;
  height: 82px !important;
}

#pantallaStockRapido .stock-ok-img-mini{
  width: 74px !important;
  height: 74px !important;
}

#pantallaStockRapido .stock-ok-check-flotante{
  width: 34px !important;
  height: 34px !important;
  font-size: 15px !important;
  border: 3px solid white !important;
}

#pantallaStockRapido .stock-ok-centro{
  align-self: center !important;
  padding-top: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
}

#pantallaStockRapido .stock-ok-label{
  font-size: 12px !important;
  line-height: 1 !important;
  margin-bottom: 5px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

#pantallaStockRapido .stock-ok-centro strong{
  font-size: 18px !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#pantallaStockRapido .stock-ok-linea{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#pantallaStockRapido .stock-ok-linea span{
  font-size: 13px !important;
  line-height: 1 !important;
}

#pantallaStockRapido .stock-ok-linea small{
  font-size: 12px !important;
  line-height: 1 !important;
}

#pantallaStockRapido .stock-ok-linea b{
  font-size: 13px !important;
}

#pantallaStockRapido .btn-deshacer-stock-mini{
  height: 42px !important;
  min-height: 42px !important;
  font-size: 18px !important;
  border-radius: 16px !important;
}

/* =========================================================
   FIX SCROLL PANTALLAS INVENTARIO / AGREGAR PRODUCTO
========================================================= */

#pantallaAgregarProducto,
#pantallaEditarProducto,
#pantallaInventarioInicio,
#pantallaStockBajo,
#pantallaAdmin{
  height: 100dvh !important;
  min-height: 100dvh !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch !important;

  padding-bottom: 120px !important;
}

/* =========================================================
   PREVIEW IMAGEN PRODUCTO
========================================================= */

.preview-producto-box{
  width:100%;
  min-height:150px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:white;

  border:2px dashed rgba(255,189,0,.65);
  border-radius:26px;

  padding:14px;

  box-shadow:0 8px 22px rgba(0,0,0,.05);
}

.preview-producto-img{
  width:140px;
  height:140px;

  object-fit:cover;

  border-radius:24px;

  background:#f5f5f5;

  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.btn-subir-imagen{
  width:100%;
  min-height:60px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:22px;

  background:white;

  border:2px solid rgba(255,212,59,.65);

  color:#111;

  font-size:20px;
  font-weight:900;

  box-shadow:0 8px 18px rgba(255,189,0,.12);
}

.btn-subir-imagen input{
  display:none;
}

.fila-imagen-producto{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.fila-imagen-producto .btn-subir-imagen{
  min-height:56px;
  font-size:17px;
}

.producto-seleccionado{
  outline:4px solid #ffd43b !important;

  transform:scale(.98);

  background:#fff9db !important;
}

.btn-eliminar-flotante{
  position:fixed;

  left:16px;
  right:16px;
  bottom:22px;

  z-index:99999;

  height:64px;

  border:none;
  border-radius:24px;

  background:#ff4d4f;
  color:white;

  font-size:20px;
  font-weight:900;

  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

/* =========================================================
   IMPORTAR PRODUCTOS
========================================================= */

.bloque-importar{
  width:100%;

  background:white;

  border-radius:26px;

  padding:20px;

  display:flex;
  flex-direction:column;
  gap:12px;

  border:1px solid #eeeeee;

  box-shadow:0 10px 24px rgba(0,0,0,.05);
}

.bloque-importar h3{
  margin:0;

  font-size:22px;
  font-weight:900;

  color:#111;
}

.bloque-importar p{
  margin:0;

  font-size:15px;
  line-height:1.35;

  color:#777;
}

.bloque-importar-destacado{
  border:2px solid rgba(255,212,59,.8);

  background:
    radial-gradient(circle at top left, rgba(255,212,59,.25), transparent 180px),
    white;
}

.bloque-importar input[type="file"]{
  min-height:auto;

  padding:14px;

  border-radius:18px;

  background:#fff8d6;

  border:1px dashed #ffbd00;
}

#estadoImportacion{
  font-size:14px;
  font-weight:800;

  color:#0a9f4f;
}

/* =========================================================
   PANTALLA IMPORTAR PRODUCTOS PREMIUM
========================================================= */

.pantalla-importar{
  gap:18px !important;
  padding-bottom:150px !important;
}

.importar-hero{
  width:100%;
  margin-top:6px;
}

.importar-hero h2{
  margin:0;
  font-size:42px;
  line-height:.95;
  font-weight:900;
  color:#111;
}

.importar-hero p{
  margin:14px 0 0;
  font-size:18px;
  line-height:1.25;
  font-weight:700;
  color:#777;
}

.importar-card{
  width:100%;
  background:white;
  border-radius:30px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
  box-shadow:0 16px 38px rgba(0,0,0,.07);
  border:1px solid rgba(0,0,0,.04);
}

.importar-card-header{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:14px;
  align-items:center;
}

.importar-icono{
  width:64px;
  height:64px;
  border-radius:50%;
  background:#f2fbf4;
  display:grid;
  place-items:center;
}

.importar-icono img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.importar-card-header h3{
  margin:0;
  font-size:27px;
  line-height:1;
  font-weight:900;
  color:#111;
}

.importar-card-header p{
  margin:8px 0 0;
  font-size:16px;
  line-height:1.25;
  color:#777;
  font-weight:700;
}

.excel-drop{
  width:100%;
  min-height:96px;
  padding:14px;
  border-radius:24px;
  border:2px dashed rgba(255,189,0,.7);
  background:#fffdf3;
  display:grid;
  grid-template-columns:58px 1fr 58px;
  gap:12px;
  align-items:center;
}

.excel-drop input{
  display:none;
}

.excel-drop-icono,
.excel-drop-subir{
  width:52px;
  height:52px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:white;
  border:1px solid rgba(255,189,0,.45);
  font-size:27px;
  font-weight:900;
  color:#c88400;
}

.excel-drop-texto{
  min-width:0;
}

.excel-drop-texto strong{
  display:block;
  font-size:20px;
  line-height:1;
  font-weight:900;
  color:#111;
}

.excel-drop-texto span{
  display:block;
  margin-top:7px;
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  color:#777;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.btn-subir-excel{
  width:100% !important;
  max-width:none !important;
  height:62px !important;
  min-height:62px !important;
  border:none !important;
  border-radius:20px !important;
  background:linear-gradient(135deg, #27c95b, #0a9f4f) !important;
  color:white !important;
  font-size:21px !important;
  font-weight:900 !important;
  box-shadow:0 10px 24px rgba(10,159,79,.22) !important;
}

.plantillas-titulo{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  font-size:18px;
  font-weight:900;
  color:#111;
}

.plantillas-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.plantilla-card{
  width:100% !important;
  max-width:none !important;
  min-height:86px !important;
  padding:12px !important;
  border-radius:20px !important;
  border:1px solid #eeeeee !important;
  background:white !important;
  color:#111 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.04) !important;
  display:grid !important;
  grid-template-columns:52px 1fr 22px !important;
  gap:12px !important;
  align-items:center !important;
  text-align:left !important;
}

.plantilla-icono{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
}

.plantilla-icono.verde{
  background:#eaf8ef;
}

.plantilla-icono.amarillo{
  background:#fff4cd;
}

.plantilla-icono img{
  width:30px;
  height:30px;
  object-fit:contain;
}

.plantilla-card strong{
  display:block;
  font-size:16px;
  line-height:1.05;
  font-weight:900;
}

.plantilla-card span{
  display:block;
  margin-top:5px;
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  color:#777;
}

.plantilla-card b{
  font-size:30px;
  color:#ffbd00;
}

.basicos-card{
  width:100%;
  padding:18px;
  border-radius:26px;
  border:2px solid rgba(255,212,59,.9);
  background:
    radial-gradient(circle at top left, rgba(255,212,59,.23), transparent 190px),
    #fffdf5;
  display:grid;
  grid-template-columns:92px 1fr;
  gap:14px;
  align-items:center;
}

.basicos-img img{
  width:86px;
  height:86px;
  object-fit:contain;
}

.badge-recomendado{
  display:inline-block;
  margin-bottom:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff1b8;
  color:#c47b00;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}

.basicos-info h3{
  margin:0;
  font-size:25px;
  line-height:1.05;
  font-weight:900;
}

.basicos-info p{
  margin:8px 0 14px;
  font-size:15px;
  line-height:1.25;
  font-weight:700;
  color:#777;
}

.basicos-info button{
  width:100% !important;
  max-width:none !important;
  min-height:56px !important;
  border:none !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, var(--pape-amarillo), var(--pape-amarillo-fuerte)) !important;
  color:#111 !important;
  font-size:16px !important;
  font-weight:900 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  box-shadow:0 10px 22px rgba(255,189,0,.22) !important;
}

.basicos-info button span{
  font-size:28px;
  line-height:1;
}

.ayuda-importar{
  padding:14px;
  border-radius:22px;
  background:#f1fbf4;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px;
  align-items:center;
}

.ayuda-importar img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.ayuda-importar p{
  margin:0;
  font-size:14px;
  line-height:1.25;
  color:#555;
  font-weight:700;
}

.ayuda-importar strong{
  display:block;
  color:#111;
  font-size:16px;
  margin-bottom:3px;
}

#pantallaImportarProductos{
  height: 100vh;
  overflow-y: auto;
  padding: 20px;
  padding-bottom: 120px;
  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   PANEL ADMIN - ESTILO UNIFORME CAJA FÁCIL
========================================================= */

.pantalla-admin{
  padding: calc(var(--alto-header) + 18px) 16px 120px !important;
  gap: 14px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* HEADER */

.admin-header-simple{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.admin-header-simple h2{
  margin:0;
  font-size:25px;
  line-height:.95;
  font-weight:900;
  letter-spacing:-1px;
}

.admin-header-simple p{
  margin:7px 0 0;
  font-size:12px;
  line-height:1.15;
  font-weight:500;
  color:#777;
}

.admin-filtro-fecha,
.btn-admin-refresh{
  width:auto !important;
  max-width:none !important;
  min-height:46px !important;
  padding:9px 14px !important;
  border-radius:18px !important;
  border:none !important;
  background:white !important;
  color:#111 !important;
  font-size:13px !important;
  font-weight:700 !important;
  box-shadow:var(--sombra-suave) !important;
}

/* CARD DINERO */

/* GRID RESUMEN */

.admin-resumen-grid,
.admin-resumen-grid-6{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}

.admin-mini-card{
  min-height:118px;
  padding:15px;
  border-radius:24px;
  background:white;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:var(--sombra-suave);

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.admin-mini-card > span{
  font-size:27px;
  line-height:1;
  margin-bottom:8px;
}

.admin-mini-card small{
  display:block;
  color:#777;
  font-size:15px;
  font-weight:900;
  line-height:1.1;
}

.admin-mini-card strong{
  display:block;
  margin-top:7px;
  color:#111;
  font-size:30px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1px;
}

.admin-mini-card em{
  display:block;
  margin-top:7px;
  font-style:normal;
  font-size:12px;
  line-height:1.15;
  font-weight:800;
  color:#777;
}

.admin-card-verde strong{ color:var(--pape-verde); }
.admin-card-rojo strong{ color:#ef3b3b; }
.admin-card-naranja strong{ color:#ff8a00; }
.admin-card-azul strong{ color:var(--pape-azul); }
.admin-card-morado strong{ color:#8557e6; }

/* BLOQUES */

.admin-bloque{
  border-radius:24px !important;
  padding:16px !important;
  background:white !important;
  border:1px solid rgba(0,0,0,.05) !important;
  box-shadow:var(--sombra-suave) !important;
}

.admin-bloque-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.admin-bloque-header h3{
  margin:0;
  font-size:22px;
  line-height:1;
  font-weight:900;
}

.admin-bloque-header p{
  margin:5px 0 0;
  font-size:13px;
  font-weight:700;
  color:#777;
}

.admin-bloque-header button{
  width:auto !important;
  max-width:none !important;
  min-height:36px !important;
  padding:7px 13px !important;
  border-radius:999px !important;
  border:none !important;
  background:#fff4bf !important;
  color:#7a5700 !important;
  font-size:13px !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

/* ÚLTIMO MOVIMIENTO */

.admin-movimiento-card{
  min-height:68px;
  padding:10px;
  border-radius:20px;

  display:grid;
  grid-template-columns:48px 1fr 20px;
  gap:10px;
  align-items:center;

  background:#f1fbf4;
}

.admin-movimiento-icono{
  width:48px;
  height:48px;
  border-radius:999px;
  background:var(--pape-verde);
  color:white;

  display:grid;
  place-items:center;
  font-size:24px;
}

.admin-movimiento-card strong{
  display:block;
  font-size:16px;
  font-weight:900;
}

.admin-movimiento-card span{
  display:block;
  margin-top:3px;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  color:#777;
}

.admin-movimiento-card b{
  font-size:28px;
}

/* MÓDULOS */

.admin-modulos-titulo{
  margin:10px 0 8px;
  font-size:12px;
  font-weight:900;
  color:var(--pape-verde);
  text-transform:uppercase;
}

.admin-modulos-titulo.bloqueado{
  color:#777;
}

.admin-modulos-incluidos{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}

.admin-modulos-incluidos button{
  width:100% !important;
  max-width:none !important;
  min-height:52px !important;
  padding:9px !important;
  border-radius:16px !important;

  border:1px solid rgba(0,0,0,.05) !important;
  background:white !important;
  color:#111 !important;
  box-shadow:0 6px 16px rgba(0,0,0,.045) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;

  font-size:19px !important;
  font-weight:900 !important;
}

.admin-modulos-incluidos button span{
  font-size:13px;
  font-weight:700;
}

.admin-modulos-extra{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
}

.admin-modulo-extra{
  padding:12px;
  border-radius:18px;

  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:10px;
  align-items:center;

  border:1px solid rgba(0,0,0,.04);
}

.modulo-impresiones{ background:#f5efff; }
.modulo-comisiones{ background:#effaf2; }
.modulo-reportes{ background:#fff2e5; }

.admin-modulo-icono{
  width:44px;
  height:44px;
  border-radius:15px;
  background:white;

  display:grid;
  place-items:center;
  font-size:24px;
}

.admin-modulo-extra strong{
  display:block;
  font-size:14px;
  line-height:1;
  font-weight:900;
}

.admin-modulo-extra span{
  display:block;
  margin-top:4px;
  font-size:11px;
  line-height:1.15;
  font-weight:700;
  color:#666;
}

.admin-modulo-extra button{
  width:auto !important;
  max-width:none !important;
  min-height:30px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  border:none !important;

  background:#111 !important;
  color:white !important;

  font-size:11px !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

.modulo-impresiones button{ background:#8557e6 !important; }
.modulo-comisiones button{ background:var(--pape-verde) !important; }
.modulo-reportes button{ background:#ff8a00 !important; }

.admin-explorar-funciones{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  background:#fff8d6;

  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}

.admin-explorar-funciones strong{
  display:block;
  font-size:15px;
  font-weight:900;
}

.admin-explorar-funciones span{
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  color:#777;
}

.admin-explorar-funciones button{
  width:auto !important;
  max-width:none !important;
  min-height:38px !important;
  padding:8px 13px !important;
  border-radius:999px !important;
  border:none !important;

  background:linear-gradient(135deg, var(--pape-amarillo), var(--pape-amarillo-fuerte)) !important;
  color:#111 !important;

  font-size:13px !important;
  font-weight:900 !important;
  box-shadow:0 8px 18px rgba(255,189,0,.16) !important;
}

/* LISTAS INTERNAS */

.pantalla-admin .usuario-item,
.pantalla-admin .caja-item{
  border-radius:18px !important;
  padding:13px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.05) !important;
}

.pantalla-admin .usuario-item button,
.pantalla-admin .caja-item button{
  border-radius:14px !important;
  font-weight:900 !important;
}

/* CELULAR MUY CHICO */

@media (max-width:390px){
  .admin-header-simple h2{
    font-size:25px !important;
  }

  .admin-header-simple p{
    font-size:15px !important;
  }


  .admin-mini-card{
    min-height:110px !important;
    padding:13px !important;
  }

  .admin-mini-card strong{
    font-size:27px !important;
  }
}

/* FIX ADMIN: quitar aire extra y compactar */

#pantallaAdmin{
  padding-top: calc(var(--alto-header) + 12px) !important;
  gap: 10px !important;
}

.admin-header-simple{
  margin-top: 0 !important;
}

.admin-resumen-grid,
.admin-resumen-grid-6{
  gap: 9px !important;
}

.admin-mini-card{
  min-height: 96px !important;
  padding: 11px !important;
  border-radius: 20px !important;
}

.admin-mini-card > span{
  font-size: 22px !important;
  margin-bottom: 5px !important;
}

.admin-mini-card small{
  font-size: 13px !important;
}

.admin-mini-card strong{
  font-size: 25px !important;
  margin-top: 5px !important;
}

.admin-mini-card em{
  font-size: 11px !important;
  margin-top: 4px !important;
}

.admin-bloque{
  padding: 13px !important;
  border-radius: 20px !important;
}

.admin-bloque-header{
  margin-bottom: 9px !important;
}

.admin-bloque-header h3{
  font-size: 20px !important;
}


/* CARD DINERO LIMPIA */

.admin-dinero-card{
  width:100%;
  min-height:120px;

  padding:16px 20px;
  border-radius:24px;

  background:
    radial-gradient(circle at top right, rgba(255,255,255,.65), transparent 140px),
    linear-gradient(135deg, #ffd43b, #ffbf00);

  box-shadow:0 10px 24px rgba(255,189,0,.22);

  display:flex;
  align-items:center;
  justify-content:space-between;

  overflow:hidden;
}

.admin-dinero-card > div{
  display:flex;
  flex-direction:column;
}

.admin-dinero-card > div > span:first-child{
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:rgba(0,0,0,.75);

  margin-bottom:8px;
}

.admin-dinero-card strong{
  display:flex;
  align-items:flex-end;
  gap:2px;

  margin:0;

  font-size:56px;
  line-height:.9;
  letter-spacing:-2px;
  font-weight:900;
  color:#111;
}

.admin-dinero-card strong span{
  font-size:inherit;
  line-height:inherit;
  font-weight:inherit;
}

.admin-dinero-card small{
  margin-top:8px;

  font-size:14px;
  font-weight:800;
  color:rgba(0,0,0,.65);
}

.admin-dinero-icono{
  font-size:54px;
  opacity:.18;
}

.admin-card-ventas{
  position:relative;
  overflow:hidden;
}

.mini-grafica-ventas{
  width:100%;
  height:32px;
  margin-top:6px;
}

.mini-grafica-ventas polyline{
  fill:none;
  stroke:var(--pape-verde);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.admin-card-ventas{
  position:relative;
  overflow:hidden;
}

.mini-grafica-ventas{
  width:100%;
  height:28px;
  margin-top:6px;
}

.mini-grafica-ventas polyline{
  fill:none;
  stroke:var(--pape-verde);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.admin-rango-fechas{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:18px;
  background:white;
  box-shadow:var(--sombra-suave);
}

.admin-rango-fechas input{
  width:112px;
  min-height:38px;
  height:38px;
  padding:6px 7px;
  border:none;
  border-radius:14px;
  background:#fff8d6;
  font-size:12px;
  font-weight:900;
}

.admin-rango-fechas span{
  font-size:14px;
  font-weight:900;
  color:#777;
}

/* FILTRO FECHAS ADMIN */

.admin-filtro-fecha{
  width:auto !important;
  max-width:none !important;
  min-height:42px !important;
  padding:8px 14px !important;
  border-radius:18px !important;
  border:none !important;
  background:white !important;
  color:#111 !important;
  font-size:15px !important;
  font-weight:900 !important;
  box-shadow:var(--sombra-suave) !important;
}

.modal-filtro-admin{
  position:fixed;
  inset:0;
  z-index:30000;
  background:rgba(0,0,0,.35);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px;
}

.modal-filtro-admin-card{
  width:100%;
  max-width:360px;

  background:white;
  border-radius:26px;
  padding:20px;

  box-shadow:0 20px 50px rgba(0,0,0,.25);

  display:flex;
  flex-direction:column;
  gap:12px;
}

.modal-filtro-admin-card h3{
  margin:0;
  font-size:26px;
  font-weight:900;
}

.modal-filtro-admin-card p{
  margin:0 0 4px;
  font-size:14px;
  font-weight:700;
  color:#777;
}

.modal-filtro-admin-card label{
  display:flex;
  flex-direction:column;
  gap:5px;

  font-size:13px;
  font-weight:900;
  color:#555;
}

.modal-filtro-admin-card input{
  height:48px;
  min-height:48px;
  border-radius:16px;
  background:#fff8d6;
  border:1px solid #ffe28a;
  font-weight:900;
}

.modal-filtro-botones{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-top:6px;
}

.modal-filtro-botones button{
  width:100% !important;
  max-width:none !important;
  min-height:42px !important;
  padding:8px !important;
  border-radius:15px !important;
  border:none !important;
  font-size:13px !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

.modal-filtro-botones button:nth-child(1){
  background:#fff4bf !important;
  color:#7a5700 !important;
}

.modal-filtro-botones button:nth-child(2){
  background:#f0f0f0 !important;
  color:#333 !important;
}

.modal-filtro-botones button:nth-child(3){
  background:linear-gradient(135deg, var(--pape-amarillo), var(--pape-amarillo-fuerte)) !important;
  color:#111 !important;
}

/* GRÁFICAS ADMIN INGRESOS / RETIROS */

.admin-card-ingresos,
.admin-card-retiros,
.admin-card-ventas{
  overflow:hidden;
}

.admin-card-ingresos .mini-grafica-ventas,
.admin-card-retiros .mini-grafica-ventas,
.admin-card-ventas .mini-grafica-ventas{
  width:100%;
  height:24px;
  margin-top:5px;
}

#adminGraficaIngresos{
  fill:none;
  stroke:var(--pape-verde);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#adminGraficaRetiros{
  fill:none;
  stroke:#ef3b3b;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.admin-seccion-titulo{
  margin: 4px 2px -4px;
}

.admin-seccion-titulo span{
  display:block;
  font-size:14px;
  font-weight:900;
  color:#111;
}

.admin-seccion-titulo small{
  display:block;
  margin-top:2px;
  font-size:11px;
  font-weight:700;
  color:#777;
}

/* CAJAS ABIERTAS ADMIN - MOBILE BONITO */

#listaCajas{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.caja-abierta-card{
  width:100%;
  padding:16px;
  border-radius:24px;
  background:white;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 22px rgba(0,0,0,.055);
  border-left:5px solid #8557e6;
}

.caja-abierta-top{
  display:flex;
  align-items:center;
  gap:12px;
}

.caja-avatar{
  width:54px;
  height:54px;
  border-radius:999px;
  background:#f3eaff;
  display:grid;
  place-items:center;
  font-size:28px;
}

.caja-abierta-info{
  flex:1;
  min-width:0;
}

.caja-abierta-info strong{
  display:block;
  font-size:22px;
  font-weight:900;
  color:#111;
}

.caja-abierta-info span{
  display:inline-block;
  margin-top:4px;
  padding:5px 9px;
  border-radius:999px;
  background:#f0ddff;
  color:#7b35d8;
  font-size:12px;
  font-weight:900;
}

.caja-abierta-info small{
  display:block;
  margin-top:7px;
  font-size:13px;
  font-weight:700;
  color:#777;
}

.caja-abierta-metricas{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #eeeeee;

  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

.caja-abierta-metricas div{
  text-align:center;
  border-right:1px solid #eeeeee;
}

.caja-abierta-metricas div:last-child{
  border-right:none;
}

.caja-abierta-metricas span{
  display:block;
  font-size:11px;
  font-weight:800;
  color:#777;
  line-height:1.1;
}

.caja-abierta-metricas strong{
  display:block;
  margin-top:6px;
  font-size:15px;
  font-weight:900;
  color:#111;
}

.caja-abierta-metricas .verde{
  color:var(--pape-verde);
}

.caja-abierta-metricas .morado{
  color:#8557e6;
}

.btn-cerrar-caja-admin{
  width:100% !important;
  max-width:none !important;
  margin-top:16px !important;
  min-height:52px !important;
  border-radius:18px !important;
  border:none !important;
  background:#f5efff !important;
  color:#7b35d8 !important;
  font-size:17px !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

/* =========================================================
   MENÚ MODERNO CLARO
========================================================= */

.fondo-menu{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(2px);
  z-index:20000;
}

.fondo-menu.activo{
  display:block;
}

.menu-lateral{
  position:fixed;
  top:0;
  left:0;

  width:320px;
  max-width:88vw;
  height:100dvh;

  transform:translateX(-105%);
  transition:transform .24s ease;

  z-index:20001;

  overflow-y:auto;
  overflow-x:hidden;

  padding:18px 14px 110px;

  display:flex;
  flex-direction:column;
  gap:8px;

  background:
    radial-gradient(
      circle at top left,
      rgba(255,212,59,.22),
      transparent 240px
    ),
    #fffdf8;

  border-right:1px solid rgba(0,0,0,.05);

  box-shadow:
    18px 0 40px rgba(0,0,0,.10);

  -webkit-overflow-scrolling:touch;
}

.menu-lateral.activo{
  transform:translateX(0);
}

/* =========================================================
   PERFIL
========================================================= */

.perfil-menu{
  display:flex;
  align-items:center;
  gap:12px;

  padding:14px;

  border-radius:24px;

  background:white;

  border:1px solid #eeeeee;

  box-shadow:
    0 8px 22px rgba(0,0,0,.05);

  margin-bottom:6px;
}

.avatar-menu{
  width:58px !important;
  height:58px !important;

  min-width:58px !important;
  min-height:58px !important;

  border-radius:50%;

  object-fit:cover;

  border:3px solid var(--pape-amarillo);
}

.perfil-menu strong{
  display:block;

  font-size:18px;
  line-height:1;

  font-weight:900;

  color:#111;
}

#estadoMenu{
  display:inline-flex;
  align-items:center;

  margin-top:6px;
  padding:5px 9px;

  border-radius:999px;

  background:#eaf8ef;
  color:var(--pape-verde);

  font-size:11px;
  font-weight:900;
}

.comision-acumulada,
#comisionAcumuladaVista{
  margin-top:8px;

  font-size:13px;
  line-height:1.15;

  color:#666;

  font-weight:800;
}

/* =========================================================
   TITULOS
========================================================= */

.menu-titulo{
  margin:14px 8px 2px;

  font-size:11px;
  font-weight:900;

  letter-spacing:1px;
  text-transform:uppercase;

  color:#999;
}

/* =========================================================
   BOTONES
========================================================= */

.menu-lateral button{
  width:100%;
  max-width:none;

  min-height:56px;

  padding:0 16px;

  border:none;
  border-radius:20px;

  background:transparent;
  color:#111;

  display:flex;
  align-items:center;
  gap:12px;

  text-align:left;

  font-size:16px;
  font-weight:850;

  position:relative;

  transition:
    background .18s ease,
    transform .08s ease;
}

.menu-lateral button:hover,
.menu-lateral button:active{
  background:rgba(255,212,59,.18);
}

.menu-lateral button::after{
  content:"›";

  margin-left:auto;

  font-size:24px;
  line-height:1;

  color:#c7c7c7;
}

/* =========================================================
   BADGES
========================================================= */

button[onclick="irColaboradores()"]::before,
button[onclick="irReportes()"]::before{
  content:"NUEVO";

  position:absolute;
  right:36px;

  padding:4px 8px;

  border-radius:999px;

  background:#7c4dff;
  color:white;

  font-size:9px;
  font-weight:900;

  letter-spacing:.4px;
}

/* =========================================================
   BOTON SALIR
========================================================= */

.menu-lateral button[onclick="cerrarSesionGlobal()"]{
  color:#e54848;
}

/* =========================================================
   SCROLL
========================================================= */

.menu-lateral::-webkit-scrollbar{
  width:4px;
}

.menu-lateral::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.12);
  border-radius:999px;
}

/* =========================================================
   COLABORADORES / SUPERADMIN
========================================================= */

.pantalla-colaboradores,
.pantalla-superadmin{
  padding: calc(var(--alto-header) + 18px) 16px 130px !important;
  gap: 14px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch !important;

  background:
    radial-gradient(circle at top left, rgba(255,212,59,.20), transparent 240px),
    #f7f7f8;
}

/* HEADER */

.colab-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.colab-header h2{
  margin:0;

  font-size:34px;
  line-height:.95;

  font-weight:900;
  letter-spacing:-1px;

  color:#111;
}

.colab-header p{
  margin:8px 0 0;

  font-size:14px;
  line-height:1.2;

  font-weight:750;
  color:#777;
}

.btn-invitar-colab{
  width:auto !important;
  max-width:none !important;

  min-height:46px !important;

  padding:10px 14px !important;

  border:none !important;
  border-radius:18px !important;

  background:linear-gradient(135deg, var(--pape-amarillo), var(--pape-amarillo-fuerte)) !important;
  color:#111 !important;

  font-size:14px !important;
  font-weight:900 !important;

  box-shadow:0 10px 22px rgba(255,189,0,.24) !important;

  white-space:nowrap;
}

/* RESUMEN */

.colab-resumen-card{
  width:100%;

  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;

  padding:12px;

  border-radius:28px;

  background:white;

  border:1px solid rgba(0,0,0,.05);

  box-shadow:var(--sombra-suave);
}

.colab-resumen-card > div{
  min-height:92px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:8px 5px;

  border-radius:20px;

  background:#fbfbfb;

  text-align:center;
}

.colab-resumen-card span{
  display:block;

  font-size:25px;
  line-height:1;

  margin-bottom:7px;
}

.colab-resumen-card strong{
  display:block;

  font-size:22px;
  line-height:1;

  font-weight:900;

  color:#111;
}

.colab-resumen-card small{
  display:block;

  margin-top:6px;

  font-size:10px;
  line-height:1.15;

  font-weight:850;

  color:#777;
}

/* BUSCADOR */

.colab-buscador{
  width:100%;

  display:grid;
  grid-template-columns:1fr 132px;
  gap:10px;
}

.colab-buscador input,
.colab-buscador select{
  height:50px;
  min-height:50px;

  border:none;
  border-radius:18px;

  background:white;

  box-shadow:var(--sombra-suave);

  font-size:14px;
  font-weight:800;

  color:#111;
}

.colab-buscador input{
  padding:0 16px;
}

.colab-buscador select{
  padding:0 10px;
}

/* LISTA */

.lista-colaboradores{
  width:100%;

  display:flex;
  flex-direction:column;
  gap:10px;
}

/* TARJETA COLABORADOR */

.colab-card{
  width:100%;

  padding:14px;

  border-radius:24px;

  background:white;

  border:1px solid rgba(0,0,0,.05);

  box-shadow:0 8px 22px rgba(0,0,0,.055);

  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:12px;
  align-items:center;
}

.colab-avatar{
  width:54px;
  height:54px;

  border-radius:999px;

  background:#fff4bf;

  display:grid;
  place-items:center;

  font-size:28px;

  overflow:hidden;
}

.colab-avatar img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.colab-info{
  min-width:0;
}

.colab-info strong{
  display:block;

  font-size:17px;
  line-height:1.05;

  font-weight:900;

  color:#111;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.colab-info small{
  display:block;

  margin-top:5px;

  font-size:12px;
  line-height:1.15;

  font-weight:750;

  color:#777;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.colab-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;

  margin-top:8px;
}

.colab-tag{
  display:inline-flex;
  align-items:center;

  min-height:24px;

  padding:4px 8px;

  border-radius:999px;

  font-size:10px;
  font-weight:900;

  line-height:1;
}

.colab-tag.dueno{
  background:#fff4bf;
  color:#9a6a00;
}

.colab-tag.admin{
  background:#eaf0ff;
  color:#345edb;
}

.colab-tag.colaborador{
  background:#f2f2f2;
  color:#555;
}

.colab-tag.activo{
  background:#eaf8ef;
  color:var(--pape-verde);
}

.colab-tag.inactivo{
  background:#f2f2f2;
  color:#777;
}

.colab-tag.suspendido{
  background:#ffeaea;
  color:#d60000;
}

/* ACCIONES */

.colab-acciones{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}

.colab-acciones button{
  width:auto !important;
  max-width:none !important;
  min-height:34px !important;

  padding:7px 10px !important;

  border:none !important;
  border-radius:999px !important;

  background:#f6f6f6 !important;
  color:#111 !important;

  font-size:11px !important;
  font-weight:900 !important;

  box-shadow:none !important;
}

.colab-acciones button.btn-colab-editar{
  background:#fff4bf !important;
  color:#7a5700 !important;
}

.colab-acciones button.btn-colab-desactivar{
  background:#ffeaea !important;
  color:#d60000 !important;
}

.colab-acciones button.btn-colab-activar{
  background:#eaf8ef !important;
  color:var(--pape-verde) !important;
}

/* INFO ROLES */

.colab-info-roles{
  width:100%;

  padding:16px;

  border-radius:26px;

  background:
    radial-gradient(circle at top left, rgba(52,131,250,.10), transparent 180px),
    white;

  border:1px solid rgba(52,131,250,.12);

  box-shadow:var(--sombra-suave);
}

.colab-info-roles h3{
  margin:0 0 12px;

  font-size:18px;
  line-height:1;

  font-weight:900;

  color:#111;
}

.colab-info-roles div{
  padding:10px 0;

  border-top:1px solid #eeeeee;
}

.colab-info-roles div:first-of-type{
  border-top:none;
}

.colab-info-roles strong{
  display:block;

  font-size:14px;
  font-weight:900;

  color:#111;
}

.colab-info-roles span{
  display:block;

  margin-top:4px;

  font-size:12px;
  line-height:1.25;

  font-weight:700;

  color:#666;
}

/* VACÍO */

.colab-vacio{
  padding:24px 18px;

  border-radius:24px;

  background:white;

  border:1px dashed #ddd;

  text-align:center;

  color:#777;

  font-size:14px;
  font-weight:800;
}

.colab-vacio strong{
  display:block;

  margin-bottom:6px;

  font-size:18px;
  font-weight:900;

  color:#111;
}

/* =========================================================
   SUPERADMIN: NEGOCIOS
========================================================= */

.negocio-card{
  width:100%;

  padding:14px;

  border-radius:24px;

  background:white;

  border:1px solid rgba(0,0,0,.05);

  box-shadow:0 8px 22px rgba(0,0,0,.055);

  display:grid;
  grid-template-columns:52px 1fr auto;
  gap:12px;
  align-items:center;
}

.negocio-icono{
  width:52px;
  height:52px;

  border-radius:18px;

  display:grid;
  place-items:center;

  background:#fff4bf;

  font-size:26px;
}

.negocio-info{
  min-width:0;
}

.negocio-info strong{
  display:block;

  font-size:16px;
  line-height:1.05;

  font-weight:900;

  color:#111;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.negocio-info small{
  display:block;

  margin-top:5px;

  font-size:12px;
  line-height:1.15;

  font-weight:750;

  color:#777;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.negocio-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;

  margin-top:8px;
}

.negocio-acciones{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}

.negocio-acciones button{
  width:auto !important;
  max-width:none !important;
  min-height:34px !important;

  padding:7px 10px !important;

  border:none !important;
  border-radius:999px !important;

  background:#f6f6f6 !important;
  color:#111 !important;

  font-size:11px !important;
  font-weight:900 !important;

  box-shadow:none !important;
}

.negocio-acciones .btn-negocio-ver{
  background:#fff4bf !important;
  color:#7a5700 !important;
}

.negocio-acciones .btn-negocio-suspender{
  background:#ffeaea !important;
  color:#d60000 !important;
}

/* =========================================================
   MODALES COLABORADORES
========================================================= */

.modal-colaborador{
  position:fixed;
  inset:0;

  z-index:30000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px;

  background:rgba(0,0,0,.36);
  backdrop-filter:blur(2px);
}

.modal-colaborador-card{
  width:100%;
  max-width:390px;

  max-height:86dvh;

  overflow-y:auto;

  padding:20px;

  border-radius:28px;

  background:white;

  box-shadow:0 22px 60px rgba(0,0,0,.26);

  display:flex;
  flex-direction:column;
  gap:12px;
}

.modal-colaborador-card h3{
  margin:0;

  font-size:26px;
  line-height:1;

  font-weight:900;

  color:#111;
}

.modal-colaborador-card p{
  margin:0;

  font-size:14px;
  line-height:1.25;

  font-weight:700;

  color:#777;
}

.modal-colaborador-card label{
  display:flex;
  flex-direction:column;
  gap:5px;

  font-size:13px;
  font-weight:900;

  color:#555;
}

.modal-colaborador-card input,
.modal-colaborador-card select{
  height:50px;
  min-height:50px;

  border-radius:18px;

  border:1px solid #e8e8e8;

  background:#fbfbfb;

  font-size:16px;
  font-weight:800;
}

.modal-colaborador-botones{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;

  margin-top:6px;
}

.modal-colaborador-botones button{
  width:100% !important;
  max-width:none !important;
  min-height:48px !important;

  padding:10px !important;

  border:none !important;
  border-radius:18px !important;

  font-size:14px !important;
  font-weight:900 !important;

  box-shadow:none !important;
}

.modal-colaborador-botones button:first-child{
  background:#f0f0f0 !important;
  color:#333 !important;
}

.modal-colaborador-botones button:last-child{
  background:linear-gradient(135deg, var(--pape-amarillo), var(--pape-amarillo-fuerte)) !important;
  color:#111 !important;
}

/* =========================================================
   RESPONSIVE CHIQUITO
========================================================= */

@media (max-width:390px){
  .colab-header h2{
    font-size:30px;
  }

  .btn-invitar-colab{
    min-height:42px !important;
    padding:8px 11px !important;
    font-size:12px !important;
  }

  .colab-resumen-card{
    gap:6px;
    padding:10px;
  }

  .colab-resumen-card > div{
    min-height:84px;
    padding:6px 3px;
  }

  .colab-resumen-card span{
    font-size:22px;
  }

  .colab-resumen-card strong{
    font-size:19px;
  }

  .colab-buscador{
    grid-template-columns:1fr;
  }

  .colab-card,
  .negocio-card{
    grid-template-columns:48px 1fr;
  }

  .colab-acciones,
  .negocio-acciones{
    grid-column:1 / -1;
    flex-direction:row;
    justify-content:flex-end;
  }
}

/* =========================================================
   REGISTRO / ONBOARDING
========================================================= */

.pantalla-login-extra,
.pantalla-onboarding{
  min-height:100dvh;
  justify-content:center;
  align-items:center;
  padding:24px 18px !important;
  background:
    radial-gradient(circle at top left, rgba(255,212,59,.25), transparent 240px),
    #fffdf8;
}

.pantalla-login-extra h2,
.onboarding-card h2{
  margin:0 0 10px;
  font-size:36px;
  line-height:.95;
  font-weight:900;
  text-align:center;
}

.pantalla-login-extra input{
  width:100%;
  max-width:340px;
  height:52px;
  border-radius:20px;
  font-weight:800;
}

.pantalla-login-extra button{
  width:100%;
  max-width:340px;
  min-height:52px;
  border-radius:20px;
}

.btn-secundario-login{
  background:white !important;
  color:#111 !important;
  border:1px solid #eadfca !important;
  box-shadow:0 8px 18px rgba(0,0,0,.05) !important;
}

.onboarding-card{
  width:100%;
  max-width:390px;
  padding:22px;
  border-radius:30px;
  background:white;
  box-shadow:0 18px 42px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

.onboarding-card > span{
  font-size:54px;
  line-height:1;
}

.onboarding-card p{
  margin:0 0 8px;
  text-align:center;
  font-size:15px;
  line-height:1.3;
  font-weight:700;
  color:#777;
}

.onboarding-card input{
  height:54px;
  border-radius:20px;
  text-align:center;
  font-weight:900;
}

.onboarding-card button{
  width:100% !important;
  max-width:none !important;
  min-height:54px !important;
  border-radius:20px !important;
  font-weight:900 !important;
}

.codigo-invitacion-box{
  width:100%;
  padding:18px;
  border-radius:22px;
  background:#fff8d6;
  border:2px dashed #ffbd00;
  text-align:center;
}

.codigo-invitacion-box strong{
  display:block;
  font-size:30px;
  font-weight:900;
  letter-spacing:1px;
  color:#111;
}

.btn-copiar-codigo{
  width:100% !important;
  max-width:none !important;
  min-height:52px !important;
  border-radius:20px !important;
  border:none !important;
  background:linear-gradient(135deg, var(--pape-amarillo), var(--pape-amarillo-fuerte)) !important;
  color:#111 !important;
  font-size:17px !important;
  font-weight:900 !important;
}

#tourOverlay.tour-overlay{
  position:fixed;
  inset:0;
  z-index:90000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.48);
  pointer-events:none !important;
}

#tourCard.tour-card{
  width:min(360px, calc(100vw - 28px));
  background:white;
  color:#111;
  border-radius:28px;
  padding:22px 18px 18px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  pointer-events:auto !important;
}

#tourCard h3{
  margin:0 0 10px;
  font-size:28px;
  line-height:1.05;
  font-weight:900;
}

#tourCard p{
  margin:0 0 16px;
  font-size:17px;
  line-height:1.35;
  font-weight:700;
  color:#555;
}

.tour-paso-numero{
  display:inline-block;
  margin-bottom:10px;
  padding:7px 11px;
  border-radius:999px;
  background:#fff4bf;
  color:#7a5700;
  font-size:13px;
  font-weight:900;
}

.tour-botones{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}

#tourBtnAtras,
#tourBtnSiguiente{
  min-height:54px;
  border:none;
  border-radius:20px;
  font-size:16px;
  font-weight:900;
  pointer-events:auto !important;
}

#tourBtnAtras{
  background:#f4f4f4;
  color:#555;
}

#tourBtnSiguiente{
  background:linear-gradient(135deg, var(--pape-amarillo), var(--pape-amarillo-fuerte));
  color:#111;
}

#tourBtnAtras.tour-btn-disabled,
#tourBtnAtras:disabled{
  opacity:.35;
  cursor:not-allowed;
}

#tourBtnSaltar.tour-btn-saltar{
  display:block;
  width:100%;
  margin-top:10px;
  padding:8px 4px;
  border:none;
  background:transparent;
  color:#888;
  font-size:13px;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
  box-shadow:none;
}

#tourBtnSaltar.tour-btn-saltar:active{
  transform:none;
}

#tourSpotlight.tour-spotlight{
  position:fixed;
  z-index:90001;
  border-radius:22px;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.52),
    0 0 0 3px rgba(255,255,255,.95),
    0 12px 30px rgba(0,0,0,.25);
  pointer-events:none !important;
  display:none;
  transition:all .22s ease;
}

#tourHand.tour-hand{
  position:fixed;
  z-index:90003;
  font-size:34px;
  line-height:1;
  pointer-events:none !important;
  display:none;
  animation:tourHandPulse 1s infinite ease-in-out;
}

@keyframes tourHandPulse{
  0%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-6px) scale(1.08); }
  100%{ transform:translateY(0) scale(1); }
}

#tourOverlay{
  pointer-events:none !important;
}

#tourSpotlight,
#tourHand{
  pointer-events:none !important;
}

#tourCard{
  pointer-events:auto !important;
}

#tourCard button{
  pointer-events:auto !important;
}

html.tour-activo,
body.tour-activo{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

body.tour-activo .pantalla{
  overflow:hidden !important;
}

/* =========================================================
   CREAR CUENTA / ONBOARDING LEAD
========================================================= */

#pantallaCrearCuenta{
  min-height:100dvh !important;
  padding:22px 18px 26px !important;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow-y:auto !important;

  background:
    radial-gradient(circle at top left, rgba(255,212,59,.32), transparent 240px),
    radial-gradient(circle at bottom right, rgba(255,189,0,.26), transparent 260px),
    #fffdf8 !important;
}

.registro-shell{
  width:100%;
  max-width:420px;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:18px;
  margin:auto;
}

.registro-brand{
  width:100%;
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:10px;
}

.registro-logo{
  width:150px;
  max-height:72px;
  object-fit:contain;

  filter:drop-shadow(0 8px 18px rgba(255,189,0,.20));
}

.registro-brand h2{
  margin:4px 0 0;

  font-size:clamp(34px, 9vw, 54px);
  line-height:.96;

  font-weight:900;
  letter-spacing:-1.3px;

  color:#07172f;
  text-align:center;
}

.registro-brand p{
  width:min(330px, 100%);

  margin:2px auto 0;

  font-size:clamp(16px, 4.4vw, 21px);
  line-height:1.28;

  font-weight:700;
  color:#5c6470;
}

.registro-beneficios{
  width:100%;

  display:grid;
  grid-template-columns:1fr;
  gap:8px;

  margin-top:6px;
}

.registro-beneficios span{
  min-height:34px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:7px 11px;

  border-radius:999px;

  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,212,59,.45);

  color:#222;

  font-size:13px;
  line-height:1.1;
  font-weight:900;

  box-shadow:0 6px 16px rgba(0,0,0,.04);
}

.registro-card{
  width:100%;

  background:rgba(255,255,255,.92);

  border:1px solid rgba(0,0,0,.05);
  border-radius:30px;

  padding:18px;

  display:flex;
  flex-direction:column;
  gap:12px;

  box-shadow:
    0 24px 60px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.registro-input-wrap{
  width:100%;
  height:60px;

  display:grid;
  grid-template-columns:44px 1fr;
  align-items:center;

  border:1px solid #dfe3e8;
  border-radius:18px;

  background:white;

  padding:0 14px;

  box-shadow:0 6px 14px rgba(0,0,0,.025);
}

.registro-input-wrap span{
  font-size:22px;

  display:grid;
  place-items:center;

  opacity:.72;
}

.registro-input-wrap input{
  width:100% !important;
  height:58px !important;
  min-height:58px !important;

  padding:0 !important;

  border:none !important;
  outline:none !important;

  background:transparent !important;
  box-shadow:none !important;

  font-size:18px !important;
  font-weight:800;

  color:#111;
}

.registro-input-wrap input::placeholder{
  color:#69727f;
  opacity:.9;
}

.registro-input-wrap:focus-within{
  border-color:#ffbd00;
  box-shadow:
    0 0 0 4px rgba(255,189,0,.14),
    0 8px 18px rgba(0,0,0,.04);
}

.btn-registro-principal{
  width:100% !important;
  max-width:none !important;

  height:62px !important;
  min-height:62px !important;

  margin-top:4px;

  border:none !important;
  border-radius:20px !important;

  background:
    linear-gradient(135deg, #ffd43b, #ffbd00) !important;

  color:#111 !important;

  font-size:19px !important;
  font-weight:900 !important;

  box-shadow:
    0 14px 28px rgba(255,189,0,.28) !important;
}

.registro-separador{
  width:100%;

  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;

  margin:4px 0;
}

.registro-separador span{
  height:1px;
  background:#dfe3e8;
}

.registro-separador b{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:999px;

  background:white;
  border:1px solid #dfe3e8;

  color:#333;

  font-size:16px;
  font-weight:900;
}

.btn-google-registro{
  width:100% !important;
  max-width:none !important;

  height:58px !important;
  min-height:58px !important;

  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:12px;

  border:1px solid #dfe3e8 !important;
  border-radius:18px !important;

  background:white !important;
  color:#111 !important;

  font-size:18px !important;
  font-weight:900 !important;

  box-shadow:0 8px 18px rgba(0,0,0,.045) !important;
}

.btn-google-registro .google-icon{
  width:26px !important;
  height:26px !important;
  object-fit:contain !important;
  flex-shrink:0;
}

.btn-ya-tengo-cuenta{
  width:auto !important;
  max-width:none !important;
  min-height:auto !important;

  padding:8px 10px !important;

  border:none !important;
  background:transparent !important;
  box-shadow:none !important;

  color:#4d5662 !important;

  font-size:18px !important;
  font-weight:900 !important;
}

.btn-ya-tengo-cuenta span{
  color:#ffbd00;
  font-size:28px;
  vertical-align:-2px;
}

.mensaje-registro{
  min-height:18px;
  margin-top:0;

  font-size:13px;
  font-weight:800;

  text-align:center;
}

/* Ajuste para celulares bajitos */
@media (max-height:760px){
  #pantallaCrearCuenta{
    align-items:flex-start;
    padding-top:16px !important;
  }

  .registro-shell{
    gap:12px;
  }

  .registro-logo{
    width:118px;
    max-height:54px;
  }

  .registro-brand h2{
    font-size:32px;
  }

  .registro-brand p{
    font-size:15px;
  }

  .registro-beneficios{
    display:none;
  }

  .registro-card{
    padding:14px;
    border-radius:26px;
    gap:10px;
  }

  .registro-input-wrap{
    height:54px;
    border-radius:17px;
  }

  .registro-input-wrap input{
    height:52px !important;
    min-height:52px !important;
    font-size:16px !important;
  }

  .btn-registro-principal{
    height:56px !important;
    min-height:56px !important;
    font-size:17px !important;
  }

  .btn-google-registro{
    height:54px !important;
    min-height:54px !important;
    font-size:16px !important;
  }
}

@media (min-width:390px) and (min-height:780px){
  .registro-beneficios{
    grid-template-columns:repeat(3, 1fr);
  }

  .registro-beneficios span{
    min-height:44px;
    padding:9px 8px;
    font-size:12px;
  }
}

/* =========================================================
   ONBOARDING NUEVO NEGOCIO
========================================================= */

#pantallaOnboardingNuevoNegocio{
  min-height:100dvh !important;
  padding:calc(var(--alto-header) + 22px) 18px 32px !important;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(circle at top left, rgba(255,212,59,.30), transparent 240px),
    radial-gradient(circle at bottom right, rgba(255,189,0,.20), transparent 260px),
    #fffdf8 !important;
}

.onboarding-card{
  width:100%;
  max-width:420px;

  background:white;

  border-radius:34px;
  padding:24px 18px 18px;

  box-shadow:0 24px 60px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.05);

  display:flex;
  flex-direction:column;
  gap:16px;

  text-align:center;
}

.onboarding-icono{
  width:74px;
  height:74px;

  margin:0 auto;

  display:grid;
  place-items:center;

  border-radius:24px;

  background:linear-gradient(135deg, #fff4bf, #ffd43b);

  font-size:38px;

  box-shadow:0 12px 24px rgba(255,189,0,.22);
}

.onboarding-card h2{
  margin:0;

  font-size:36px;
  line-height:.96;

  font-weight:900;
  letter-spacing:-1px;

  color:#111;
}

.onboarding-card p{
  margin:0 auto;

  max-width:340px;

  font-size:16px;
  line-height:1.35;

  font-weight:700;

  color:#666;
}

.onboarding-opciones{
  display:flex;
  flex-direction:column;
  gap:10px;

  margin-top:4px;
}

.onboarding-opcion{
  width:100% !important;
  max-width:none !important;

  min-height:78px !important;

  display:grid !important;
  grid-template-columns:48px 1fr;
  align-items:center;
  gap:12px;

  padding:12px !important;

  border-radius:24px !important;
  border:1px solid #eeeeee !important;

  background:white !important;
  color:#111 !important;

  box-shadow:0 8px 18px rgba(0,0,0,.045) !important;

  text-align:left;
}

.onboarding-opcion.principal{
  border:2px solid rgba(255,189,0,.75) !important;

  background:
    radial-gradient(circle at top left, rgba(255,212,59,.25), transparent 140px),
    white !important;
}

.onboarding-opcion > span{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:18px;

  background:#fff7d6;

  font-size:28px;
}

.onboarding-opcion strong{
  display:block;

  font-size:18px;
  line-height:1.1;

  font-weight:900;

  color:#111;
}

.onboarding-opcion small{
  display:block;

  margin-top:5px;

  font-size:13px;
  line-height:1.2;

  font-weight:700;

  color:#777;
}

.btn-saltar-onboarding{
  width:auto !important;
  max-width:none !important;
  min-height:auto !important;

  margin:2px auto 0 !important;
  padding:8px 10px !important;

  border:none !important;
  background:transparent !important;
  box-shadow:none !important;

  color:#888 !important;

  font-size:14px !important;
  font-weight:900 !important;

  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-height:760px){
  #pantallaOnboardingNuevoNegocio{
    align-items:flex-start;
    padding-top:calc(var(--alto-header) + 14px) !important;
  }

  .onboarding-card{
    border-radius:28px;
    padding:18px 14px 14px;
    gap:12px;
  }

  .onboarding-icono{
    width:58px;
    height:58px;
    font-size:30px;
  }

  .onboarding-card h2{
    font-size:30px;
  }

  .onboarding-card p{
    font-size:14px;
  }

  .onboarding-opcion{
    min-height:68px !important;
  }
}