/* ====== Estilos JMAS (sin @apply para funcionar con CDN) ====== */

/* Botones */
.btn-primary{
  padding: 10px 16px;
  border-radius: 16px;
  background: #00ADBB;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary:hover{ box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.btn-primary:active{ transform: scale(.98); }

.btn-outline{
  padding: 10px 16px;
  border-radius: 16px;
  background: transparent;
  color: #003A70;
  font-weight: 800;
  border: 2px solid #003A70;
  transition: transform .06s ease, background .2s ease;
}
.btn-outline:hover{ background: rgba(0,58,112,.06); }
.btn-outline:active{ transform: scale(.98); }

/* Chips */
.word-chip{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 16px;
  font-weight: 800;
  border: 2px solid rgba(0,58,112, .08);
}
.word-chip.pending{ background: #FEF3C7; color: #78350F; } /* amarillo suave */
.word-chip.found{ background: #22C55E; color: #fff; border-color: #22C55E; }

/* Grid */
#grid{
  gap: 8px;
  grid-template-columns: repeat(var(--cols, 14), var(--cell, 44px));
  grid-auto-rows: var(--cell, 44px);
}
#gridWrap{ width: 100%; }

/* Celdas sin borde ni sombra, manteniendo estilo */
.cell{
  width: var(--cell, 44px);
  height: var(--cell, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #E9F3F7; /* sutil */
  color: #003A70;
  font-weight: 800;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: background .15s ease;
}
.cell.selected{ background: #FACC15; } /* amarillo al seleccionar */
.cell.found{ background: #22C55E; color: #fff; }

/* Responsivo: botones ocupan fila en móvil */
@media (max-width: 640px){
  .btn-primary, .btn-outline{ flex: 1; }
}