:root {
  --jm-azul: #1B5FD1; --jm-azul-oscuro: #164db0;
  --jm-dorado: #BA7517; --jm-dorado-claro: #d4942f;
  --jm-crema: #faf9f5; --jm-tinta: #1e293b;
  --jm-gris: #64748b; --jm-borde: #e8e5dd;
}
body { background: var(--jm-crema); color: var(--jm-tinta); }
.jm-logo { display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:9px; background:var(--jm-azul);
  color:#fff; font-weight:900; font-size:15px; box-shadow:0 2px 8px rgba(27,95,209,0.25); }
.btn-jm { background:linear-gradient(135deg,var(--jm-dorado),var(--jm-dorado-claro));
  color:#fff; font-weight:600; border:none; border-radius:10px; padding:10px 18px;
  cursor:pointer; transition:all .15s; box-shadow:0 2px 8px rgba(186,117,23,0.3); }
.btn-jm:hover { filter:brightness(1.05); transform:translateY(-1px); }
.btn-azul { background:var(--jm-azul); color:#fff; font-weight:600; border:none;
  border-radius:10px; padding:10px 18px; cursor:pointer; transition:all .15s; }
.btn-azul:hover { background:var(--jm-azul-oscuro); }
.card-jm { background:#fff; border:1px solid var(--jm-borde); border-radius:16px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.input-jm { width:100%; padding:10px 14px; border-radius:10px; border:1px solid var(--jm-borde);
  background:#fff; font-size:14px; transition:border .15s; }
.input-jm:focus { outline:none; border-color:var(--jm-azul);
  box-shadow:0 0 0 3px rgba(27,95,209,0.12); }
.nav-item { display:block; padding:10px 14px; border-radius:10px; color:var(--jm-gris);
  font-size:14px; text-decoration:none; transition:all .12s; }
.nav-item:hover { background:var(--jm-crema); color:var(--jm-tinta); }
.nav-item.activo { background:var(--jm-azul); color:#fff; font-weight:600; }
.borde-dorado { border-top:3px solid var(--jm-dorado); }
.badge-jm { font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; }
.badge-ok { background:#EAF3DE; color:#3B6D11; }
.badge-info { background:#E6F1FB; color:#185FA5; }
.badge-warn { background:#FAEEDA; color:#854F0B; }
.badge-error { background:#FCEBEB; color:#A32D2D; }

/* === Botón-máquina tragamonedas === */
.btn-maquina { position: relative; overflow: hidden; }
/* Estado normal: muestra el contenido */
.btn-maquina .btn-texto { display: inline-flex; align-items: center; gap: 8px; }
.btn-maquina .btn-rodillos { display: none; gap: 4px; align-items: center; justify-content: center; }
/* Estado jugando: oculta texto, muestra rodillos girando */
.btn-maquina.jugando .btn-texto { display: none; }
.btn-maquina.jugando .btn-rodillos { display: inline-flex; }
.rodillo {
  width: 18px; height: 24px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,0.25); position: relative;
}
.rodillo span {
  position: absolute; left: 0; width: 100%; text-align: center;
  font-weight: 900; font-size: 14px; color: #fff; line-height: 24px;
  animation: girar-rodillo 0.35s linear infinite;
}
.rodillo:nth-child(2) span { animation-duration: 0.28s; }
.rodillo:nth-child(3) span { animation-duration: 0.42s; }
@keyframes girar-rodillo {
  0%   { transform: translateY(-48px); }
  100% { transform: translateY(0); }
}

/* Para HTMX: mientras hay petición en curso, el botón juega */
.btn-maquina.htmx-request .btn-texto { display: none; }
.btn-maquina.htmx-request .btn-rodillos { display: inline-flex; }

/* === Elementos de casino === */
/* Franja de lucecitas doradas (encabezados destacados) */
.franja-luces {
  height: 4px; border-radius: 4px;
  background-image: radial-gradient(circle, var(--jm-dorado-claro) 1.5px, transparent 1.5px);
  background-size: 16px 4px; background-repeat: repeat-x;
  opacity: 0.7;
}

/* Ficha de póker como viñeta */
.ficha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px dashed var(--jm-dorado); color: var(--jm-azul);
  font-size: 11px; font-weight: 900; flex-shrink: 0;
}
.ficha-roja { color: #A32D2D; border-color: #A32D2D; }

/* Chip de filtro (píldora redondeada) */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--jm-borde); background: #fff; color: var(--jm-tinta);
  cursor: pointer; transition: all .12s; text-decoration: none;
}
.chip:hover { border-color: var(--jm-azul); }
.chip.activo { background: var(--jm-azul); color: #fff; border-color: var(--jm-azul); }

/* Tarjeta con borde de estado */
.card-estado { background:#fff; border:1px solid var(--jm-borde); border-radius:14px;
  padding:1rem 1.2rem; transition: box-shadow .15s, transform .15s; }
.card-estado:hover { box-shadow:0 4px 16px rgba(0,0,0,0.06); transform:translateY(-1px); }
.card-estado.borde-ok    { border-left:4px solid #3B6D11; }
.card-estado.borde-info  { border-left:4px solid var(--jm-azul); }
.card-estado.borde-warn  { border-left:4px solid var(--jm-dorado); }
.card-estado.borde-error { border-left:4px solid #A32D2D; }

/* Encabezado de página con ficha */
.titulo-pagina { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.titulo-pagina h1 { font-size:22px; font-weight:700; letter-spacing:-0.4px; }

/* Métricas tipo tablero de casino */
.metrica { background:#fff; border:1px solid var(--jm-borde); border-radius:14px; padding:1rem 1.2rem; }
.metrica .valor { font-size:28px; font-weight:800; letter-spacing:-1px; line-height:1; margin-top:4px; }
.metrica .etiqueta { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--jm-gris); font-weight:600; }