/* =========================================================
   DEPORTES JIMMY — AFILIADOS, LADO CLIENTE (v10.13.0)
   ---------------------------------------------------------
   Dos sitios: la caja del código en el checkout y el panel del
   afiliado en Mi cuenta.

   Verde para el dinero que se gana, rojo de la marca solo para
   lo que exige atención. En un panel donde todo son cifras, el
   color tiene que significar algo o se vuelve decoración.
   ========================================================= */

:root {
  --dj-afi-verde:#0B6E4F;
  --dj-afi-rojo:#E11B22;
  --dj-afi-borde:#E3E3E8;
  --dj-afi-tinta:#111114;
}

/* =========================================================
   1. LA CAJA DEL CHECKOUT
   ========================================================= */

/* Discreta a propósito. La mayoría de la gente NO tiene código de
   afiliado: para esos es ruido entre ellos y el botón de pagar, y
   cuanto menos ocupe, mejor. Quien sí lo trae lo estaba buscando y
   lo encuentra igual. */
.dj-afi-caja {
  margin:14px 0 0; padding:10px 12px;
  border:1px solid var(--dj-afi-borde); border-radius:8px;
  background:#FAFAFB;
}
.dj-afi-caja.es-cargando { opacity:.55; pointer-events:none; }

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

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

/* El campo va en mayúsculas y con las letras separadas: así se
   compara de un vistazo con el código escrito en la tarjeta que
   le dieron al cliente. */
.dj-afi-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-afi-borde); border-radius:6px;
  background:#fff;
}
.dj-afi-caja__input:focus {
  outline:none; border-color:var(--dj-afi-tinta);
  box-shadow:0 0 0 3px rgba(17,17,20,.08);
}

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

/* En el carrito la coloca el JavaScript; hasta entonces no se ve. */
#dj-afi-mover[hidden] { display:none; }
#dj-afi-mover.dj-afi-mover--puesta { display:block; margin:0 0 10px; }

/* Ya aplicado */
.dj-afi-caja__puesto { display:flex; align-items:center; gap:9px; }
.dj-afi-caja__tick {
  flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--dj-afi-verde); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}
