/* =========================================================
   DEPORTES JIMMY — VALES, LADO CLIENTE  (v11.3.0)
   ---------------------------------------------------------
   La caja va justo debajo de la del código de afiliado y se
   parece a ella a propósito: son dos campos hermanos y quien
   ya usó uno entiende el otro sin leer.

   El vale se pinta en azul y el afiliado en negro, porque un
   vale es dinero del cliente y conviene que se distinga de
   un descuento a simple vista.
   ========================================================= */

:root {
  --dj-vale-azul:#1F5FA9;
  --dj-vale-borde:#E3E3E8;
  --dj-vale-tinta:#111114;
}

.dj-vale-caja {
  margin:10px 0 0; padding:10px 12px;
  border:1px solid var(--dj-vale-borde); border-radius:8px;
  background:#FAFAFB;
}
.dj-vale-caja.es-cargando { opacity:.55; pointer-events:none; }

.dj-vale-caja__titulo {
  display:block; font-size:12.5px; font-weight:600;
  color:#55555D; margin:0 0 6px;
}

.dj-vale-caja__fila { display:flex; gap:6px; }

.dj-vale-caja__input {
  flex:1; min-width:0; height:36px;
  font-size:14px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; text-align:center;
  border:1px solid var(--dj-vale-borde); border-radius:6px;
  background:#fff;
}
.dj-vale-caja__input:focus {
  outline:none; border-color:var(--dj-vale-azul);
  box-shadow:0 0 0 3px rgba(31,95,169,.12);
}

.dj-vale-caja__aplicar {
  flex:none; height:36px; padding:0 14px; cursor:pointer;
  border:0; border-radius:6px; background:var(--dj-vale-azul); color:#fff;
  font-size:12.5px; font-weight:700;
}
.dj-vale-caja__aplicar:hover { background:#17497F; }

/* ---------------------------------------------------------
   VALE YA APLICADO
   El saldo se enseña SIEMPRE, no solo lo que se descontó: la
   pregunta que se hace el cliente es "¿cuánto me queda?", y
   si no la respondemos aquí la hace por WhatsApp.
   --------------------------------------------------------- */
.dj-vale-caja__puesto {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin-bottom:8px;
  border:1px solid rgba(31,95,169,.35); border-radius:6px;
  background:rgba(31,95,169,.06);
}
.dj-vale-caja__puesto b { display:block; font-size:13px; color:var(--dj-vale-tinta); }
.dj-vale-caja__puesto small { display:block; font-size:11.5px; color:#55555D; }

.dj-vale-caja__tick {
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--dj-vale-azul); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:700;
}

.dj-vale-caja__quitar {
  margin-left:auto; flex:none; cursor:pointer;
  border:0; background:none; padding:4px 6px;
  font-size:12px; font-weight:600; color:#8A8A93; text-decoration:underline;
}
.dj-vale-caja__quitar:hover { color:var(--dj-vale-tinta); }

.dj-vale-caja__aviso { margin:8px 0 0; font-size:12px; min-height:0; }
.dj-vale-caja__aviso:empty { margin:0; }
.dj-vale-caja__aviso.es-error { color:#C40000; }
.dj-vale-caja__aviso.es-bien  { color:#0B6E4F; }

/* Colocada dentro del carrito de bloques: hereda el ancho del
   panel de totales y no se pega al borde. */
#dj-vale-mover:not([hidden]) { display:block; margin:10px 0; }