.dj-afi-caja__puesto b { display:block; font-size:12.5px; color:var(--dj-afi-tinta); }
.dj-afi-caja__puesto small { display:block; font-size:11.5px; color:#6E6E76; }
.dj-afi-caja__quitar {
  margin-left:auto; flex:none; cursor:pointer;
  background:none; border:0; padding:2px 4px;
  font-size:11.5px; color:#8A8A92; text-decoration:underline;
}
.dj-afi-caja__quitar:hover { color:var(--dj-afi-rojo); }

.dj-afi-caja__aviso { margin:6px 0 0; font-size:11.5px; }
.dj-afi-caja__aviso:empty { margin:0; }


/* =========================================================
   1-bis. EL COMPROBANTE EN EL CHECKOUT
   ---------------------------------------------------------
   Vive dentro de la caja del método de pago, sobre su fondo
   rosa. Por eso es blanca: para que se lea como una tarea
   pendiente dentro del bloque y no como parte del texto.
   ========================================================= */

.dj-compck {
  margin:14px 0 2px; padding:12px 14px;
  background:#fff; border:1px solid rgba(225,27,34,.28); border-radius:9px;
}
.dj-compck.es-cargando { opacity:.6; pointer-events:none; }

.dj-compck__cabeza { margin:0 0 9px; }
.dj-compck__cabeza b { display:block; font-size:13.5px; color:var(--dj-afi-tinta); }
.dj-compck__cabeza span { display:block; font-size:11.5px; color:#7A7A82; }

/* El input de archivo de verdad va escondido detrás de la
   etiqueta: el que trae el navegador no se puede peinar y se ve
   distinto en cada uno. */
.dj-compck__input { position:absolute; width:1px; height:1px; opacity:0; }
.dj-compck__boton {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 16px; border-radius:7px;
  background:var(--dj-afi-tinta); color:#fff;
  font-size:13px; font-weight:700;
}
.dj-compck__boton:hover { background:#000; }
.dj-compck__input:focus-visible + span { outline:2px solid var(--dj-afi-rojo); outline-offset:3px; }

.dj-compck__pista { margin:7px 0 0; font-size:11.5px; color:#7A7A82; line-height:1.45; }

.dj-compck__puesto { display:flex; align-items:center; gap:9px; }
.dj-compck__tick {
  flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--dj-afi-verde); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}
.dj-compck__nombre {
  font-size:12.5px; font-weight:600; color:var(--dj-afi-tinta);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dj-compck__quitar {
  margin-left:auto; flex:none; cursor:pointer;
  background:none; border:0; padding:2px 4px;
  font-size:11.5px; color:#8A8A92; text-decoration:underline;
}
.dj-compck__quitar:hover { color:var(--dj-afi-rojo); }

.dj-compck__aviso { margin:7px 0 0; font-size:11.5px; }
.dj-compck__aviso:empty { margin:0; }
.dj-compck__aviso.es-error { color:var(--dj-afi-rojo); font-weight:600; }
.dj-compck__aviso.es-bien  { color:var(--dj-afi-verde); font-weight:600; }
.dj-afi-caja__aviso.es-error { color:var(--dj-afi-rojo); font-weight:600; }
.dj-afi-caja__aviso.es-bien  { color:var(--dj-afi-verde); font-weight:600; }


/* =========================================================
   2. EL PANEL EN MI CUENTA
   ========================================================= */

.dj-afi__suspendido {
  padding:12px 14px; border-radius:8px; font-size:13.5px;
  background:rgba(225,27,34,.07); border-left:4px solid var(--dj-afi-rojo);
  color:#7A1015;
}

/* ---- El código, tratado como lo que es: la herramienta de
        trabajo del afiliado. Grande, y con un botón de copiar
        al lado porque casi siempre lo va a mandar por WhatsApp. */
.dj-afi__codigo-caja {
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:18px 20px; margin:0 0 22px;
  border:2px solid var(--dj-afi-tinta); border-radius:12px; background:#fff;
}
.dj-afi__codigo-et {
  display:block; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:#8A8A92;
}
.dj-afi__codigo {
  display:block; font-size:40px; line-height:1.1; font-weight:800;
  letter-spacing:.16em; color:var(--dj-afi-tinta);
}
.dj-afi__copiar {
  cursor:pointer; padding:9px 18px; border-radius:999px;
  border:1px solid var(--dj-afi-tinta); background:#fff;
  font-size:13px; font-weight:700; color:var(--dj-afi-tinta);
}
.dj-afi__copiar:hover { background:var(--dj-afi-tinta); color:#fff; }
.dj-afi__copiar.es-hecho {
  background:var(--dj-afi-verde); border-color:var(--dj-afi-verde); color:#fff;
}
.dj-afi__codigo-pie {
  flex:1 0 100%; margin:0; font-size:13px; color:#55555D; line-height:1.5;
}

/* ---- Las cuatro cifras ---- */
.dj-afi__cifras {
  display:grid; gap:12px; margin:0 0 26px;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}
.dj-afi__cifra {
  padding:14px 16px; border:1px solid var(--dj-afi-borde);
  border-radius:10px; background:#fff;
}
.dj-afi__cifra span {
  display:block; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:#8A8A92;
}
.dj-afi__cifra b {
  display:block; margin:4px 0 2px; font-size:26px;
  font-weight:800; color:var(--dj-afi-tinta); line-height:1.15;
}
.dj-afi__cifra small { font-size:11.5px; color:#8A8A92; }

/* Lo ganado en negro fuerte, lo cobrable en verde: son las dos
   que el afiliado busca al entrar, y conviene que se distingan
   sin leer la etiqueta. */
.dj-afi__cifra--fuerte { border-color:var(--dj-afi-tinta); }
.dj-afi__cifra--cobrar { border-color:rgba(11,110,79,.45); background:rgba(11,110,79,.04); }
.dj-afi__cifra--cobrar b { color:var(--dj-afi-verde); }

/* ---- Tablas ---- */
.dj-afi__h { margin:26px 0 10px; font-size:17px; font-weight:700; }
.dj-afi__vacio { font-size:13.5px; color:#6E6E76; }

.dj-afi__tabla-caja { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dj-afi__tabla { width:100%; border-collapse:collapse; font-size:13.5px; }
.dj-afi__tabla th {
  text-align:left; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.05em; color:#8A8A92; font-weight:700;
  padding:8px 10px; border-bottom:2px solid var(--dj-afi-borde); white-space:nowrap;
}
.dj-afi__tabla td {
  padding:10px; border-bottom:1px solid var(--dj-afi-borde); vertical-align:middle;
}
.dj-afi__tabla .n, .dj-afi__tabla th.n { text-align:right; }
.dj-afi__tabla tr.es-anulada td { opacity:.5; }

.dj-afi__pastilla {
  display:inline-block; padding:2px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; white-space:nowrap;
  background:#F1F1F3; color:#55555D;
}
.dj-afi__pastilla.es-aprobada { background:rgba(11,110,79,.12); color:var(--dj-afi-verde); }
.dj-afi__pastilla.es-pagada   { background:var(--dj-afi-verde); color:#fff; }
.dj-afi__pastilla.es-anulada  { background:rgba(225,27,34,.10); color:#8E0F14; }

@media (max-width:600px) {
  .dj-afi__codigo { font-size:32px; }
  .dj-afi__cifra b { font-size:22px; }
}

/* =========================================================
   v11.5.0 — LA BARRA DE SUBIDA DEL COMPROBANTE
   ---------------------------------------------------------
   Antes solo ponía "Subiendo…" y se quedaba quieto. Una foto
   de 6 MB desde datos móviles son treinta segundos mirando
   una pantalla que no se mueve, y ahí es donde la gente
   vuelve a pulsar o cierra la página creyendo que se colgó.
   ========================================================= */

.dj-compck__barra {
  height: 6px;
  background: #ECECEF;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 6px;
}
.dj-compck__barra span {
  display: block;
  height: 100%;
  width: 0;
  background: #E11B22;
  border-radius: 999px;
  transition: width .18s linear;
}
.dj-compck__barra.es-lista span { background: #1A7F37; }

/* El botón de reintentar vive dentro del propio aviso de
   error: reintentar sin tener que volver a buscar el archivo
   en el teléfono, que en móvil son cuatro toques. */
.dj-compck__reintentar {
  margin-left: 6px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.dj-compck__reintentar:hover { background: rgba(0,0,0,.06); }